#### List Media

#### Bootstrap List Media

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

      <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>

#### Linked Items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

      <div class="list-group">
        <a href="javascript:void(0)" class="list-group-item active">Cras justo odio</a>
        <a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in</a>
        <a href="javascript:void(0)" class="list-group-item">Morbi leo risus</a>
        <a href="javascript:void(0)" class="list-group-item">Porta ac consectetur ac</a>
        <a href="javascript:void(0)" class="list-group-item">Vestibulum at eros</a>
      </div>

#### With Badges

- Cras justo odio 6
- Dapibus ac facilisis in
- Morbi leo risus 3
- Porta ac consectetur ac 10
- Vestibulum at eros

      <ul class="list-group list-group-full">
          <li class="list-group-item d-flex"> Cras justo odio <span class="badge d-flex align-items-center bg-info ms-auto">6</span> </li>
          <li class="list-group-item d-flex"> Dapibus ac facilisis in </li>
          <li class="list-group-item d-flex"> Morbi leo risus <span class="badge d-flex align-items-center bg-danger ms-auto">3</span> </li>
          <li class="list-group-item d-flex active"> Porta ac consectetur ac <span class="badge d-flex align-items-center bg-success ms-auto">10</span> </li>
          <li class="list-group-item">Vestibulum at eros</li>
      </ul>

#### Tabs JavaScript behavior

Home Profile Messages

      <div class="row">
          <div class="col-4">
              <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> </div>
          </div>
          <div class="col-8">
              <div class="tab-content" id="nav-tabContent">
                  <div class="tab-pane fade show active text-justify" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. </div>
                  <div class="tab-pane fade text-justify" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"> Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. </div>
                  <div class="tab-pane fade text-justify" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"> Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. </div>
              </div>
          </div>
      </div>