Page header
The page header component.
Example
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
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">
<a class="btn btn-primary btn-sm" href="javascript:;">
<i class="bi-people me-1"></i> Invite users
</a>
</div>
</div>
</div>
<!-- End Page Header -->
Breadcrumb
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-primary btn-sm" href="javascript:;">
<i class="bi-people me-1"></i> Invite users
</a>
</div>
</div>
</div>
<!-- End Page Header -->
Nav
<!-- 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.
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">
<a class="btn btn-primary btn-sm" href="javascript:;">
<i class="bi-people me-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 -->