1<ul class="list-group list-group-horizontal">
2 <li class="list-group-item">Cras justo odio</li>
3 <li class="list-group-item">Dapibus ac facilisis in</li>
4 <li class="list-group-item">Morbi leo risus</li>
5</ul>
1<ul class="list-group list-group-flush">
2 <li class="list-group-item">Cras justo odio</li>
3 <li class="list-group-item">Dapibus ac facilisis in</li>
4 <li class="list-group-item">Morbi leo risus</li>
5 <li class="list-group-item">Porta ac consectetur ac</li>
6 <li class="list-group-item">Vestibulum at eros</li>
7</ul>
1<!-- Bootstrap 5 List-group -->
2<ul class="list-group">
3 <li class="list-group-item active" aria-current="true">An active item</li>
4 <li class="list-group-item">A second item</li>
5 <li class="list-group-item">A third item</li>
6 <li class="list-group-item">A fourth item</li>
7 <li class="list-group-item">And a fifth one</li>
8</ul>
9
10<!-- With badges -->
11<ul class="list-group">
12 <li
13 class="list-group-item d-flex justify-content-between align-items-center"
14 >
15 A list item
16 <span class="badge bg-primary rounded-pill">14</span>
17 </li>
18 <li
19 class="list-group-item d-flex justify-content-between align-items-center"
20 >
21 A second list item
22 <span class="badge bg-primary rounded-pill">2</span>
23 </li>
24 <li
25 class="list-group-item d-flex justify-content-between align-items-center"
26 >
27 A third list item
28 <span class="badge bg-primary rounded-pill">1</span>
29 </li>
30</ul>
1...
2<div class="collapse navbar-collapse" data-hover="dropdown" data-animations="fadeInDown fadeInRight fadeInUp fadeInLeft>
3 <ul class="nav navbar-nav">
4 ...
5 </ul>
6</div>
7...
8or
9...
10<div class="collapse navbar-collapse">
11 <ul class="nav navbar-nav" data-hover="dropdown" data-animations="fadeInDown fadeInRight fadeInUp fadeInLeft>
12 ...
13 </ul>
14</div>
15...
16