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 .
