tabler.tabler/docs/content/ui/components/divider.md

---

title: Divider summary: 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.

description: Separate content with clear dividers.

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.

{% capture html -%}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.

See also

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

{%- endcapture %} {% include "docs/example.html" html=html %}

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.

{% capture html -%}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.

Start divider

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

Centered divider

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.

End divider

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

{%- endcapture %} {% include "docs/example.html" html=html %}

Divider color

Customize the color of dividers to make them go well with your design. See the full list of available colors for more details.

{% capture html -%}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.

Green divider

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

Red divider

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.

Primary divider

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

{%- endcapture %} {% include "docs/example.html" html=html %}