Text dividers and headers makes page look more organized, beautiful and pleasing to read.
Change text alignment using classes from below mentioned tables.
<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 |
Change divider color using classes from below mentioned table.
<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 |
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>
Change divider style using classes from below mentioned table.
<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 |
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 |