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">
<h1 class="page-header-title">Users</h1>
<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">
<h1 class="page-header-title">Users</h1>
<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">
<h1 class="page-header-title">Users</h1>
</div>
<div class="col-sm-auto">
<a class="btn btn-primary" href="javascript:;">
<i class="tio-user-add mr-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">
<h1 class="page-header-title">Users</h1>
</div>
<div class="col-sm-auto">
<a class="btn btn-primary" href="javascript:;">
<i class="tio-user-add mr-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">
<h1 class="page-header-title">Users</h1>
</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">
<h1 class="page-header-title">Users</h1>
</div>
<div class="col-sm-auto">
<a class="btn btn-primary" href="javascript:;">
<i class="tio-user-add 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 -->
Nav + avatars
<!-- Page Header -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-sm mb-2 mb-sm-0">
<div class="media align-items-center">
<!-- Avatar -->
<div class="avatar avatar-lg avatar-4by3 mr-2">
<img class="avatar-img" src="../assets/svg/brands/guideline.svg" alt="Image Description">
</div>
<!-- End Avatar -->
<div class="media-body">
<h3>Cloud computing web service</h3>
</div>
</div>
</div>
<div class="col-sm-auto">
<div class="d-flex">
<!-- Avatar Group -->
<div class="avatar-group avatar-circle mr-3">
<a class="avatar" href="user-profile.html" data-toggle="tooltip" data-placement="top" title="Amanda Harvey">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</a>
<a class="avatar" href="user-profile.html" data-toggle="tooltip" data-placement="top" title="Linda Bates">
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</a>
<a class="avatar avatar-soft-info" href="user-profile.html" data-toggle="tooltip" data-placement="top" title="#digitalmarketing">
<span class="avatar-initials">
<i class="tio-group-senior"></i>
</span>
</a>
<a class="avatar" href="user-profile.html" data-toggle="tooltip" data-placement="top" title="David Harrison">
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</a>
<a class="avatar avatar-soft-dark" href="user-profile.html" data-toggle="tooltip" data-placement="top" title="Antony Taylor">
<span class="avatar-initials">A</span>
</a>
<a class="avatar avatar-light avatar-circle" href="javascript:;" data-toggle="modal" data-target="#shareWithPeopleModal">
<span class="avatar-initials">+2</span>
</a>
</div>
<!-- End Avatar Group -->
<a class="btn btn-icon btn-primary rounded-circle" href="javascript:;" data-toggle="modal" data-target="#shareWithPeopleModal">
<i class="tio-share"></i>
</a>
</div>
</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 -->