Skip to main content Skip to docs navigation
View on GitHub

Divided heading

Use a divided heading to call special attention to a separation of content in your pages.

On this page

Examples

Divider heading

html 
<div class="hr-divider">
  <h3 class="hr-divider-content hr-divider-heading">
    Divider heading
  </h3>
</div>

Pill navigation

You can also use it with pill navigation.

html 
<div class="hr-divider">
  <ul class="nav nav-pills hr-divider-content hr-divider-nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active tab</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab</a>
    </li>
  </ul>
</div>

CSS

Sass variables

$hr-divider-font-size:              $font-size-sm * .9;
$hr-divider-line-height:            $hr-divider-font-size * 1.7;
$hr-divider-text-transform:         uppercase;
$hr-divider-height:                 $border-width;

$hr-content-padding-x:              $spacer;
$hr-divider-content-color:          $gray-700;
$hr-divider-content-bg:             $body-bg;
$hr-divider-before-bg:              $gray-subtle;

$hr-divider-nav-padding-y:          $spacer * .3;
$hr-divider-nav-active-font-weight: $font-weight-light;