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

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