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

# 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: 
• Plena
• Danza
• Bomba
 It only works if I put the class .list-inline-item on the actual list items individually, like this below, which seems superfluous: 
• Giraffes
• Elephants
• Donkeys
 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 
• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat
 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;} 
• test
• test
• test
• test

 You need to login account before you can post.
Processed in 0.298238 second(s) , Gzip On .