Menu
Placing Ordered and Unordered List Items Inline. If you want to create a horizontal menu using the ordered or unordered list you need to place all list items in a single line (i.e. side by side). You can do this simply by adding the class . list-inline to the <ul> or <ol> , and the class .
If you want the list items to display horizontally instead of vertically (side by side instead of on top of each other), add the . list-group-horizontal class to .
The display property classes of bootstrap help to directly set the CSS display property for an element. The available classes are: .d-block: This class when used with an element, sets it display property to block. Using this class with an element is equivalent to the below styling: style = "display: block;"
Hiding elementsTo hide elements simply use the . d-none class or one of the . d-{sm,md,lg,xl}-none classes for any responsive screen variation. To show an element only on a given interval of screen sizes you can combine one .
Bootstrap 2.3.2
<ul class="inline">
<li>...</li>
</ul>
Bootstrap 3
<ul class="list-inline">
<li>...</li>
</ul>
Bootstrap 4
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
source: http://v4-alpha.getbootstrap.com/content/typography/#inline
Updated link https://getbootstrap.com/docs/4.4/content/typography/#inline
According to Bootstrap documentation of 2.3.2 and 3, the class should be defined like this:
Bootstrap 2.3.2
<ul class="inline">
<li>...</li>
</ul>
Bootstrap 3
<ul class="list-inline">
<li>...</li>
</ul>
While TheBrent's answer is true in general, it does not answer the question of how to do it in the official bootstrap way. The markup for bootstrap is simple:
<ul class="inline">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Source
http://jsfiddle.net/MgcDU/4602/
To complete Raymond's answer
Bootstrap 2.3.2
<ul class="inline">
<li>...</li>
</ul>
Bootstrap 3
<ul class="list-inline">
<li>...</li>
</ul>
Bootstrap 4
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
source: http://v4-alpha.getbootstrap.com/content/typography/#inline
I couldn't find anything specific within the bootstrap.css file. So, I added the css to a custom css file.
.inline li {
display: inline;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With