Bootstrap List Related Classes

Notes:

Bootstrap - List related classes:

list-unstyled : removes bullets, left padding etc.
<ul class="list-unstyled">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

list-group & list-group-item :
list-group: unstyles the list, converts list items in to flex items, places them in a column etc.
list-group-item: adds border, padding to list items etc.
<ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item">Item</li>
<li class="list-group-item">Item</li>
<li class="list-group-item">Item</li>
</ul>

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 list-group-item-action">Item</a>
<a href="#" class="list-group-item list-group-item-action">Item</a>
<a href="#" class="list-group-item list-group-item-action">Item</a>
</ul>

list-inline & list-inline-item :
list-inline: unstyles the list etc.
list-inline-item: converts list items to inline-block
<ul class="list-inline">
<li class="list-inline-item">Item</li>
<li class="list-inline-item">Item</li>
<li class="list-inline-item">Item</li>
<li class="list-inline-item">Item</li>
</ul>

<ul class="list-inline">
<a href="#" class="list-inline-item">Item</a>
<a href="#" class="list-inline-item">Item</a>
<a href="#" class="list-inline-item">Item</a>
<a href="#" class="list-inline-item">Item</a>
</ul>

List group item colors:
- used to set background color to list items

list-group-item-primary
list-group-item-secondary
list-group-item-success
list-group-item-info
list-group-item-warning
list-group-item-danger
list-group-item-light
list-group-item-dark

<ul class="list-group">
<li class="list-group-item list-group-item-primary">Item</li>
<li class="list-group-item list-group-item-secondary">Item</li>
<li class="list-group-item list-group-item-success">Item</li>
<li class="list-group-item list-group-item-warning">Item</li>
<li class="list-group-item list-group-item-info">Item</li>
<li class="list-group-item list-group-item-danger">Item</li>
<li class="list-group-item list-group-item-dark">Item</li>
<li class="list-group-item list-group-item-light">Item</li>
</ul>

Interview Questions: