View on GitHub

Dividers

Use the horizontal or vertical rule helpers to create dividers. A divider can be used to visually structure an interface by clearly separating content sections.

On this page

Horizontal rules

Horizontal rules should use the <hr> tag, when the separator has semantic meaning (i.e., when it represents a topic change or a significant transition in the content). If the divider is purely decorative, prefer using a border CSS property on a <div> or our border utilities, or even ensure to hide it from assistive technologies (e.g., aria-hidden="true").

<hr>
<hr class="border-brand-primary">
<div class="border-top border-default my-medium"></div>
<div class="border-top border-emphasized border-thick my-medium"></div>
html

The <hr> color is automatically adjusted according to the color modes or on colored backgrounds.

<div class="bg-brand-primary p-tall">
  <div data-bs-theme="light">
    <hr class="border-thick">
  </div>
</div>
<div class="bg-status-negative-emphasized p-tall">
  <div data-bs-theme="root-inverted">
    <hr class="border-thicker">
  </div>
</div>
html
Bootstrap $enable-bootstrap-compatibility: true

The <hr> color can be set using colors utilities

<hr class="text-brand-primary">
html

Vertical rules

Vertical rules are inspired by the <hr> element, allowing you to create vertical dividers in common layouts. They’re styled just like <hr> elements. They have min-height of 1em.

<div class="vr"></div>
html

Vertical rules scale their height in flex layouts:

<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
  <div class="vr border-brand-primary"></div>
  <div class="vr border-thicker"></div>
</div>
html

The .vr color is automatically adjusted according to the color modes or on colored backgrounds.

<div class="bg-brand-primary p-tall">
  <div data-bs-theme="light">
    <div class="vr border-thick"></div>
  </div>
</div>
<div class="bg-status-negative-emphasized p-tall">
  <div data-bs-theme="root-inverted">
    <div class="vr border-thicker"></div>
  </div>
</div>
html
Bootstrap $enable-bootstrap-compatibility: true

The .vr color can be set using colors utilities

  <div class="vr text-brand-primary"></div>
html