Page Header

The page header component.

Basic

The basic page header with title and text.

Users

This is a description text.

                    
                      <!-- Page Header -->
                      <div class="page-header">
                        <div class="row align-items-center">
                          <div class="col-sm">
                            <h2 class="page-header-title">Users</h2>
                            <p class="page-header-text">This is a description text.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Page Header -->

Reset

Use .page-header-reset to remove border and padding spaces.

Users

This is a description text.

                    
                      <!-- Page Header -->
                      <div class="page-header page-header-reset">
                        <div class="row align-items-center">
                          <div class="col-sm">
                            <h2 class="page-header-title">Users</h2>
                            <p class="page-header-text">This is a description text.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Page Header -->

Button 

                    
                      <!-- Page Header -->
                      <div class="page-header">
                        <div class="row align-items-center">
                          <div class="col-sm mb-2 mb-sm-0">
                            <h2 class="page-header-title">Users</h2>
                          </div>

                          <div class="col-sm-auto">
                            <a class="btn btn-sm btn-primary" href="javascript:;">
                              <i class="fas fa-user-plus mr-1"></i> Invite users
                            </a>
                          </div>
                        </div>
                      </div>
                      <!-- End Page Header -->

Breadcrumb

Users

Invite users 
                    
                      <!-- Page Header -->
                      <div class="page-header">
                        <div class="row align-items-center">
                          <div class="col-sm mb-2 mb-sm-0">
                            <nav aria-label="breadcrumb">
                              <ol class="breadcrumb breadcrumb-no-gutter">
                                <li class="breadcrumb-item"><a class="breadcrumb-link" href="javascript:;">Pages</a></li>
                                <li class="breadcrumb-item"><a class="breadcrumb-link" href="javascript:;">Users</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Overview</li>
                              </ol>
                            </nav>

                            <h2 class="page-header-title">Users</h2>
                          </div>

                          <div class="col-sm-auto">
                            <a class="btn btn-sm btn-primary" href="javascript:;">
                              <i class="fas fa-user-plus mr-1"></i> Invite users
                            </a>
                          </div>
                        </div>
                      </div>
                      <!-- End Page Header -->

Nav

Users

                    
                      <!-- Page Header -->
                      <div class="page-header">
                        <div class="row align-items-center">
                          <div class="col-sm mb-2 mb-sm-0">
                            <h2 class="page-header-title">Users</h2>
                          </div>

                          <div class="col-sm-auto">
                            <!-- Nav -->
                            <ul class="nav nav-segment">
                              <li class="nav-item">
                                <a class="nav-link active" href="#">Active</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                              </li>
                            </ul>
                            <!-- End Nav -->
                          </div>
                        </div>
                      </div>
                      <!-- End Page Header -->

Nav tabs

Use .page-header-tabs class with a .nav-tabs class to align the borders in one line.

                    
                      <!-- Page Header -->
                      <div class="page-header">
                        <div class="row align-items-center">
                          <div class="col-sm mb-2 mb-sm-0">
                            <h2 class="page-header-title">Users</h2>
                          </div>

                          <div class="col-sm-auto">
                            <a class="btn btn-sm btn-primary" href="javascript:;">
                              <i class="fas fa-user-plus mr-1"></i> Invite users
                            </a>
                          </div>
                        </div>

                        <!-- Nav -->
                        <ul class="nav nav-tabs page-header-tabs">
                          <li class="nav-item">
                            <a class="nav-link active" href="#">Active</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                          </li>
                        </ul>
                        <!-- End Nav -->
                      </div>
                      <!-- End Page Header -->