You can style list types using the predefined Bootstrap list classes. Remove bullets and numbers from list items or make them inline and side by side using Bootstrap list classes.
There are three types of lists, unordered list, ordered list and description list. See the below examples to learn each list type in Bootstrap.
Unstyled List in Bootstrap
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.
|
1 2 3 4 5 6 7 8 |
<ul class="list-unstyled"> <li>Home</li> <li>About</li> <li>Contact</li> <li>Privacy Policy</li> <li>Terms & Conditions</li> <li>Disclaimer</li> </ul> |
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.
Inline List in Bootstrap
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.
|
1 2 3 4 5 6 7 |
<ul class="list-inline"> <li>Home</li> <li>About Us </li> <li>Contact Us</li> <li>Interview Questions</li> <li>Training</li> </ul> |
Output
- Home
- About Us
- Contact Us
- Interview Questions
- Training
Create Horizontal Definition Lists in Bootstrap
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.
|
1 2 3 4 5 6 7 8 |
<dl class="dl-horizontal"> <dt>PHP</dt> <dd>PHP is a scripting language.</dd> <dt>Bootstrap</dt> <dd>It is a powerful mobile first responsive platform.</dd> <dt>CSS</dt> <dd>It is a cascaded style sheet to style an HTML element.</dd> </dl> |
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.