Dividers
Divider components are flexible UI elements designed to help organize and separate content.
Divider components are flexible UI elements designed to help organize and separate content, allowing for customized page structure and improved visual flow.
Example — Horizontal Dividers
A simple horizontal line used to separate content and organize sections on the page.
Some text goes here.
More text goes here.
<span>Some text goes here.</span>
<div class="divider my-4"></div>
<span>More text goes here.</span>
<span>Some text goes here.</span> <div class="divider
my-4"></div> <span>More text goes here.</span>
Sizes
The height and thickness of a divider can be customized to suit different design needs.
<div class="divider my-4"></div>
<div class="divider border-2 my-4"></div>
<div class="divider border-3 my-4"></div>
<div class="divider border-4 my-4"></div>
<div class="divider border-5 my-4"></div>
<div class="divider my-4"></div> <div class="divider border-2
my-4"></div> <div class="divider border-3 my-4"></div>
<div class="divider border-4 my-4"></div> <div class="divider
border-5 my-4"></div>
Colors
Dividers can be styled with various colors to match the overall theme or provide visual contrast.
<div class="divider my-4"></div>
<div class="divider primary my-4"></div>
<div class="divider secondary my-4"></div>
<div class="divider success my-4"></div>
<div class="divider danger my-4"></div>
<div class="divider warning my-4"></div>
<div class="divider info my-4"></div>
<div class="divider my-4"></div> <div class="divider primary
my-4"></div> <div class="divider secondary my-4"></div>
<div class="divider success my-4"></div> <div class="divider
danger my-4"></div> <div class="divider warning my-4"></div>
<div class="divider info my-4"></div>
Styles
Dividers can be styled with dotted or dashed lines for a more decorative and unique appearance.
<div class="divider-dotted primary my-4"></div>
<div class="divider-dashed primary my-4"></div>
<div class="divider-dotted primary my-4"></div> <div
class="divider-dashed primary my-4"></div>
Dividers with Labels
Dividers with labels are versatile design elements used to visually divide content with customizable styles, such as solid, dashed, or dotted lines, and optional text in the center for added clarity or emphasis.
Label
Colored Label
Dashed Label
Dotted Label
Heading
<div class="divider-label my-4">Label</div>
<div class="divider-label primary my-4">Colored Label</div>
<div class="divider-label-dashed primary my-4">Dashed Label</div>
<div class="divider-label-dotted primary my-4">Dotted Label</div>
<div class="divider-label primary my-4"><h4>Heading</h4></div>
<div class="divider-label success my-4"><i class="ri-check-double-line text-success"></i></div>
<div class="divider-label danger my-4"><i class="ri-heart-fill text-danger"></i></div>
<div class="divider-label my-4">Label</div> <div
class="divider-label primary my-4">Colored Label</div> <div
class="divider-label-dashed primary my-4">Dashed Label</div> <div
class="divider-label-dotted primary my-4">Dotted Label</div> <div
class="divider-label primary my-4"><h4>Heading</h4></div> <div
class="divider-label success my-4"><i class="ri-check-double-line
text-success"></i></div> <div class="divider-label danger
my-4"><i class="ri-heart-fill text-danger"></i></div>
Vertical Dividers
Vertical dividers are similar to horizontal dividers but oriented vertically to separate content in columns or sidebars.
Example — Vertical Dividers
A simple vertical line used to separate content in layouts.
Left content
Right content
<div style="display: flex; height: 200px;">
<div style="flex: 1; padding: 10px;">Left content</div>
<div class="divider-vertical"></div>
<div style="flex: 1; padding: 10px;">Right content</div>
</div>
<div style="display: flex; height: 200px;"> <div style="flex: 1;
padding: 10px;">Left content</div> <div
class="divider-vertical"></div> <div style="flex: 1; padding:
10px;">Right content</div> </div>
Vertical Sizes
The width and thickness of a vertical divider can be customized.
Content
Content
Content
Content
Content
Content
<div style="display: flex; height: 200px;">
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical border-2"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical border-3"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical border-4"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical border-5"></div>
<div style="flex: 1; padding: 10px;">Content</div>
</div>
<div style="display: flex; height: 200px;"> <div style="flex: 1;
padding: 10px;">Content</div> <div
class="divider-vertical"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
border-2"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
border-3"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
border-4"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
border-5"></div> <div style="flex: 1; padding:
10px;">Content</div> </div>
Vertical Colors
Vertical dividers can be styled with various colors.
Content
Content
Content
Content
Content
Content
Content
Content
<div style="display: flex; height: 200px;">
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical primary"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical secondary"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical success"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical danger"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical warning"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical info"></div>
<div style="flex: 1; padding: 10px;">Content</div>
</div>
<div style="display: flex; height: 200px;"> <div style="flex: 1;
padding: 10px;">Content</div> <div
class="divider-vertical"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
primary"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
secondary"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
success"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
danger"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
warning"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical
info"></div> <div style="flex: 1; padding:
10px;">Content</div> </div>
Vertical Styles
Vertical dividers can be styled with dotted or dashed lines.
Content
Content
Content
<div style="display: flex; height: 200px;">
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical-dotted primary"></div>
<div style="flex: 1; padding: 10px;">Content</div>
<div class="divider-vertical-dashed primary"></div>
<div style="flex: 1; padding: 10px;">Content</div>
</div>
<div style="display: flex; height: 200px;"> <div style="flex: 1;
padding: 10px;">Content</div> <div class="divider-vertical-dotted
primary"></div> <div style="flex: 1; padding:
10px;">Content</div> <div class="divider-vertical-dashed
primary"></div> <div style="flex: 1; padding:
10px;">Content</div> </div>
Vertical Dividers with Labels
Vertical dividers with labels provide a vertical line with centered text.
Left content
Label
Right content
Left content
Colored Label
Right content
Left content
Dashed Label
Right content
Left content
Dotted Label
Right content
<div style="display: flex; height: 300px;">
<div style="flex: 1; padding: 10px;">Left content</div>
<div class="divider-vertical-label">Label</div>
<div style="flex: 1; padding: 10px;">Right content</div>
</div>
<div style="display: flex; height: 300px; margin-top: 20px;">
<div style="flex: 1; padding: 10px;">Left content</div>
<div class="divider-vertical-label primary">Colored Label</div>
<div style="flex: 1; padding: 10px;">Right content</div>
</div>
<div style="display: flex; height: 300px; margin-top: 20px;">
<div style="flex: 1; padding: 10px;">Left content</div>
<div class="divider-vertical-label-dashed primary">Dashed Label</div>
<div style="flex: 1; padding: 10px;">Right content</div>
</div>
<div style="display: flex; height: 300px; margin-top: 20px;">
<div style="flex: 1; padding: 10px;">Left content</div>
<div class="divider-vertical-label-dotted primary">Dotted Label</div>
<div style="flex: 1; padding: 10px;">Right content</div>
</div>
<div style="display: flex; height: 300px;"> <div style="flex: 1;
padding: 10px;">Left content</div> <div
class="divider-vertical-label">Label</div> <div style="flex: 1;
padding: 10px;">Right content</div> </div> <div style="display:
flex; height: 300px; margin-top: 20px;"> <div style="flex: 1; padding:
10px;">Left content</div> <div class="divider-vertical-label
primary">Colored Label</div> <div style="flex: 1; padding:
10px;">Right content</div> </div> <div style="display: flex; height:
300px; margin-top: 20px;"> <div style="flex: 1; padding: 10px;">Left
content</div> <div class="divider-vertical-label-dashed primary">Dashed
Label</div> <div style="flex: 1; padding: 10px;">Right content</div>
</div> <div style="display: flex; height: 300px; margin-top: 20px;">
<div style="flex: 1; padding: 10px;">Left content</div> <div
class="divider-vertical-label-dotted primary">Dotted Label</div> <div
style="flex: 1; padding: 10px;">Right content</div> </div>
On this page
ESC