Lists

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

https://getbootstrap.com/docs/5.1/components/list-group/

Alerts Defaults

Preview
HTML

First checkbox
Second checkbox
Third checkbox

First checkbox
Second checkbox
Third checkbox

An item
A second item
A third item

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

                  
                    <!-- simple -->
                    <ul class="list-group">
                      <li class="list-group-item">
                        First checkbox
                      </li>
                      <li class="list-group-item">
                        Second checkbox
                      </li>
                      <li class="list-group-item">
                        Third checkbox
                      </li>
                    </ul>

                  
                    <!-- checkbox -->
                    <ul class="list-group">
                      <li class="list-group-item">
                        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
                        First checkbox
                      </li>
                      <li class="list-group-item">
                        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
                        Second checkbox
                      </li>
                      <li class="list-group-item">
                        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
                        Third checkbox
                      </li>
                    </ul>

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

                  
                    <!-- complex -->
                    <div class="list-group">
                      <a href="#" class="list-group-item list-group-item-action active p-3 p-xl-4" aria-current="true">
                        <div class="d-flex w-100 justify-content-between">
                          <h5 class="mb-1">List group item heading</h5>
                          <small>3 days ago</small>
                        </div>
                        <p class="mb-1">Some placeholder content in a paragraph.</p>
                        <small>And some small print.</small>
                      </a>
                      <a href="#" class="list-group-item list-group-item-action p-3 p-xl-4">
                        <div class="d-flex w-100 justify-content-between">
                          <h5 class="mb-1">List group item heading</h5>
                          <small class="text-muted">3 days ago</small>
                        </div>
                        <p class="mb-1">Some placeholder content in a paragraph.</p>
                        <small class="text-muted">And some muted small print.</small>
                      </a>
                      <a href="#" class="list-group-item list-group-item-action p-3 p-xl-4">
                        <div class="d-flex w-100 justify-content-between">
                          <h5 class="mb-1">List group item heading</h5>
                          <small class="text-muted">3 days ago</small>
                        </div>
                        <p class="mb-1">Some placeholder content in a paragraph.</p>
                        <small class="text-muted">And some muted small print.</small>
                      </a>
                    </div>