<h3>Obična lista</h3> <ul> <li>Obična stavka 1</li> <li>Obična stavka 2</li> </ul> <h3>Nestilizirana lista</h3> <ul class="list-unstyled"> <li>Nestilizirana stavka 1</li> <li>Nestilizirana stavka 2</li> </ul> <h3>Inline lista</h3> <ul class="list-inline"> <li class="list-inline-item">Stavka 1</li> <li class="list-inline-item">Stavka 2</li> <li class="list-inline-item">Stavka 3</li> <li class="list-inline-item">Stavka 4</li> <li class="list-inline-item">Stavka 5</li> <li class="list-inline-item">Stavka 6</li> <li class="list-inline-item">Stavka 7</li> </ul> <h3>Opisna lista</h3> <dl> <dt>Termin 1</dt> <dd>Opis termina 1.</dd> <dt>Termin 2</dt> <dd>Opis termina 2.</dd> </dl> <h3>Liste s kontekstualnim bojama</h3> <ul class="list-group"> <li class="list-group-item list-group-item-primary">Primarna stavka</li> <li class="list-group-item list-group-item-secondary">Sekundarna stavka</li> <li class="list-group-item list-group-item-success">Uspješna stavka</li> <li class="list-group-item list-group-item-danger">Opasna stavka</li> <li class="list-group-item list-group-item-warning">Upozoravajuća stavka</li> <li class="list-group-item list-group-item-info">Informativna stavka</li> <li class="list-group-item list-group-item-light">Svijetla stavka</li> <li class="list-group-item list-group-item-dark">Tamna stavka</li> </ul> <h3>Aktivna i onemogućena stavka</h3> <ul class="list-group"> <li class="list-group-item active">Aktivna stavka</li> <li class="list-group-item disabled">Onemogućena stavka</li> <li class="list-group-item">Obična stavka</li> </ul> <h3>Liste s linkovima</h3> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active">Aktivni link</a> <a href="#" class="list-group-item list-group-item-action">Link</a> <a href="#" class="list-group-item list-group-item-action disabled">Onemogućeni link</a> </div> <h3>Lista s badgeom</h3> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Poruke <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Obavijesti <span class="badge bg-danger rounded-pill">3</span> </li> </ul> <h3>Kombinacija: Aktivna stavka s primarnom bojom</h3> <ul class="list-group"> <li class="list-group-item list-group-item-primary active">Aktivna primarna stavka</li> </ul> <h3>Kombinacija: Stavka s badgeom i sekundarnom bojom</h3> <ul class="list-group"> <li class="list-group-item list-group-item-secondary d-flex justify-content-between align-items-center"> Zadaci <span class="badge bg-warning rounded-pill">https://www.instagram.com/dariabezm/</span> </li> </ul>