Does bootstrap 4 have a built in horizontal divider?

Does bootstrap 4 have a built in horizontal divider? I can do this,

<style type="text/css"> .h-divider{ margin-top:5px; margin-bottom:5px; height:1px; width:100%; border-top:1px solid gray; } </style> 

But I want to use the built in bootstrap css, I can't find it anywhere in the docs, maybe I'm missing it.

11 Answers

HTML already has a built-in horizontal divider called <hr/> (short for "horizontal rule"). Bootstrap styles it like this:

hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } 

<link rel="stylesheet" href="" /> <p> Some text <hr/> More text </p>

Bootstrap 4 define a CSS style for the HTML built-in horizontal divider <hr />, so just use it.

You can also customize margin with spacing utilities: mt for margin top, mb for margin bottom and my for margin top and bottom. The integer represent spacing 1 for small margin and 5 for huge margin. Here is an example:

<link rel="stylesheet" href=""> <hr/> <!-- OR --> <hr/> <!-- It's like --> <hr/>

I used to be using just a div with border-top like:

<link rel="stylesheet" href=""> <div></div>

but it's a silly method to make the work done, and you can have some issues. So just use <hr />.

For Bootstrap 4

<hr> still works for a normal divider. However, if you want a divider with text in the middle:

<div> <div><hr></div> <div>OR</div> <div><hr></div> </div> 

For dropdowns, yes:

<div> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> <div></div> <a href="#">Separated link</a> </div> 

For Bootstrap v4;

for a thin line;

<div></div> 

for a medium thick line;

<div></div> 

for a thick line;

<div><hr></div> 

You can use the mt and mb spacing utilities to add extra margins to the <hr>, for example:

<hr> 

Here are some custom utility classes:

hr.dashed { border-top: 2px dashed #999; } hr.dotted { border-top: 2px dotted #999; } hr.solid { border-top: 2px solid #999; } hr.hr-text { position: relative; border: none; height: 1px; background: #999; } hr.hr-text::before { content: attr(data-content); display: inline-block; background: #fff; font-weight: bold; font-size: 0.85rem; color: #999; border-radius: 30rem; padding: 0.2rem 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* * * ========================================== * FOR DEMO PURPOSES * ========================================== * */ body { min-height: 100vh; background-color: #fff; color: #333; } .text-uppercase { letter-spacing: .1em; }

<link rel="stylesheet" href=""> <div> <!-- For Demo Purpose --> <header> <h1>Bootstrap Divider</h1> <p>Some divider variants using &lt;hr&gt; element. </p> </header> <div> <div> <div> <h6>Dashed</h6> <!-- Dashed divider --> <hr> </div> <div> <h6>Dotted</h6> <!-- Dotted divider --> <hr> </div> <div> <h6>Solid</h6> <!-- Solid divider --> <hr> </div> <div> <h6>Text content</h6> <!-- Gradient divider --> <hr> </div> </div> </div> </div>

<div> <button> Sample Button </button> <ul> <li>A</li> <li>B</li> <li></li> <li>C</li> </ul> </div> 

This is the sample code for the horizontal divider in bootstrap 4. Output looks like this:

class="dropdown-divider" used in bootstrap 4, while used in bootstrap 3 for horizontal divider

 <div> <hr> </div>

in Bootstrap 5 you can do something like this:

<div> <div> <span>or</span> </div> <div></div> </div> 

I am using this example in my project:

html:

 <hr/> 

css:

.dividerClass{ border-top-color: #999 }