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!