List

Basic Example
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

                          
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Links and Buttons Example
The current link item A second link item A third link item A fourth link item A disabled link item 

                          
<!-- Link Example -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>  
<!--Button Example -->
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
List with checkboxes

                          
<ul class="list-group">
<li class="list-group-item">
  <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
  <label class="form-check-label" for="firstCheckbox">First checkbox</label>
</li>
<li class="list-group-item">
  <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
  <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
</li>
<li class="list-group-item">
  <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
  <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
</li>
</ul>
List with radios 

                          
<ul class="list-group">
<li class="list-group-item">
  <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
  <label class="form-check-label" for="firstRadio">First radio</label>
</li>
<li class="list-group-item">
  <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
  <label class="form-check-label" for="secondRadio">Second radio</label>
</li>
<li class="list-group-item">
  <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
  <label class="form-check-label" for="thirdRadio">Third radio</label>
</li>
</ul>
Flush Example
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

                          
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Unstyled
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

                          
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
  <ul>
    <li>are unaffected by this style</li>
    <li>will still show a bullet</li>
    <li>and have appropriate left margin</li>
  </ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>