Bootstrap 3 Horizontal Divider (not in a dropdown)

Twitter BootstrapTwitter Bootstrap-3

Twitter Bootstrap Problem Overview


I know Bootstrap 3 has a horizontal divider you can place inside of dropdown menus to separate links like this:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
   ...
  <li role="presentation" class="divider"></li>
</ul>

My question is: Is there any way to do this without it being in a dropdown, such as putting it into any kind of list or similar menu?

Twitter Bootstrap Solutions


Solution 1 - Twitter Bootstrap

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.

Solution 2 - Twitter Bootstrap

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;
}

Solution 3 - Twitter Bootstrap

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%;
 }

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser4158347View Question on Stackoverflow
Solution 1 - Twitter Bootstrapuser3931708View Answer on Stackoverflow
Solution 2 - Twitter BootstrapChristinaView Answer on Stackoverflow
Solution 3 - Twitter BootstrapDavid MetcalfeView Answer on Stackoverflow