Does bootstrap 4 have a built in horizontal divider?

bootstrap 4 vertical divider
bootstrap 4 horizontal divider with text
bootstrap 4 vertical divider navbar
bootstrap horizontal divider with text
bootstrap vertical line style
html horizontal line
dotted line in bootstrap
bootstrap featurette 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.

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 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>Some text<hr/>More text<p>

Does bootstrap 4 have a built in horizontal divider?, Bootstrap vertical divider between columns – You can create Vertical class="​col-xs-3">Col 3</div> <div class="col-xs-3">Col 4</div> </div> 

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>

Bootstrap Vertical and Horizontal Divider | CSS, Bootstrap 4 Grid Example: Stacked-to-horizontal. We will Bootstrap will recognize how many columns there are, and each column will get the same width​.

in Bootstrap 4.0v

<div class="border-top my-3"></div>

you can change my-3 to my-2 ; m for "margin", y for "top and bottom"

Bootstrap 4 Grid Stacked-to-horizontal, Preview HTML CSS. View Full Screen. Fork. Fork this. 98.7K 7 Fav · Post to Facebook Tweet this. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.

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>

Bootstrap Snippet divider- lines using HTML CSS, These docs are for v2.3.2, which is no longer officially supported. Made interactive with the dropdown JavaScript plugin. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown , or another Add a horizontal divider by creating an empty list item with the class .divider , like so: 1; 2; 3; 4; 5; ».

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

Components · Bootstrap, These include Typography, Tables, Forms, Buttons, Glyphicons, Dropdowns, Buttons and Input Groups, Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels, and many others.

Bootstrap 3 Horizontal and Vertical Divider, Classes are built from a default Sass map ranging from .25rem to 3rem . Notation. Spacing utilities that apply to all breakpoints, from xs to xl , have no breakpoint blank - for classes that set a margin or padding on all 4 sides of the element for horizontally centering fixed-width block level content—that is, content that has 

How to Style a Horizontal Line, Use our powerful mobile-first flexbox grid to build layouts of all shapes and Columns have horizontal padding to create the gutters between individual You can use predefined grid classes (like .col-4 ) or Sass mixins for more semantic markup. Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line 

A Simple Bootstrap Tutorial, Introduction · Download · Contents · Browsers & devices · JavaScript · Theming · Build tools This is a simple hero unit, a simple jumbotron-style component for calling extra <div class="jumbotron"> <h1 class="display-4">Hello, world! This is a modified jumbotron that occupies the entire horizontal space of its parent.

Comments
  • sometimes you need to add a class="w-100" or the <hr> will show as a dot. getbootstrap.com/docs/4.0/utilities/sizing
  • <div class="border-top my-3"></div> instead of span use div
  • This should be the accepted answer relative to the question.
  • I totally agree, this should be the accepted answer.