I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below:
<ul id="dances" class="list-unstyled list-inline">
<li>Plena</li>
<li>Danza</li>
<li>Bomba</li>
</ul>
The desired effect is only achieved when adding the class .list-inline-item to each individual list item, like the example provided below. However, this method appears redundant:
<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>
Being a newcomer to Bootstrap, I can't seem to recall where I stumbled upon the .list-inline-item class, as it doesn't seem to be listed in the official Bootstrap 4 documentation or in resources such as this cheatsheet.
For a clearer demonstration of the issue, you can access my corresponding fiddle.
(Please ensure your browser window is wide enough to view the fiddle properly.)
Observe how the "Animals" list displayed in yellow shows horizontally, while the "Dances" list in pink does not exhibit the same behavior. Any insights into why this disparity exists would be greatly appreciated.