tabler/docs/ui/components/divider.md

title, summary, description, layout

title	summary	description	layout
Divider	Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.	Separate content with clear dividers.	default

Default markup

Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text">See also</div>
<p>
  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>

Text position

You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text hr-text-start">Start divider</div>
<p>
  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text">Centered divider</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text hr-text-end">End divider</div>
<p>
  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>

Divider color

Customize the color of dividers to make them go well with your design. Click here to see the list of available colors.

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text text-green">Green divider</div>
<p>
  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
<div class="hr-text text-red">Red divider</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
<div class="hr-text text-primary">Primary divider</div>
<p>
  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>