3.list groups & badges

• list group

<ul class="list-group mb-5">
    <li class="list-group-item">My List Item One</li>
    <li class="list-group-item">My List Item Two</li>
    <li class="list-group-item active">My List Item Three</li>
    <li class="list-group-item">My List Item Four</li>
    <li class="list-group-item">My List Item Five</li>
</ul>

• list group with links

<ul class="list-group mb-5">
    <a class="list-group-item" href="#">My List Item One</a>
    <a class="list-group-item" href="#">My List Item Two</a>
    <a class="list-group-item active" href="#">My List Item Three</a>
    <a class="list-group-item" href="#">My List Item Four</a>
    <a class="list-group-item" href="#">My List Item Five</a>
</ul>

• contextual classes

<ul class="list-group mb-5">
    <li class="list-group-item">Regular List Item</li>
    <li class="list-group-item list-group-item-primary">Primary List Item</li>
    <li class="list-group-item list-group-item-primary">Secondary List Item</li>
    <li class="list-group-item list-group-item-secondary">Success List Item</li>
    <li class="list-group-item list-group-item-info">Info List Item</li>
    <li class="list-group-item list-group-item-warning">Warning List Item</li>
    <li class="list-group-item list-group-item-danger">Danger List Item</li>
    <li class="list-group-item list-group-item-light">Light List Item</li>
    <li class="list-group-item list-group-item-dark">Dark List Item</li>
</ul>

• flush list group

<ul class="list-group list-group-flush mb-5">
    <li class="list-group-item">My List Item One</li>
    <li class="list-group-item active">My List Item Two</li>
    <li class="list-group-item">My List Item Three</li>
    <li class="list-group-item">My List Item Four</li>
    <li class="list-group-item">My List Item Five</li>
</ul>

• badge

<ul class="list-group">
    <li class="list-group-item justify-content-between align-items-center d-flex">My List Item One
        <span class="badge badge-primary">30</span>
    </li>
    <li class="list-group-item">My List Item Two</li>
    <li class="list-group-item">My List Item Three</li>
    <li class="list-group-item">My List Item Four</li>
    <li class="list-group-item">My List Item Five</li>
</ul>

• breadcrumb

<ol class="breadcrumb">
    <li class="brandcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
    <li class="breadcrumb-item">
        <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item active">Users</li>
</ol>
<ol class="breadcrumb">
    <li class="breadcrumb-item">
        <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item">
        <a href="#">Users</a>
    </li>
    <li class="breadcrumb-item active">Brad</li>
</ol>