list group bootstrap code example
Example 1: bootstrap list group
<!-- Bootstrap 5 List-group -->
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<!-- With badges -->
<ul class="list-group">
<li
class="list-group-item d-flex justify-content-between align-items-center"
>
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center"
>
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center"
>
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
Example 2: bootstrap ul no style
<ul class="list-unstyled">
<li>...</li>
</ul>
Example 3: horizontal list group bootstrap
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
Example 4: list group bootstrap
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Example 5: list hover bootstrap
...
<div class="collapse navbar-collapse" data-hover="dropdown" data-animations="fadeInDown fadeInRight fadeInUp fadeInLeft>
<ul class="nav navbar-nav">
...
</ul>
</div>
...
or
...
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" data-hover="dropdown" data-animations="fadeInDown fadeInRight fadeInUp fadeInLeft>
...
</ul>
</div>
...