Text Divider

Text dividers and headers makes page look more organized, beautiful and pleasing to read.


Basic

Create a basic text divider using .divider-text inside .divider

Text
<div class="divider">
  <div class="divider-text">Text</div>
</div>

Alignment

Change text alignment using classes from below mentioned tables.

Start
Start-Center
Center (Default)
End-Center
End
<div class="divider text-start">
  <div class="divider-text">Left</div>
</div>
<div class="divider text-start-center">
  <div class="divider-text">Start-Center</div>
</div>
<div class="divider">
  <div class="divider-text">Center(Default)</div>
</div>
<div class="divider text-end-center">
  <div class="divider-text">End-Center</div>
</div>
<div class="divider text-end">
  <div class="divider-text">Right</div>
</div>
Class Value
class="divider text-{value}" start | start-center | end | end-center

Colors

Change divider color using classes from below mentioned table.

Primary
Success
Danger
Warning
Info
Dark
<div class="divider divider-primary">
  <div class="divider-text">Primary</div>
</div>
<div class="divider divider-success">
  <div class="divider-text">Success</div>
</div>
<div class="divider divider-danger">
  <div class="divider-text">Danger</div>
</div>
<div class="divider divider-warning">
  <div class="divider-text">Warning</div>
</div>
<div class="divider divider-info">
  <div class="divider-text">Info</div>
</div>
<div class="divider divider-dark">
  <div class="divider-text">Dark</div>
</div>
Class Value
class="divider divider-{value}" primary | success | danger | warning | info | dark

Icons

Use icons instead of text to create divider with icons.

<div class="divider text-start">
  <div class="divider-text">
    <i class="bx bx-sun"></i>
  </div>
</div>
<div class="divider text-start-center">
  <div class="divider-text">
    <i class="bx bx-crown"></i>
  </div>
</div>
<div class="divider">
  <div class="divider-text">
    <i class="bx bx-star"></i>
  </div>
</div>
<div class="divider text-end-center">
  <div class="divider-text">
    <i class="bx bx-coffee-togo"></i>
  </div>
</div>
<div class="divider text-end">
  <div class="divider-text">
    <i class="bx bx-cut bx-rotate-180"></i>
  </div>
</div>

Styles

Change divider style using classes from below mentioned table.

Dotted
Dashed
<div class="divider divider-dotted">
  <div class="divider-text">Dotted</div>
</div>
<div class="divider divider-dashed">
  <div class="divider-text">Dashed</div>
</div>
Class Value
class="divider divider-{value}" dotted | dashed

Variables

Refer below mentioned for all the variables of Text Dividers

Variable Description
$divider-color Variable for default text divider border color
$divider-margin-y Variable for text divider top & bottom margin
$divider-margin-x Variable for text divider left & right margin
$divider-text-padding-y Variable for text divider top & bottom padding
$divider-text-padding-x Variable for text divider left & right padding
$divider-font-size Variable for text divider font size
$divider-icon-size Variable for icon size of divider with icon
© 2017- ThemeSelection, Hand-crafted & Made with ❤️