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="ri-sun-fill"></i>
  </div>
</div>
<div class="divider text-start-center">
  <div class="divider-text">
    <i class="ri-vip-crown-line"></i>
  </div>
</div>
<div class="divider">
  <div class="divider-text">
    <i class="ri-star-line"></i>
  </div>
</div>
<div class="divider text-end-center">
  <div class="divider-text">
    <i class="ri-goblet-fill"></i>
  </div>
</div>
<div class="divider text-end">
  <div class="divider-text">
    <i class="ri-scissors-line ri-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

Vertical Divider

Create a Vertical divider using .divider-vertical with .divider and other variants work as above.

Solid
VS
<div class="row h-px-250">
  <div class="col-6">
    <div class="divider divider-vertical">
      <div class="divider-text">Solid</div>
    </div>
  </div>
  <div class="col-6">
    <div class="divider divider-vertical">
      <div class="divider-text"><span class="badge-divider-bg bg-label-secondary">VS</span></div>
    </div>
  </div>
</div>

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- Pixinvent, Hand-crafted & Made with ❤️