Menu
I migrated a site from Bootstrap 4 alpha 6 to Bootstrap 4 Beta 1.
<ul class="nav navbar-nav list-inline"> <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">FB</a></li> <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">G+</a></li> <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">T</li> </ul> Now, the items align vertically instead of horizontally. How do I create an inline list with the Bootstrap 4 beta?
776
Placing Ordered and Unordered List Items Inline. If you want to create a horizontal menu using the ordered or unordered list you need to place all list items in a single line (i.e. side by side). You can do this simply by adding the class . list-inline to the <ul> or <ol> , and the class .
If you want the list items to display horizontally instead of vertically (side by side instead of on top of each other), add the . list-group-horizontal class to . list-group : First item.
list-group and . list-group-item classes to create a list of items. The . list-group class is used with <ul> element and .
The display property in Bootstrap is used to set an element's display property. The utilities such as block, inline etc are to set the element's display property. The display property classes of bootstrap help to directly set the CSS display property for an element.
Bootstrap4
Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.
<ul class="list-inline"> <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">FB</a></li> <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">G+</a></li> <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">T</a></li> </ul> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
