MENU


List Group

A List Group is a component for displaying a series of content, such as text, links, buttons, checkboxes, radios, and possibly other types of custom content.

Use a .list-group-item-action class to indicate an actionable item.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

  <div class="list-group">
    <a href="#" aria-current="true" class="list-group-item list-group-item-action active">Cras justo odio</a>
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
    <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
  </div>

</body><html>
<ul class="list-group list-group-flush">(borderless)<li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge bg-primary rounded-pill">14</span> </li>
Items in a List Group can be stacked horizontally, switching to vertical stacking only if the viewport width is less than a designated breakpoint.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

  <ul class="list-group list-group-horizontal-sm">
    <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>
  </ul>

</body><html>
<ul class="list-group list-group-horizontal-sm">(>=576px)
Use contextual classes to style list items with a stateful background and color.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

  <ul class="list-group">
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-item-success">A simple success list group item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-item-info">A simple info list group item</li>
    <li class="list-group-item list-group-item-light">A simple light list group item</li>
    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
  </ul>

</body><html>
This activates the last item in the list group.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

     <div class="list-group" id="myTab" role="tablist">
        <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
        <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
        <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
        <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
     </div>
     <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">1</div>
        <div class="tab-pane" id="profile" role="tabpanel">2</div>
        <div class="tab-pane" id="messages" role="tabpanel">3</div>
        <div class="tab-pane" id="settings" role="tabpanel">4</div>
     </div>
     <script>
        var firstTabEl = document.querySelector('#myTab a:last-child');
        var lastTab = new bootstrap.Tab(firstTabEl);
        lastTab.show();
     </script>

</body><html>
// Attaching a click event handler to every item. var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a')); triggerTabList.forEach(function (triggerEl) { var tabTrigger = new bootstrap.Tab(triggerEl); triggerEl.addEventListener('click', function (e) { e.preventDefault(); tabTrigger.show(); }); });// activating a tab var triggerEl = document.querySelector('#myTab a[href="#profile"]'); bootstrap.Tab.getInstance(triggerEl).show(); // activating a tab var triggerFirstTabEl = document.querySelector('#myTab li:first-child a'); bootstrap.Tab.getInstance(triggerFirstTabEl).show();// activating a tabvar someListItemEl = document.querySelector('#someListItem');var tab = new bootstrap.Tab(someListItemEl);tab.show();//tab.dispose();// handling the shown event var tabEl =document.querySelector('a[data-toggle="list"]'); tabEl.addEventListener('shown.bs.tab', function (e) { // e.target; // newly activated tab // e.relatedTarget; // previous active tab }); Other events:
   show.bs.tab
   hide.bs.tab
   hiddeb.bs.tab

To make tabs panel fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.