Bootstrap Dividers

Having well-structured content on your website helps visitors to find specific information that they need. In today's snippet tutorial, we'll explore the ways how to divide text sections with <hr> dividers. 

Bootstrap Dividers are horizontal lines to create sections on various parts of your website. I have created multiple variants - solid lines, dashed lines, dotted lines, and even a text in the divider.

The Bootstrap Divider is created based on the <hr> element. Each divider is created using HTML and CSS3. You can also add custom text between the divider to create a header for each of your content sections.

I have originally created the tutorial in Bootstrap 4, but it should be fully compatible with Bootstrap 5. 

Alright, let's do it.

FAQs

What is the <hr>?

The <hr> element is a horizontal rule, which can be used to separate content.

The <hr> element is always displayed as a single line.

The width of the <hr> element is determined automatically by the browser; based on the width of its contents.

When to Use Horizontal Dividers

The <hr> element should be styled consistently with other horizontal rules in the same document when used as a separator. The hr element can also be used to mark up a thematically distinct sub-section of the document, such as a chapter title or other top-level heading in printed works.

The <hr> element should not be used for visual styling. In particular, do not insert an <hr> element between paragraphs in an attempt to force line breaks; use CSS instead if you want to control paragraph spacing and margin size.

Is the <hr> tag still used in HTML?

Yes. The <hr> tag was created in HTML 3.2 and has been supported by all browsers since then.

If you liked this snippet, you might also enjoy exploring Bootstrap Chat or Bootstrap DataTables .