Home Confused by Bootstrap 4 .list-inline class vs. .list-inline-item class
Reply: 2

Confused by Bootstrap 4 .list-inline class vs. .list-inline-item class

user2998925
1#
user2998925 Published in 2018-01-12 20:59:51Z

I'm using Bootstrap 4 inside Wordpress. For some reason, I cannot get lists items to display inline (horizontally) using only the class .list-inline on the list, like this:

<ul id="dances" class="list-unstyled list-inline">
    <li>Plena</li>
    <li>Danza</li>
    <li>Bomba</li>
</ul>

It only works if I put the class .list-inline-item on the actual list items individually, like this below, which seems superfluous:

<ul id="animals" class="list-unstyled">
    <li class="list-inline-item">Giraffes</li>
    <li class="list-inline-item">Elephants</li>
    <li class="list-inline-item">Donkeys</li>
</ul>

I'm new to Bootstrap, and I can't recall where I found the class .list-inline-item, because I can't find it in the Bootstrap 4 class list anywhere. For example on this cheatsheet.

Here is my fiddle so you can better see it in action.

(Please view the fiddle in a wide browser.)

Notice how the "Animals" list in the yellow displays horizontally, but the "Dances" in the pink do not. Why is this?

Vipul Singh
2#
Vipul Singh Reply to 2018-01-12 21:30:40Z

Bootstrap 4

To display inline list : http://v4-alpha.getbootstrap.com/content/typography/#inline

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

As mentioned here : https://getbootstrap.com/docs/3.3/css/#inline, you'll have to use display: inline-block; to make the list inline. (Bootstrap example for list-inline is using type.less which provides each li element display: inline-block;).

Ali Sheikhpour
3#
Ali Sheikhpour Reply to 2018-01-12 21:15:56Z

Besides of how Bootstrap works, if you don't want to put list-inline-item individually on each item, you can define the parent style to act as you want:

.list-inline{text-align:center}
.list-inline li{display:inline-block;margin:5px;}
<ul class="list-inline">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.298238 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO