178

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.

0

13 Answers 13

265

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>

4
90

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 />.

2
  • 3
    <div class="border-top my-3"></div> instead of span use div
    – Anuja P
    Commented Jun 15, 2018 at 10:55
  • Relative to the question this answer is correct but border-* shouldn't be used as a divider. Imagine you want to separate multiple rows. If you apply border-* to a row it will span from side to side of the parent container. If you apply border-* to individual column then they won't look good when stacked on mobile. The only option is to use <hr/> just like the accepted answer suggested.
    – mai
    Commented Mar 6, 2020 at 14:26
60

For Bootstrap 4

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

<div class="row">
    <div class="col"><hr></div>
    <div class="col-auto">OR</div>
    <div class="col"><hr></div>
</div>
18

For dropdowns, yes:

https://v4-alpha.getbootstrap.com/components/dropdowns/

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>
1
  • 1
    <div class="dropdown-divider"></div> this is makes the divider
    – Rayees AC
    Commented Apr 3, 2022 at 6:21
12

For Bootstrap v4;

for a thin line;

<div class="divider"></div>

for a medium thick line;

<div class="divider py-1 bg-dark"></div>

for a thick line;

<div class="divider py-1 bg-dark"><hr></div>
7

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

<hr class="mt-5 mb-5">

https://getbootstrap.com/docs/4.3/utilities/spacing/

1
  • Did you mean <hr class="my-5" />? Commented Oct 11, 2023 at 18:47
5

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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container py-5">
    <!-- For Demo Purpose -->
    <header class="py-5 text-center">
        <h1 class="display-4">Bootstrap Divider</h1>
        <p class="lead mb-0">Some divider variants using &lt;hr&gt; element.    </p>
    </header>


    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="mb-4">
                <h6 class=" text-uppercase">Dashed</h6>
                <!-- Dashed divider -->
                <hr class="dashed">
            </div>
            <div class="mb-4">
                <h6 class=" text-uppercase">Dotted</h6>
                <!-- Dotted divider -->
                <hr class="dotted">
            </div>
            <div class="mb-4">
                <h6 class="text-uppercase">Solid</h6>
                <!-- Solid divider -->
                <hr class="solid">
            </div>
            <div class="mb-4">
                <h6 class=" text-uppercase">Text content</h6>
                <!-- Gradient divider -->
                <hr data-content="AND" class="hr-text">
            </div>
           
        </div>
    </div>
</div>

3

in Bootstrap 5 you can do something like this:

<div class="py-2 my-1 text-center position-relative mx-2">
            <div class="position-absolute w-100 top-50 start-50 translate-middle" style="z-index: 2">
                <span class="d-inline-block bg-white px-2 text-muted">or</span>
            </div>
            <div class="position-absolute w-100 top-50 start-0 border-muted border-top"></div>
</div>
2
<div class="dropdown">
  <button data-toggle="dropdown">
      Sample Button
  </button>
  <ul class="dropdown-menu">
      <li>A</li>
      <li>B</li>
      <li class="dropdown-divider"></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 class="divider" used in bootstrap 3 for horizontal divider

2

   <div class="form-group col-12">
            <hr>
   </div>

1

I am using this example in my project:

html:

 <hr class="my-3 dividerClass"/>

css:

.dividerClass{
  border-top-color: #999
 }
1
  • 1
    also: <p style="border-top-width: thin; border-top-color: #999; border-top-style: solid;"></p>
    – nsdb
    Commented Dec 26, 2022 at 23:42
1

This is the way I did it in Express.js + Pug:

CSS:

.divider-text {
    position: relative;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
.divider-text span {
    padding: 7px;
    font-size: 12px;
    position: relative;
    z-index: 2;
}
.divider-text:after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #ddd;
    top: 55%;
    left: 0;
    z-index: 1;
}

PUG code:

p.divider-text
    span.bg-light OR

Which then compiles into this:

HTML:

<p class="divider-text"><span class="bg-light">OR</span></p>

Visual Result:

enter image description here

-2

bootstrap 5.2

<div class="vr"></div>
1
  • This is not a horizontal divider. It is a vertical divider.
    – yansusanto
    Commented May 4, 2023 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.