How to display a list inline using Twitter s Bootstrap

Question

I want to display a list inline using Bootstrap   Is there a class I can add from Bootstrap to achieve this

User · Answer

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

User · Answer

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    lt ul class  inline  gt     lt li gt 1 lt  li gt     lt li gt 2 lt  li gt     lt li gt 3 lt  li gt   lt  ul gt    Source   http   jsfiddle net MgcDU 4602

User · Answer

Bootstrap 2 3 2   lt ul class  inline  gt     lt li gt     lt  li gt   lt  ul gt    Bootstrap 3   lt ul class  list-inline  gt     lt li gt     lt  li gt   lt  ul gt    Bootstrap 4    lt ul class  list-inline  gt     lt li class  list-inline-item  gt Lorem ipsum lt  li gt     lt li class  list-inline-item  gt Phasellus iaculis lt  li gt     lt li class  list-inline-item  gt Nulla volutpat lt  li gt   lt  ul gt    source  http   v4-alpha getbootstrap com content typography  inline  Updated link https   getbootstrap com docs 4 4 content typography  inline

User · Answer

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

User · Answer

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

User · Answer

I Amazed  list-inline wasn t working in bootstrap 4 then finally i got it in bootstrap 4 documentation   Bootstrap 3 and 4   lt ul class  list-inline  gt     lt li class  list-inline-item  gt Lorem ipsum lt  li gt     lt li class  list-inline-item  gt Phasellus iaculis lt  li gt     lt li class  list-inline-item  gt Nulla volutpat lt  li gt   lt  ul gt    Source  http   v4-alpha getbootstrap com content typography  inline

User · Answer

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   lt ul class  unstyled inline  style  display inline  gt    NB   Add to stylesheet

User · Answer

To complete Raymond s answer  Bootstrap 2 3 2   lt ul class  inline  gt     lt li gt     lt  li gt   lt  ul gt    Bootstrap 3   lt ul class  list-inline  gt     lt li gt     lt  li gt   lt  ul gt    Bootstrap 4    lt ul class  list-inline  gt     lt li class  list-inline-item  gt Lorem ipsum lt  li gt     lt li class  list-inline-item  gt Phasellus iaculis lt  li gt     lt li class  list-inline-item  gt Nulla volutpat lt  li gt   lt  ul gt    source  http   v4-alpha getbootstrap com content typography  inline

User · Answer

According to Bootstrap documentation of 2 3 2 and 3  the class should be defined like this   Bootstrap 2 3 2   lt ul class  inline  gt     lt li gt     lt  li gt   lt  ul gt    Bootstrap 3   lt ul class  list-inline  gt     lt li gt     lt  li gt   lt  ul gt

[twitter-bootstrap] How to display a list inline using Twitter's Bootstrap

Examples related to twitter-bootstrap