Bootstrap 3 Horizontal Divider (not in a dropdown)
Yes there is, you can simply put <hr>
in your code where you want it, I already use it in one of my admin panel side bar.
Currently it only works for the .dropdown-menu
:
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
If you want it for other use, in your own css, following the bootstrap.css create another one:
.divider {
height: 1px;
width:100%;
display:block; /* for use on default inline elements like span */
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
As I found the default Bootstrap <hr/>
size unsightly, here's some simple HTML and CSS to balance out the element visually:
HTML:
<hr class="half-rule"/>
CSS:
.half-rule {
margin-left: 0;
text-align: left;
width: 50%;
}