Tabler

Source code Sponsor

Last updates

Example 1
Change deprecated html tags to text decoration classes (#29604)
Example 2
justify-content:between ⇒ justify-content:space-between (#29734)
Example 3
Update change-version.js (#29736)
Example 4
Regenerate package-lock.json (#29730)
Paweł Kuna
UI Designer
Set status Profile & account Feedback
Settings Logout

Documentation

Page headers

Page heading examples for Tabler

Simple header

Overview

Dashboard

New view Create new report 
<div class="page-header">
  <div class="row align-items-center">
    <div class="col">
      <div class="page-pretitle">
        Overview
      </div>
      <h2 class="page-title">
        Dashboard
      </h2>
    </div>
    <div class="col-auto ms-auto">
      <div class="btn-list">
        <span class="d-none d-sm-inline">
          <a href="#" class="btn btn-white">
            New view
          </a>
        </span>
        <a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
          <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
          <!-- SVG icon code -->
          Create new report
        </a>
        <a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
          <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
          <!-- SVG icon code -->
        </a>
      </div>
    </div>
  </div>
</div>

With meta, avatar and actions

Paweł Kuna

UI Designer at Tabler
194 friends
Verified
Send message 
<div class="page-header">
  <div class="row align-items-center">
    <div class="col-auto">
      <span class="avatar avatar-md" style="background-image: url(...)"></span>
    </div>
    <div class="col">
      <h2 class="page-title">Paweł Kuna</h2>
      <div class="page-subtitle">
        <div class="row">
          <div class="col-auto">
            <!-- Download SVG icon from http://tabler-icons.io/i/building-skyscraper -->
            <!-- SVG icon code -->
            <a href="#" class="text-reset">UI Designer at Tabler</a>
          </div>
          <div class="col-auto">
            <!-- Download SVG icon from http://tabler-icons.io/i/users -->
            <!-- SVG icon code -->
            <a href="#" class="text-reset">194 friends</a>
          </div>
          <div class="col-auto text-success">
            <!-- Download SVG icon from http://tabler-icons.io/i/check -->
            <!-- SVG icon code with class="text-green" -->
            Verified
          </div>
        </div>
      </div>
    </div>
    <div class="col-auto d-none d-md-flex">
      <a href="#" class="btn btn-primary">
        <!-- Download SVG icon from http://tabler-icons.io/i/message -->
        <!-- SVG icon code -->
        Send message
      </a>
    </div>
  </div>
</div>

With meta, search and actions

Gallery

1-12 of 241 photos
Add photo 
<div class="page-header">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title">Gallery</h2>
      <div class="text-muted mt-1">1-12 of 241 photos</div>
    </div>
    <div class="col-auto ms-auto d-print-none">
      <div class="d-flex">
        <div class="me-3 d-none d-md-block">
          <div class="input-icon">
            <input type="text" class="form-control" placeholder="Search…">
            <span class="input-icon-addon">
              <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
              <!-- SVG icon code -->
            </span>
          </div>
        </div>
        <a href="#" class="btn btn-primary">
          <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
          <!-- SVG icon code -->
          Add photo
        </a>
      </div>
    </div>
  </div>
</div>

Bordered header

Improve cards with no border

#693 opened by Jeffie Lewzey in Calendar Page
Edit Subscribe 
<div class="page-header page-header-border">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title">Improve cards with no border</h2>
      <div class="text-muted mt-1">
        <a href="#" class="text-reset">#693</a>
        opened by <a href="#" class="text-body">Jeffie Lewzey</a>
        in <a href="#" class="text-body">Calendar Page</a>
      </div>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn">
          <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
          <!-- SVG icon code -->
          Edit
        </a>
        <a href="#" class="btn d-none d-md-inline-flex">
          <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
          <!-- SVG icon code -->
          Subscribe
        </a>
      </div>
    </div>
  </div>
</div>

Header with breadcrumb and actions

  1. Home
  2. Library
  3. Articles

Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.

Edit Publish 
<div class="page-header">
  <div class="row align-items-center mw-100">
    <div class="col">
      <div class="mb-1">
        <ol class="breadcrumb" aria-label="breadcrumbs">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li>
        </ol>
      </div>
      <h2 class="page-title">
        <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
      </h2>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn d-none d-md-inline-flex">
          <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
          <!-- SVG icon code -->
          Edit
        </a>
        <a href="#" class="btn btn-primary">
          Publish
        </a>
      </div>
    </div>
  </div>
</div>