Bootstrap List-style

Learn different types of list-style classes in bootstrap. We use unordered list <UL> or ordered list <OL> to create a list and use <li> tag to create list value. So bootstrap has separate classes for <ul>/<ol> tag and separate classes for <li> tag let’s find them

Types of List classes

List unstyled:

It removes bullets, left padding, etc.

Ex:

<ul class="list-unstyled">
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li> </ul>

Output:

list-group & list-group-item :

• list-group: unstyled the list, converts list items into flex items, places them in a column, etc.
• list-group-item: adds border, padding list items, etc.

<ul class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
<li class="list-group-item">Item4</li> </ul>

Output:

list-group, list-group-item & list-group-item-action

list-group-item-action: removes styles from anchors

<ul class="list-group">
<a href="#" class="list-group-item-action">Item1</a>
<a href="#" class="list-group-item-action">Item2</a>
<a href="#" class="list-group-item-action">Item3</a> </ul>

Output:

list-inline & list-inline-item :

• list-inline: unstyled the list etc.
• list-inline-item: converts list items to inline-block

<ul class="list-inline">
<li class="list-inline-item">Item1</li>
<li class="list-inline-item">Item2</li>
<li class="list-inline-item">Item3</li>
</ul>

Output:

I hope you find this guide useful and keep learning to code!