Last Updated on February 12, 2025 by Roshan Parihar
Learn how to inline list elements in Bootstrap 5 and other versions. You can use the class .list-inline and .list-inline-item in Bootstrap 5.
Let’s find out with examples
Inline List in Bootstrap 5
To inline list elements in Bootstrap 5, you have to add the .list-inline class to the ul element. Also, add the .list-inline-item class to the li element as given below.
|
1 2 3 4 5 |
<ul class="list-inline"> <li class="list-inline-item">Home</li> <li class="list-inline-item">About</li> <li class="list-inline-item">Contact</li> </ul> |
Output
The above examples shows the inline lists content. You can click the button given above to see the live preview of the example.
Bootstrap 4 List Inline Class
If you want to make lists inline in Bootstrap 4, use the class .list-inline to ul and .list-inline-item class to the li element.
|
1 2 3 4 5 |
<ul class="list-inline"> <li class="list-inline-item">Home</li> <li class="list-inline-item">About</li> <li class="list-inline-item">Contact</li> </ul> |
Output
You can check the live preview to see the inline elements of lists.
Class In Bootstrap 3
Bootstrap 3 require only to add the class .list-inline to the ul element to make the inlined lists as given below.
|
1 2 3 4 5 |
<ul class="list-inline"> <li>Home</li> <li>About</li> <li>Contact</li> </ul> |
Output
Click the button given above to see the live preview of lists inlined.