Cards list

Bootstrap 5 Cards list component

Responsive Cards list built with Bootstrap 5. Thanks to this guide, you can easily create a scrollable list of cards.

Basic example

The cards will automatically stack one under the other.
To make the list scrollable, add all cards to a div with class .overflow-auto. Set the width and height of this div via custom CSS.
If you want this div to fit perfectly to the width of the cards, remove the width CSS style and put the whole thing in a div with .d-flex class.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Edit in sandbox 
        
            
      <div class="d-flex">
        <div class="overflow-auto" style="height: 400px">
          <div class="card m-2" style="max-width: 540px;">
              <div class="row g-0">
                  <div class="col-md-4">
                      <img src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp" class="img-fluid rounded-start" />
                  </div>
                  <div class="col-md-8">
                      <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text">
                              This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                          </p>
                          <p class="card-text">
                              <small class="text-muted">Last updated 3 mins ago</small>
                          </p>
                      </div>
                  </div>
              </div>
          </div>
          <div class="card m-2" style="max-width: 540px;">
              <div class="row g-0">
                  <div class="col-md-4">
                      <img src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp" class="img-fluid rounded-start" />
                  </div>
                  <div class="col-md-8">
                      <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text">
                              This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                          </p>
                          <p class="card-text">
                              <small class="text-muted">Last updated 3 mins ago</small>
                          </p>
                      </div>
                  </div>
              </div>
          </div>
          <div class="card m-2" style="max-width: 540px;">
              <div class="row g-0">
                  <div class="col-md-4">
                      <img src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp" class="img-fluid rounded-start" />
                  </div>
                  <div class="col-md-8">
                      <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text">
                              This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                          </p>
                          <p class="card-text">
                              <small class="text-muted">Last updated 3 mins ago</small>
                          </p>
                      </div>
                  </div>
              </div>
          </div>
        </div>
      </div>