Card columns

Bootstrap 5 Card columns component

Responsive Card columns built with Bootstrap 5. Use the Bootstrap grid system to control how many grid columns you show per row. Many examples and tutorials.


Basic example

Use class .row-cols to control how many grid columns (wrapped around your cards) you show per row. Here’s .row-cols-3 laying out the cards on three columns.

Hollywood Sign on The Hill
Card title

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

Palm Springs Road
Card title

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

Los Angeles Skyscrapers
Card title

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

Skyscrapers
Card title

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

Skyscrapers
Card title

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

Skyscrapers
Card title

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

        
             
        <div class="row row-cols-3 g-3">
          <div class="col">
            <div class="card">
              <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top"
                alt="Hollywood Sign on The Hill" />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  This is a longer card with supporting text below as a natural lead-in to
                  additional content. This content is a little bit longer.
                </p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top"
                alt="Palm Springs Road" />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  This is a longer card with supporting text below as a natural lead-in to
                  additional content. This content is a little bit longer.
                </p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top"
                alt="Los Angeles Skyscrapers" />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                  additional content.</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top"
                alt="Skyscrapers" />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  This is a longer card with supporting text below as a natural lead-in to
                  additional content.
                </p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp" class="card-img-top"
                alt="Skyscrapers" />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  This is a longer card with supporting text below as a natural lead-in to
                  additional content. This content is a little bit longer.
                </p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/050.webp" class="card-img-top"
                alt="Skyscrapers" />
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  This is a longer card with supporting text below as a natural lead-in to
                  additional content. This content is a little bit longer.
                </p>
              </div>
            </div>
          </div>
        </div>
      
        
    

Two columns

Use the class .row-cols-2 to lay out the cards on two columns.

Hollywood Sign on The Hill
Card title

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

Palm Springs Road
Card title

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

Los Angeles Skyscrapers
Card title

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

Skyscrapers
Card title

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

        
             
      <div class="row row-cols-2 g-3">
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top"
              alt="Hollywood Sign on The Hill" />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top"
              alt="Palm Springs Road" />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top"
              alt="Los Angeles Skyscrapers" />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                additional content.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top"
              alt="Skyscrapers" />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content.
              </p>
            </div>
          </div>
        </div>
      </div>
      
        
    

Responsive

Here’s .row-cols-1 laying out the cards on one column, .row-cols-md-2 splitting cards to equal width across multiple rows, from the medium breakpoint up and .row-cols-lg-3 splitting cards from the large breakpoint up.

Hollywood Sign on The Hill
Card title

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

Palm Springs Road
Card title

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

Los Angeles Skyscrapers
Card title

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

Skyscrapers
Card title

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

Skyscrapers
Card title

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

Skyscrapers
Card title

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

        
             
      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                additional content.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top" alt="Skyscrapers">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp" class="card-img-top" alt="Skyscrapers">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/050.webp" class="card-img-top" alt="Skyscrapers">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
      </div>
      
        
    

Spacing

Use gutters to add padding between your columns. Add .g-* to the main div.

Hollywood Sign on The Hill
Card title

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

Palm Springs Road
Card title

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

Los Angeles Skyscrapers
Card title

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

Skyscrapers
Card title

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

Skyscrapers
Card title

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

Skyscrapers
Card title

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

        
             
      <div class="row row-cols-3 g-4">
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top" alt="Skyscrapers">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp" class="card-img-top" alt="Skyscrapers">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/050.webp" class="card-img-top" alt="Skyscrapers">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
      </div>
      
        
    

Equal height

When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.

Hollywood Sign on The Hill
Card title

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

Palm Springs Road
Card title

This is a short card.

Los Angeles Skyscrapers
Card title

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

Skyscrapers
Card title

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

        
             
      <div class="row row-cols-1 row-cols-md-2 g-4">
        <div class="col">
          <div class="card h-100">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/>
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/>
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a short card.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/>
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top" alt="Skyscrapers"/>
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a longer card with supporting text below as a natural lead-in to
                additional content. This content is a little bit longer.
              </p>
            </div>
          </div>
        </div>
      </div>
      
        
    

Horizontal

Here’s an example of columns with horizontal cards.

Trendy Pants and Shoes
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

Trendy Pants and Shoes
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

Trendy Pants and Shoes
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

Trendy Pants and Shoes
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

        
             
      <div class="row row-cols-2 g-3">
        <div class="col">
          <div class="card mb-3" style="max-width: 540px;">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp"
                  alt="Trendy Pants and Shoes"
                  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 class="col">
          <div class="card mb-3" style="max-width: 540px;">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp"
                  alt="Trendy Pants and Shoes"
                  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 class="col">
          <div class="card mb-3" style="max-width: 540px;">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp"
                  alt="Trendy Pants and Shoes"
                  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 class="col">
          <div class="card mb-3" style="max-width: 540px;">
            <div class="row g-0">
              <div class="col-md-4">
                <img
                  src="https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp"
                  alt="Trendy Pants and Shoes"
                  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>