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

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

user1284
1#
user1284 Published in June 21, 2018, 8:42 am

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?

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO