Lists - Documentation | Unity - Multipurpose Responsive Template

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Preview
HTML

Dashboard
Profile
Account
- Settings
- Billing
- Invoice
Projects
Tasks
1. One
2. Two
3. Three

              
                <!-- List -->
                <ul class="list-unstyled">
                  <li>Dashboard</li>
                  <li>Profile</li>
                  <li>
                    Account

                    <ul>
                      <li>Settings</li>
                      <li>Billing</li>
                      <li>Invoice</li>
                    </ul>
                  </li>
                  <li>Projects</li>
                  <li>
                    Tasks
                    <ol>
                      <li>One</li>
                      <li>Two</li>
                      <li>Three</li>
                    </ol>
                  </li>
                </ul>
                <!-- End List -->

Unstyled spacings

You can add vertical spacings between lists with modifier classes.

Use .list-py-1 class.

Preview
HTML

Dashboard
Profile
Account
Projects
Tasks

              
                <!-- List -->
                <ul class="list-unstyled list-py-1">
                  <li>Dashboard</li>
                  <li>Profile</li>
                  <li>Account</li>
                  <li>Projects</li>
                  <li>Tasks</li>
                </ul>
                <!-- End List -->

Use .list-py-2 class.

Preview
HTML

Dashboard
Profile
Account
Projects
Tasks

              
                <!-- List -->
                <ul class="list-unstyled list-py-2">
                  <li>Dashboard</li>
                  <li>Profile</li>
                  <li>Account</li>
                  <li>Projects</li>
                  <li>Tasks</li>
                </ul>
                <!-- End List -->

Use .list-py-3 class.

Preview
HTML

Dashboard
Profile
Account
Projects
Tasks

              
                <!-- List -->
                <ul class="list-unstyled list-py-3">
                  <li>Dashboard</li>
                  <li>Profile</li>
                  <li>Account</li>
                  <li>Projects</li>
                  <li>Tasks</li>
                </ul>
                <!-- End List -->

Inline

Remove a list's bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

Preview
HTML

Dashboard
Profile
Account
Projects
Tasks

              
                <!-- List -->
                <ul class="list-inline">
                  <li class="list-inline-item">Dashboard</li>
                  <li class="list-inline-item">Profile</li>
                  <li class="list-inline-item">Account</li>
                  <li class="list-inline-item">Projects</li>
                  <li class="list-inline-item">Tasks</li>
                </ul>
                <!-- End List -->

List separator

Use .list-separator class with the .list-inline class for an inline separator with a circled shape.

Preview
HTML

              
                <!-- List Separator -->
                <ul class="list-inline list-separator">
                  <li class="list-inline-item">
                    <a class="list-separator-link" href="#">FAQ</a>
                  </li>
                  <li class="list-inline-item">
                    <a class="list-separator-link" href="#">License</a>
                  </li>
                  <li class="list-inline-item">
                    <a class="list-separator-link" href="#">Terms & conditions</a>
                  </li>
                </ul>
                <!-- End List Separator -->

List comment

Use .list-comment class and .list-comment-item as a child class for a comment style listing.

Preview
HTML

Dave Austin
1 day ago

As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.
Reply
- Christina Kray
  1 day ago
  
  Love it Dave! We're all about keeping it up.
  Reply
Hanna Wolfe
2 days ago

Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.
Reply

              
                <!-- Comment -->
                <ul class="list-comment">
                  <!-- Item -->
                  <li class="list-comment-item">
                    <!-- Media -->
                    <div class="d-flex align-items-center mb-3">
                      <div class="flex-shrink-0">
                        <img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                      </div>

                      <div class="flex-grow-1 ms-3">
                        <div class="d-flex justify-content-between align-items-center">
                          <h6>Dave Austin</h6>
                          <span class="d-block">1 day ago</span>
                        </div>
                      </div>
                    </div>
                    <!-- End Media -->

                    <p>As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.</p>

                    <a class="link" href="#">Reply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>

                    <!-- Comment -->
                    <ul class="list-comment">
                      <!-- Item -->
                      <li class="list-comment-item">
                        <!-- Media -->
                        <div class="d-flex align-items-center mb-3">
                          <div class="flex-shrink-0">
                            <img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                          </div>

                          <div class="flex-grow-1 ms-3">
                            <div class="d-flex justify-content-between align-items-center">
                              <h6>Christina Kray</h6>
                              <span class="d-block">1 day ago</span>
                            </div>
                          </div>
                        </div>
                        <!-- End Media -->

                        <p>Love it Dave! We're all about keeping it up.</p>

                        <a class="link" href="#">Reply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
                      </li>
                      <!-- End Item -->
                    </ul>
                    <!-- End Comment -->
                  </li>
                  <!-- End Item -->

                  <!-- Item -->
                  <li class="list-comment-item">
                    <!-- Media -->
                    <div class="d-flex align-items-center mb-3">
                      <div class="flex-shrink-0">
                        <img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                      </div>

                      <div class="flex-grow-1 ms-3">
                        <div class="d-flex justify-content-between align-items-center">
                          <h6>Hanna Wolfe</h6>
                          <span class="d-block">2 days ago</span>
                        </div>
                      </div>
                    </div>
                    <!-- End Media -->

                    <p>Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.</p>

                    <a class="link" href="#">Reply <i class="bi-chevron-right small ms-1 small ms-1"></i></a>
                  </li>
                  <!-- End Item -->
                </ul>
                <!-- End Comment -->

List checked

Replacing the default list-style and left margin on list items with 3 different styles of checkboxes.

Preview
HTML

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

              
                <div class="row">
                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-primary">
                      <li class="list-checked-item">Dashboard</li>
                      <li class="list-checked-item">Profile</li>
                      <li class="list-checked-item">Tasks</li>
                      <li class="list-checked-item">Projects</li>
                      <li class="list-checked-item">Members</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>

                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-bg-primary">
                      <li class="list-checked-item">Dashboard</li>
                      <li class="list-checked-item">Profile</li>
                      <li class="list-checked-item">Tasks</li>
                      <li class="list-checked-item">Projects</li>
                      <li class="list-checked-item">Members</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>

                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-soft-bg-primary">
                      <li class="list-checked-item">Dashboard</li>
                      <li class="list-checked-item">Profile</li>
                      <li class="list-checked-item">Tasks</li>
                      <li class="list-checked-item">Projects</li>
                      <li class="list-checked-item">Members</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>
                </div>
                <!-- End Row -->

List checked Sizings

Use .list-checked-sm class.

Preview
HTML

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

              
                <div class="row">
                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-sm list-checked-primary">
                      <li class="list-checked-item">Dashboard</li>
                      <li class="list-checked-item">Profile</li>
                      <li class="list-checked-item">Tasks</li>
                      <li class="list-checked-item">Projects</li>
                      <li class="list-checked-item">Members</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>

                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-sm list-checked-bg-primary">
                      <li class="list-checked-item">Dashboard</li>
                      <li class="list-checked-item">Profile</li>
                      <li class="list-checked-item">Tasks</li>
                      <li class="list-checked-item">Projects</li>
                      <li class="list-checked-item">Members</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>

                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-sm list-checked-soft-bg-primary">
                      <li class="list-checked-item">Dashboard</li>
                      <li class="list-checked-item">Profile</li>
                      <li class="list-checked-item">Tasks</li>
                      <li class="list-checked-item">Projects</li>
                      <li class="list-checked-item">Members</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>
                </div>
                <!-- End Row -->

Use .list-checked-lg class.

Preview
HTML

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

              
                <div class="row">
                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-lg list-checked-primary">
                      <li class="list-checked-item">Dashboard</li>
                      <li class="list-checked-item">Profile</li>
                      <li class="list-checked-item">Tasks</li>
                      <li class="list-checked-item">Projects</li>
                      <li class="list-checked-item">Members</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>

                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-lg list-checked-bg-primary">
                      <li class="list-checked-item">Dashboard</li>
                      <li class="list-checked-item">Profile</li>
                      <li class="list-checked-item">Tasks</li>
                      <li class="list-checked-item">Projects</li>
                      <li class="list-checked-item">Members</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>

                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-lg list-checked-soft-bg-primary">
                      <li class="list-checked-item">Dashboard</li>
                      <li class="list-checked-item">Profile</li>
                      <li class="list-checked-item">Tasks</li>
                      <li class="list-checked-item">Projects</li>
                      <li class="list-checked-item">Members</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>
                </div>
                <!-- End Row -->

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

              
                <div class="row">
                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-primary">
                      <li class="list-checked-item">Primary</li>
                    </ul>
                    <ul class="list-checked list-checked-secondary">
                      <li class="list-checked-item">Secondary</li>
                    </ul>
                    <ul class="list-checked list-checked-success">
                      <li class="list-checked-item">Success</li>
                    </ul>
                    <ul class="list-checked list-checked-danger">
                      <li class="list-checked-item">Danger</li>
                    </ul>
                    <ul class="list-checked list-checked-warning">
                      <li class="list-checked-item">Warning</li>
                    </ul>
                    <ul class="list-checked list-checked-info">
                      <li class="list-checked-item">Info</li>
                    </ul>
                    <ul class="list-checked list-checked-light">
                      <li class="list-checked-item">Light</li>
                    </ul>
                    <ul class="list-checked list-checked-dark">
                      <li class="list-checked-item">Dark</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>

                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-bg-primary">
                      <li class="list-checked-item">Primary</li>
                    </ul>
                    <ul class="list-checked list-checked-bg-secondary">
                      <li class="list-checked-item">Secondary</li>
                    </ul>
                    <ul class="list-checked list-checked-bg-success">
                      <li class="list-checked-item">Success</li>
                    </ul>
                    <ul class="list-checked list-checked-bg-danger">
                      <li class="list-checked-item">Danger</li>
                    </ul>
                    <ul class="list-checked list-checked-bg-warning">
                      <li class="list-checked-item">Warning</li>
                    </ul>
                    <ul class="list-checked list-checked-bg-info">
                      <li class="list-checked-item">Info</li>
                    </ul>
                    <ul class="list-checked list-checked-bg-light">
                      <li class="list-checked-item">Light</li>
                    </ul>
                    <ul class="list-checked list-checked-bg-dark">
                      <li class="list-checked-item">Dark</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>

                  <div class="col-sm">
                    <!-- List Checked -->
                    <ul class="list-checked list-checked-soft-bg-primary">
                      <li class="list-checked-item">Primary</li>
                    </ul>
                    <ul class="list-checked list-checked-soft-bg-secondary">
                      <li class="list-checked-item">Secondary</li>
                    </ul>
                    <ul class="list-checked list-checked-soft-bg-success">
                      <li class="list-checked-item">Success</li>
                    </ul>
                    <ul class="list-checked list-checked-soft-bg-danger">
                      <li class="list-checked-item">Danger</li>
                    </ul>
                    <ul class="list-checked list-checked-soft-bg-warning">
                      <li class="list-checked-item">Warning</li>
                    </ul>
                    <ul class="list-checked list-checked-soft-bg-info">
                      <li class="list-checked-item">Info</li>
                    </ul>
                    <ul class="list-checked list-checked-soft-bg-light">
                      <li class="list-checked-item">Light</li>
                    </ul>
                    <ul class="list-checked list-checked-soft-bg-dark">
                      <li class="list-checked-item">Dark</li>
                    </ul>
                    <!-- End List Checked -->
                  </div>
                </div>
                <!-- End Row -->

List pointer

Replacing the default list-style and left margin on list items with 3 different styles of checkboxes.

Preview
HTML

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

              
                <div class="row">
                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-primary">
                      <li class="list-pointer-item">Dashboard</li>
                      <li class="list-pointer-item">Profile</li>
                      <li class="list-pointer-item">Tasks</li>
                      <li class="list-pointer-item">Projects</li>
                      <li class="list-pointer-item">Members</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>

                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-bg-primary">
                      <li class="list-pointer-item">Dashboard</li>
                      <li class="list-pointer-item">Profile</li>
                      <li class="list-pointer-item">Tasks</li>
                      <li class="list-pointer-item">Projects</li>
                      <li class="list-pointer-item">Members</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>

                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-soft-bg-primary">
                      <li class="list-pointer-item">Dashboard</li>
                      <li class="list-pointer-item">Profile</li>
                      <li class="list-pointer-item">Tasks</li>
                      <li class="list-pointer-item">Projects</li>
                      <li class="list-pointer-item">Members</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>
                </div>
                <!-- End Row -->

List pointer Sizings

Use .list-pointer-sm class.

Preview
HTML

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

              
                <div class="row">
                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-sm list-pointer-primary">
                      <li class="list-pointer-item">Dashboard</li>
                      <li class="list-pointer-item">Profile</li>
                      <li class="list-pointer-item">Tasks</li>
                      <li class="list-pointer-item">Projects</li>
                      <li class="list-pointer-item">Members</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>

                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-sm list-pointer-bg-primary">
                      <li class="list-pointer-item">Dashboard</li>
                      <li class="list-pointer-item">Profile</li>
                      <li class="list-pointer-item">Tasks</li>
                      <li class="list-pointer-item">Projects</li>
                      <li class="list-pointer-item">Members</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>

                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-sm list-pointer-soft-bg-primary">
                      <li class="list-pointer-item">Dashboard</li>
                      <li class="list-pointer-item">Profile</li>
                      <li class="list-pointer-item">Tasks</li>
                      <li class="list-pointer-item">Projects</li>
                      <li class="list-pointer-item">Members</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>
                </div>
                <!-- End Row -->

Use .list-pointer-lg class.

Preview
HTML

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

Dashboard
Profile
Tasks
Projects
Members

              
                <div class="row">
                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-lg list-pointer-primary">
                      <li class="list-pointer-item">Dashboard</li>
                      <li class="list-pointer-item">Profile</li>
                      <li class="list-pointer-item">Tasks</li>
                      <li class="list-pointer-item">Projects</li>
                      <li class="list-pointer-item">Members</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>

                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-lg list-pointer-bg-primary">
                      <li class="list-pointer-item">Dashboard</li>
                      <li class="list-pointer-item">Profile</li>
                      <li class="list-pointer-item">Tasks</li>
                      <li class="list-pointer-item">Projects</li>
                      <li class="list-pointer-item">Members</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>

                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-lg list-pointer-soft-bg-primary">
                      <li class="list-pointer-item">Dashboard</li>
                      <li class="list-pointer-item">Profile</li>
                      <li class="list-pointer-item">Tasks</li>
                      <li class="list-pointer-item">Projects</li>
                      <li class="list-pointer-item">Members</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>
                </div>
                <!-- End Row -->

Color variations

Preview
HTML

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

              
                <div class="row">
                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-primary">
                      <li class="list-pointer-item">Primary</li>
                    </ul>
                    <ul class="list-pointer list-pointer-secondary">
                      <li class="list-pointer-item">Secondary</li>
                    </ul>
                    <ul class="list-pointer list-pointer-success">
                      <li class="list-pointer-item">Success</li>
                    </ul>
                    <ul class="list-pointer list-pointer-danger">
                      <li class="list-pointer-item">Danger</li>
                    </ul>
                    <ul class="list-pointer list-pointer-warning">
                      <li class="list-pointer-item">Warning</li>
                    </ul>
                    <ul class="list-pointer list-pointer-info">
                      <li class="list-pointer-item">Info</li>
                    </ul>
                    <ul class="list-pointer list-pointer-light">
                      <li class="list-pointer-item">Light</li>
                    </ul>
                    <ul class="list-pointer list-pointer-dark">
                      <li class="list-pointer-item">Dark</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>

                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-bg-primary">
                      <li class="list-pointer-item">Primary</li>
                    </ul>
                    <ul class="list-pointer list-pointer-bg-secondary">
                      <li class="list-pointer-item">Secondary</li>
                    </ul>
                    <ul class="list-pointer list-pointer-bg-success">
                      <li class="list-pointer-item">Success</li>
                    </ul>
                    <ul class="list-pointer list-pointer-bg-danger">
                      <li class="list-pointer-item">Danger</li>
                    </ul>
                    <ul class="list-pointer list-pointer-bg-warning">
                      <li class="list-pointer-item">Warning</li>
                    </ul>
                    <ul class="list-pointer list-pointer-bg-info">
                      <li class="list-pointer-item">Info</li>
                    </ul>
                    <ul class="list-pointer list-pointer-bg-light">
                      <li class="list-pointer-item">Light</li>
                    </ul>
                    <ul class="list-pointer list-pointer-bg-dark">
                      <li class="list-pointer-item">Dark</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>

                  <div class="col-sm">
                    <!-- List Pointer -->
                    <ul class="list-pointer list-pointer-soft-bg-primary">
                      <li class="list-pointer-item">Primary</li>
                    </ul>
                    <ul class="list-pointer list-pointer-soft-bg-secondary">
                      <li class="list-pointer-item">Secondary</li>
                    </ul>
                    <ul class="list-pointer list-pointer-soft-bg-success">
                      <li class="list-pointer-item">Success</li>
                    </ul>
                    <ul class="list-pointer list-pointer-soft-bg-danger">
                      <li class="list-pointer-item">Danger</li>
                    </ul>
                    <ul class="list-pointer list-pointer-soft-bg-warning">
                      <li class="list-pointer-item">Warning</li>
                    </ul>
                    <ul class="list-pointer list-pointer-soft-bg-info">
                      <li class="list-pointer-item">Info</li>
                    </ul>
                    <ul class="list-pointer list-pointer-soft-bg-light">
                      <li class="list-pointer-item">Light</li>
                    </ul>
                    <ul class="list-pointer list-pointer-soft-bg-dark">
                      <li class="list-pointer-item">Dark</li>
                    </ul>
                    <!-- End List Pointer -->
                  </div>
                </div>
                <!-- End Row -->

Color timeline

Preview
HTML

Unity is by far one of the most solid themes out there. I have nothing but praise.

Nicole Grazioso Director Payments & Risk | HubSpot
Great design and thorough documentation, all backed with amazing support.

Josh Tyson Product Manager | Capsule
It is a breeze to work with and really love the snippets to pick out what you want in your design.

Luisa Senior Director of Operations | Fitbit
Truly great agency and costumer support. The best one I've ever come across.

Alisa Williams Entrepreneur | Happy customer

              
                <!-- List Timeline -->
                <ul class="list-unstyled list-timeline list-py-3">
                  <li class="list-timeline-item">
                    <!-- Card -->
                    <div class="card card-shadow">
                      <div class="card-body">
                        <!-- Media -->
                        <div class="d-sm-flex">
                          <div class="flex-shrink-0 mb-3 mb-sm-0">
                            <img class="avatar avatar-lg avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                          </div>

                          <div class="flex-grow-1 ms-sm-4">
                            <!-- Blockquote -->
                            <figure class="blockquote-sm">
                              <blockquote class="blockquote"><em>Unity is by far one of the most solid themes out there. I have nothing but praise.</em></blockquote>

                              <figcaption class="blockquote-footer">
                                Nicole Grazioso
                                <span class="blockquote-footer-source">Director Payments & Risk | HubSpot</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                        </div>
                        <!-- End Media -->
                      </div>
                    </div>
                    <!-- End Card -->
                  </li>

                  <li class="list-timeline-item ms-auto">
                    <!-- Card -->
                    <div class="card card-shadow">
                      <div class="card-body">
                        <!-- Media -->
                        <div class="d-sm-flex">
                          <div class="flex-shrink-0 mb-3 mb-sm-0">
                            <img class="avatar avatar-lg avatar-circle" src="../assets/img/160x160/img5.jpg" alt="Image Description">
                          </div>

                          <div class="flex-grow-1 ms-sm-4">
                            <!-- Blockquote -->
                            <figure class="blockquote-sm">
                              <blockquote class="blockquote"><em>Great design and thorough documentation, all backed with amazing support.</em></blockquote>

                              <figcaption class="blockquote-footer">
                                Josh Tyson
                                <span class="blockquote-footer-source">Product Manager | Capsule</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                        </div>
                        <!-- End Media -->
                      </div>
                    </div>
                    <!-- End Card -->
                  </li>

                  <li class="list-timeline-item">
                    <!-- Card -->
                    <div class="card card-shadow">
                      <div class="card-body">
                        <!-- Media -->
                        <div class="d-sm-flex">
                          <div class="flex-shrink-0 mb-3 mb-sm-0">
                            <img class="avatar avatar-lg avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                          </div>

                          <div class="flex-grow-1 ms-sm-4">
                            <!-- Blockquote -->
                            <figure class="blockquote-sm">
                              <blockquote class="blockquote"><em>It is a breeze to work with and really love the snippets to pick out what you want in your design.</em></blockquote>

                              <figcaption class="blockquote-footer">
                                Luisa
                                <span class="blockquote-footer-source">Senior Director of Operations | Fitbit</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                        </div>
                        <!-- End Media -->
                      </div>
                    </div>
                    <!-- End Card -->
                  </li>

                  <li class="list-timeline-item ms-auto">
                    <!-- Card -->
                    <div class="card card-shadow">
                      <div class="card-body">
                        <!-- Media -->
                        <div class="d-sm-flex">
                          <div class="flex-shrink-0 mb-3 mb-sm-0">
                            <img class="avatar avatar-lg avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                          </div>

                          <div class="flex-grow-1 ms-sm-4">
                            <!-- Blockquote -->
                            <figure class="blockquote-sm">
                              <blockquote class="blockquote"><em>Truly great agency and costumer support. The best one I've ever come across.</em></blockquote>

                              <figcaption class="blockquote-footer">
                                Alisa Williams
                                <span class="blockquote-footer-source">Entrepreneur | Happy customer</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                        </div>
                        <!-- End Media -->
                      </div>
                    </div>
                    <!-- End Card -->
                  </li>
                </ul>
                <!-- End List Timeline -->

Color equal height

2 columns...

Preview
HTML

100%

This content is a little bit longer.
100%

This is a longer card with supporting text below as a natural lead-in to additional content.
100%

This is a longer card with supporting text below as a natural lead-in to additional content.
100%

This content is a little bit longer.

              
                <!-- List -->
                <ul class="list-equal-height list-equal-height-2-cols">
                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This content is a little bit longer.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This content is a little bit longer.</p>
                  </li>
                </ul>
                <!-- End List -->

3 columns...

Preview
HTML

100%

This content is a little bit longer.
100%

This is a longer card with supporting text below as a natural lead-in to additional content.
100%

This is a longer card with supporting text below as a natural lead-in to additional content.
100%

This content is a little bit longer.
100%

This is a longer card with supporting text below as a natural lead-in to additional content.
100%

This content is a little bit longer.

              
                <!-- List -->
                <ul class="list-equal-height list-equal-height-3-cols">
                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This content is a little bit longer.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This content is a little bit longer.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This content is a little bit longer.</p>
                  </li>
                </ul>
                <!-- End List -->

4 columns...

Preview
HTML

100%

This content is a little bit longer.
100%

This is a longer card with supporting text below as a natural lead-in to additional content.
100%

This content is a little bit longer.
100%

This is a longer card with supporting text below as a natural lead-in to additional content.
100%

This is a longer card with supporting text below as a natural lead-in to additional content.
100%

This content is a little bit longer.
100%

This is a longer card with supporting text below as a natural lead-in to additional content.
100%

This content is a little bit longer.

              
                <!-- List -->
                <ul class="list-equal-height list-equal-height-4-cols">
                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This content is a little bit longer.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This content is a little bit longer.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This content is a little bit longer.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
                  </li>

                  <li class="list-equal-height-item">
                    <h2 class="display-5">100%</h2>
                    <p class="mb-0">This content is a little bit longer.</p>
                  </li>
                </ul>
                <!-- End List -->