Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
DefaultActive itemDisabled itemLinksButtonsFlushNumberedHorizontalEqual-width list group itemContextual color classesBadgesCustom contentChecks and radiosTab panels

List group

Default

  • List group item one
  • List group item two
  • List group item three
<ul class="list-group">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item">List group item two</li>
  <li class="list-group-item">List group item three</li>
</ul>
<ul class="list-group"> <li class="list-group-item">List group item one</li> <li class="list-group-item">List group item two</li> <li class="list-group-item">List group item three</li> </ul>

Active item

  • List group item one
  • List group item two
  • List group item three
<ul class="list-group">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item active" aria-current="true">List group item two</li>
  <li class="list-group-item">List group item three</li>
</ul>
<ul class="list-group"> <li class="list-group-item">List group item one</li> <li class="list-group-item active" aria-current="true">List group item two</li> <li class="list-group-item">List group item three</li> </ul>

Disabled item

  • List group item one
  • List group item two
  • List group item three
<ul class="list-group">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item">List group item two</li>
  <li class="list-group-item disabled" aria-disabled="true">List group item three</li>
</ul>
<ul class="list-group"> <li class="list-group-item">List group item one</li> <li class="list-group-item">List group item two</li> <li class="list-group-item disabled" aria-disabled="true">List group item three</li> </ul>

Links

List group item one List group item two List group item three 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">List group item one</a>
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">List group item two</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">List group item three</a>
</div>
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">List group item one</a> <a href="#" class="list-group-item list-group-item-action active" aria-current="true">List group item two</a> <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">List group item three</a> </div>

Buttons

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action">List group item one</button>
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">List group item two</button>
  <button type="button" class="list-group-item list-group-item-action" disabled="">List group item three</button>
</div>
<div class="list-group"> <button type="button" class="list-group-item list-group-item-action">List group item one</button> <button type="button" class="list-group-item list-group-item-action active" aria-current="true">List group item two</button> <button type="button" class="list-group-item list-group-item-action" disabled="">List group item three</button> </div>

Flush

  • List group item one
  • List group item two
  • List group item three
<ul class="list-group list-group-flush">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item">List group item two</li>
  <li class="list-group-item">List group item three</li>
</ul>
<ul class="list-group list-group-flush"> <li class="list-group-item">List group item one</li> <li class="list-group-item">List group item two</li> <li class="list-group-item">List group item three</li> </ul>

Numbered

  1. List group item one
  2. List group item two
  3. List group item three
<ol class="list-group list-group-numbered">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item">List group item two</li>
  <li class="list-group-item">List group item three</li>
</ol>
<ol class="list-group list-group-numbered"> <li class="list-group-item">List group item one</li> <li class="list-group-item">List group item two</li> <li class="list-group-item">List group item three</li> </ol>

Horizontal

All breakpoints

  • List group item one
  • List group item two
  • List group item three

Small and up

  • List group item one
  • List group item two
  • List group item three

Medium and up

  • List group item one
  • List group item two
  • List group item three

Large and up

  • List group item one
  • List group item two
  • List group item three

Extra large and up

  • List group item one
  • List group item two
  • List group item three
<h4 class="h5 text-muted mt-3">All breakpoints</h4>
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item">List group item two</li>
  <li class="list-group-item">List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">Small and up</h4>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item">List group item two</li>
  <li class="list-group-item">List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">Medium and up</h4>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item">List group item two</li>
  <li class="list-group-item">List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">Large and up</h4>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item">List group item two</li>
  <li class="list-group-item">List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">Extra large and up</h4>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">List group item one</li>
  <li class="list-group-item">List group item two</li>
  <li class="list-group-item">List group item three</li>
