How to display a list inline using Twitter's Bootstrap
Twitter BootstrapTwitter Bootstrap Problem Overview
I want to display a list inline using Bootstrap. Is there a class I can add from Bootstrap to achieve this?
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
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
Solution 2 - Twitter Bootstrap
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>
Solution 3 - Twitter Bootstrap
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>
Solution 4 - Twitter Bootstrap
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
Solution 5 - Twitter Bootstrap
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;
}
Solution 6 - Twitter Bootstrap
I Amazed, list-inline wasn't working in bootstrap 4 then finally i got it in bootstrap 4 documentation.
Bootstrap 3 and 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
Solution 7 - Twitter Bootstrap
This solution works using Bootstrap v2, however in TBS3 the class INLINE. I haven't figured out what is the equivalent class (if there is one) in TBS3.
This gentleman had a pretty good article of the differences between v2 and v3.
<http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/>
EDIT - use CSS to target the li elements to solve your problem as below
{ display: inline-block; }
In my situation I was targeting the UL, instead of the LI
nav ul li { display: inline-block; }
Solution 8 - Twitter Bootstrap
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Solution 9 - Twitter Bootstrap
Inline is not actually the inline we maybe require - i.e. display:inline
Bootstrap inline as far as I observer is more of a horizontal orientation
To display the list inline with other elements then we do need
display: inline; added to the UL
<ul class="unstyled inline" style="display:inline">
NB// Add to stylesheet
Solution 10 - Twitter Bootstrap
According to the Bootstrap documentation, you need to add the class 'inline' to your list; like this:
<ul class="inline">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
However, this does not work as there seems to be some CSS missing in the Bootstrap CSS file referring to the class 'inline'. So additionally, add the following lines to your CSS file to make it work:
ul.inline > li, ol.inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}