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 description of each list types 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.

Output

  • 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.

Output

  • 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.

Output

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

Reference
Getbootstrap 4 List
Getbootstrap 3 List

Leave a Reply

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