</ul>
<h4 class="h5 text-muted mt-3">All breakpoints</h4> <ul class="list-group list-group-horizontal"> <li class="list-group-item">List group item one</li> <li class="list-group-item">List group item two</li> <li class="list-group-item">List group item three</li> </ul> <h4 class="h5 text-muted mt-3">Small and up</h4> <ul class="list-group list-group-horizontal-sm"> <li class="list-group-item">List group item one</li> <li class="list-group-item">List group item two</li> <li class="list-group-item">List group item three</li> </ul> <h4 class="h5 text-muted mt-3">Medium and up</h4> <ul class="list-group list-group-horizontal-md"> <li class="list-group-item">List group item one</li> <li class="list-group-item">List group item two</li> <li class="list-group-item">List group item three</li> </ul> <h4 class="h5 text-muted mt-3">Large and up</h4> <ul class="list-group list-group-horizontal-lg"> <li class="list-group-item">List group item one</li> <li class="list-group-item">List group item two</li> <li class="list-group-item">List group item three</li> </ul> <h4 class="h5 text-muted mt-3">Extra large and up</h4> <ul class="list-group list-group-horizontal-xl"> <li class="list-group-item">List group item one</li> <li class="list-group-item">List group item two</li> <li class="list-group-item">List group item three</li> </ul>

Equal-width list group item

  • List group item one
  • List group item two
  • List group item three
<ul class="list-group list-group-horizontal">
  <li class="list-group-item flex-fill">List group item one</li>
  <li class="list-group-item flex-fill">List group item two</li>
  <li class="list-group-item flex-fill">List group item three</li>
</ul>
<ul class="list-group list-group-horizontal"> <li class="list-group-item flex-fill">List group item one</li> <li class="list-group-item flex-fill">List group item two</li> <li class="list-group-item flex-fill">List group item three</li> </ul>

Contextual color classes

Normal list group

  • Default list group item
  • Primary list group item
  • Secondary list group item
  • Succcess list group item
  • Danger list group item
  • Warning list group item
  • Info list group item
  • Light list group item
  • Dark list group item

List group with links

Default list group item Primary list group item Secondary list group item Success list group item Danger list group item Warning list group item Info list group item Light list group item Dark list group item 
<h4 class="h5 text-muted mt-3">Normal list group</h4>
<ul class="list-group">
  <li class="list-group-item">Default list group item</li>
  <li class="list-group-item list-group-item-primary">Primary list group item</li>
  <li class="list-group-item list-group-item-secondary">Secondary list group item</li>
  <li class="list-group-item list-group-item-success">Succcess list group item</li>
  <li class="list-group-item list-group-item-danger">Danger list group item</li>
  <li class="list-group-item list-group-item-warning">Warning list group item</li>
  <li class="list-group-item list-group-item-info">Info list group item</li>
  <li class="list-group-item list-group-item-light">Light list group item</li>
  <li class="list-group-item list-group-item-dark">Dark list group item</li>
</ul>
<h4 class="h5 text-muted mt-3">List group with links</h4>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Default list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark list group item</a>
</div>
<h4 class="h5 text-muted mt-3">Normal list group</h4> <ul class="list-group"> <li class="list-group-item">Default list group item</li> <li class="list-group-item list-group-item-primary">Primary list group item</li> <li class="list-group-item list-group-item-secondary">Secondary list group item</li> <li class="list-group-item list-group-item-success">Succcess list group item</li> <li class="list-group-item list-group-item-danger">Danger list group item</li> <li class="list-group-item list-group-item-warning">Warning list group item</li> <li class="list-group-item list-group-item-info">Info list group item</li> <li class="list-group-item list-group-item-light">Light list group item</li> <li class="list-group-item list-group-item-dark">Dark list group item</li> </ul> <h4 class="h5 text-muted mt-3">List group with links</h4> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Default list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark list group item</a> </div>

Badges

  • List group item one #
  • List group item two ##
  • List group item three ### 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    List group item one
    <span class="badge rounded-pill bg-primary">#</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    List group item two
    <span class="badge rounded-pill bg-primary">##</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    List group item three
    <span class="badge rounded-pill bg-primary">###</span>
  </li>
</ul>
<ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> List group item one <span class="badge rounded-pill bg-primary">#</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> List group item two <span class="badge rounded-pill bg-primary">##</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> List group item three <span class="badge rounded-pill bg-primary">###</span> </li> </ul>

Custom content

Active item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Etiam eleifend velit leo.

Normal item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Etiam eleifend velit leo.

Disabled item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Etiam eleifend velit leo. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <h4>Active item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <small>Etiam eleifend velit leo.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <h4>Normal item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <small>Etiam eleifend velit leo.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action disabled">
    <h4>Disabled item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
    <small>Etiam eleifend velit leo.</small>
  </a>
