htmlcssbootstrap-4twitter-bootstrap-4

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.


Solution

  • 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>