Does bootstrap 4 have a built in horizontal divider?
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="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<hr class="mt-2 mb-3"/>
<!-- OR -->
<hr class="my-12"/>
<!-- It's like -->
<hr class="mt-3 mb-3"/>
I used to be using just a div
with border-top
like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="border-top my-3"></div>
but it's a silly method to make the work done, and you can have some issues. So just use <hr />
.
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<p>
Some text
<hr/>
More text
</p>