</div>
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> <h4>Active item</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> <small>Etiam eleifend velit leo.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <h4>Normal item</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> <small>Etiam eleifend velit leo.</small> </a> <a href="#" class="list-group-item list-group-item-action disabled"> <h4>Disabled item</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p> <small>Etiam eleifend velit leo.</small> </a> </div>

Checks and radios

Checks

Radios

<h4 class="h5 text-muted mt-3">Checks</h4>
<div class="list-group">
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" id="checkbox1">
    Checkbox 1
  </label>
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" id="checkbox2">
    Checkbox 2
  </label>
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" id="checkbox3">
    Checkbox 3
  </label>
</div>
<h4 class="h5 text-muted mt-3">Radios</h4>
<div class="list-group">
  <label class="list-group-item">
    <input type="radio" class="form-check-input me-1" id="radio1" name="radio">
    Radio 1
  </label>
  <label class="list-group-item">
    <input type="radio" class="form-check-input me-1" id="radio2" name="radio">
    Radio 2
  </label>
  <label class="list-group-item">
    <input type="radio" class="form-check-input me-1" id="radio3" name="radio">
    Radio 3
  </label>
</div>
<h4 class="h5 text-muted mt-3">Checks</h4> <div class="list-group"> <label class="list-group-item"> <input type="checkbox" class="form-check-input me-1" id="checkbox1"> Checkbox 1 </label> <label class="list-group-item"> <input type="checkbox" class="form-check-input me-1" id="checkbox2"> Checkbox 2 </label> <label class="list-group-item"> <input type="checkbox" class="form-check-input me-1" id="checkbox3"> Checkbox 3 </label> </div> <h4 class="h5 text-muted mt-3">Radios</h4> <div class="list-group"> <label class="list-group-item"> <input type="radio" class="form-check-input me-1" id="radio1" name="radio"> Radio 1 </label> <label class="list-group-item"> <input type="radio" class="form-check-input me-1" id="radio2" name="radio"> Radio 2 </label> <label class="list-group-item"> <input type="radio" class="form-check-input me-1" id="radio3" name="radio"> Radio 3 </label> </div>

Tab panels

Tab pane 1 Tab pane 2 Tab pane 3
Tab pane 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
Tab pane 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
Tab pane 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
<div class="row">
  <div class="col-4">
    <div class="list-group" role="tablist">
      <a href="#tab-pane-1" id="tab-1" class="list-group-item list-group-item-action active" data-bs-toggle="list" role="tab" aria-controls="tab-pane-1">Tab pane 1</a>
      <a href="#tab-pane-2" id="tab-2" class="list-group-item list-group-item-action" data-bs-toggle="list" role="tab" aria-controls="tab-pane-2">Tab pane 2</a>
      <a href="#tab-pane-3" id="tab-3" class="list-group-item list-group-item-action" data-bs-toggle="list" role="tab" aria-controls="tab-pane-3">Tab pane 3</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content">
      <div id="tab-pane-1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab-1">Tab pane 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div>
      <div id="tab-pane-2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab-2">Tab pane 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div>
      <div id="tab-pane-3" class="tab-pane fade" role="tabpanel" aria-labelledby="tab-3">Tab pane 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div>
    </div>
  </div>
</div>
<div class="row"> <div class="col-4"> <div class="list-group" role="tablist"> <a href="#tab-pane-1" id="tab-1" class="list-group-item list-group-item-action active" data-bs-toggle="list" role="tab" aria-controls="tab-pane-1">Tab pane 1</a> <a href="#tab-pane-2" id="tab-2" class="list-group-item list-group-item-action" data-bs-toggle="list" role="tab" aria-controls="tab-pane-2">Tab pane 2</a> <a href="#tab-pane-3" id="tab-3" class="list-group-item list-group-item-action" data-bs-toggle="list" role="tab" aria-controls="tab-pane-3">Tab pane 3</a> </div> </div> <div class="col-8"> <div class="tab-content"> <div id="tab-pane-1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab-1">Tab pane 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div> <div id="tab-pane-2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab-2">Tab pane 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div> <div id="tab-pane-3" class="tab-pane fade" role="tabpanel" aria-labelledby="tab-3">Tab pane 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</div> </div> </div> </div>