In bootstrap, we have a different type of classes, such as .list-unstyled
, .list-inline
, etc. to style HTML lists. In HTML, we can create three types of lists: ordered, unordered, and description lists.
Using bootstrap classes, we can change the default style of lists (ordered, unordered, and description) based on our requirements.
By using the bootstrap .list-unstyled
class, we can remove the default list style and left margin on list items. The bootstrap .list-unstyled
class can remove the default list style and left margin only from the list items, which are immediate children of the ordered (<ol>
) and unordered (<ul>
) list items. If you want to remove the default style of nested lists, you need to add .list-unstyled
class on nested lists also.
Following is the example of removing the default list style from ordered and unordered list items in bootstrap.
If you observe the above example, we applied .list-unstyled
class on an unordered list to remove the default list-style of immediate child list items.
The above example will return the result as shown below.
If you observe the above result the .list-unstyled
class has removed the default list-style of immediate child list items, the nested list still having default style because we didn’t apply .list-unstyled
class on it.
In bootstrap, by using list inline classes (.list-inline
, .list-inline-item
) we can remove the list’s bullets and show the list items in the same line with some light margin.
The above example will return the result as shown below.
By default, the HTML description lists will show the item terms with bold text and description text below of it like as shown below.
In bootstrap, we can align HTML description list items (terms and description) horizontally (side-by-side) by using the grid system’s predefined classes like as shown below.
If you observe the above example, we used grid system predefined classes to show the description list items horizontally. Here, we used .text-truncate
class to truncate the longer text with an ellipsis, and it’s optional.
The above example will return the result as shown below.
This is how we can show the description list details horizontally by using grid system predefined classes based on our requirements.