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

Preview
HTML

Text

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

Alignment

Change text alignment using classes from below mentioned tables.

Preview
HTML

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.

Preview
HTML

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.

Preview
HTML

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

Preview
HTML

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