Logo v4.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v4.3.1
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Duotone Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Spinners
  • Steps
  • Tab
  • Tables
  • Text Highlight
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Input Mask
  • Step Forms (Wizards)
  • Range Slider (noUiSlider)
  • Add Field
  • Toggle Password
  • Count Characters
  • Toggle Switch
  • Toggle State
  • Switch
  • Media
  • Fullscreen Lightbox
  • Video Background
  • Video Player
  • Swiper
  • Others
  • Maps (Leaflet)
  • Chart.js
  • Circles.js (Pie Chart)
  • Sticky Block
  • Countdown
  • Sorting (Shuffle.js)
  • Go To
  • Show Animation
  • Typed.js
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Rotations
  • Shadows
  • Sizing
  • Spacing
  • Z-index

Page header

The page header component.

Example

  • Preview
  • HTML

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 -->
Copy

Reset

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

  • Preview
  • HTML

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 -->
Copy

Button

  • Preview
  • HTML

Users

Invite 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 -->
Copy

Breadcrumb

  • Preview
  • HTML
  1. Pages
  2. Users
  3. Overview

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-primary btn-sm" href="javascript:;">
        <i class="bi-people me-1"></i> Invite users
      </a>
    </div>
  </div>
</div>
<!-- End Page Header -->
Copy

Nav

  • Preview
  • HTML

Users

  • Active
  • Link
  • Link
<!-- 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 -->
Copy

Nav tabs

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

  • Preview
  • HTML

Users

Invite users
  • Active
  • Link
  • Link
<!-- 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 -->
Copy