Responsive Card Deck built with Bootstrap 5. Bootstrap card-deck with multiple rows and standard breakpoints.

Check out Bootstrap Card Deck Documentation for detailed instructions & even more examples.

Card deck layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards.

Cards group

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

<div class="card-group">
  <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 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 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 card has supporting text below as a natural lead-in to additional content.
      </p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  <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 wider card with supporting text below as a natural lead-in to
        additional content. This card has even longer content than the first to show
        that equal height action.
      </p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>

Cards grid

Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.

<div class="row row-cols-1 row-cols-md-2 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.</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>

How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

---

More extended Bootstrap documentation

• Bootstrap Address Form
• Bootstrap Avatar
• Bootstrap Back To Top Button
• Bootstrap Carousel Slider with Thumbnails
• Bootstrap Chat
• Bootstrap Code Blocks
• Bootstrap Comments
• Bootstrap Comparison Table
• Bootstrap Credit Card Form
• Bootstrap Drawer
• Bootstrap Nested Dropdown
• Bootstrap FAQ component / section
• Bootstrap Gallery
• Bootstrap Hamburger Menu
• Bootstrap Invoice
• Bootstrap Jumbotron
• Bootstrap Login Form
• Bootstrap Maps
• Bootstrap Media Object
• Bootstrap Mega Menu
• Bootstrap Multiselect
• Bootstrap News Feed
• Bootstrap Offcanvas
• Bootstrap Order Details
• Bootstrap Page Transitions
• Bootstrap Payment Forms
• Bootstrap Product Cards
• Bootstrap Profiles
• Bootstrap Quotes
• Bootstrap Registration Form
• Bootstrap Expanding Search Bar
• Bootstrap Shopping Carts
• Bootstrap Side Navbar
• Bootstrap Sidebar
• Bootstrap Social Media Icons & Buttons
• Bootstrap Square Buttons
• Bootstrap Survey Form
• Bootstrap Testimonial Slider
• Bootstrap Testimonials
• Bootstrap Textarea
• Bootstrap Timeline
• Bootstrap To Do List
• Bootstrap Video Carousel / Gallery
• Bootstrap Weather
• Bootstrap Dark Mode
• Bootstrap Padding
• Bootstrap Modal Methods
• Bootstrap Modal Size
• Bootstrap Modal Backdrop
• Bootstrap Table Filter
• Bootstrap Slider
• Bootstrap Logo
• Bootstrap Popup
• Bootstrap Max Width
• Bootstrap Hero
• Bootstrap Select Dropdown
• Bootstrap Labels
• Bootstrap Dialog
• Bootstrap Screen Sizes
• Bootstrap Dropdown Button
• Bootstrap Widgets