Bootstrap List

You can style list types using the predefined Bootstrap list classes. There are three types of lists, unordered list, ordered list and description list.

Remove bullets and numbers from list items or make them inline and side by side using Bootstrap list classes. Learn below a description of each list type and see the examples.

Unstyled Ordered and Unordered lists Using Bootstrap List Classes

An unordered list and an ordered list creates a list with numbers and bullets for the elements. You can remove these bullets and numbers from all the elements by using the Bootstrap class .list-unstyled.

See the example given below to check the style applied using this Bootstrap class.

Test it Live


  • Home
  • About
  • Contact
  • Privacy Policy
  • Terms & Conditions
  • Disclaimer

The above example gives you output as the list of elements without any bullets. You can apply this class to both ordered and unordered list elements to remove the bullets and numbers and create an unstyled type list items.

Display Inline Using Bootstrap List Classes

If you want to create horizontal side-by-side list items, you can use bootstrap list class .list-inline. This class makes all the elements of list to display inline-block. It also adds a padding of about 5px to each list items.

You can also use this list as a navigational menu of your website if you don’t need one level or two level menu items.

See the below example to check horizontal list items.

Test it Live


  • Home
  • About Us
  • Contact Us
  • Interview Questions
  • Training

Create Horizontal Definition Lists Using Bootstrap List Classes

A description list is a list that contains the data term and data description using <dt> and <dd> tag. You can make horizontal definition list using the Bootstrap class .dl-horizontal.

The Bootstrap list class makes the data term and data description to align side by side with left-aligned.

Check the below example to get the horizontal definition list.

Test it Live


PHP is a scripting language.
It is a powerful mobile first responsive platform.
It is a cascaded style sheet to style an HTML element.

Getbootstrap 4 List
Getbootstrap 3 List

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Download Link Will be Send to Your Email id