How to create responsive card layout in bootstrap

BootstrapHow-ToBeginner · 3 min read

Create Responsive Card Layout in Bootstrap Easily

Use Bootstrap's row and col grid classes combined with card components to create a responsive card layout. Adjust column sizes with responsive classes like col-sm-6 or col-lg-4 to control how many cards appear per row on different screen sizes.

📐

Syntax

Bootstrap uses a grid system with rows and columns to arrange cards responsively. Each card is placed inside a col class that defines its width on different screen sizes.

row: Container for columns, creates horizontal groups.
col-{breakpoint}-{number}: Defines column width at a screen size breakpoint (e.g., col-md-4 means 4 columns wide on medium screens).
card: Bootstrap component for card layout with padding, border, and shadow.

html

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="card">
      <!-- Card content here -->
    </div>
  </div>
  <!-- Repeat columns/cards -->
</div>

💻

Example

This example shows a responsive card layout with three cards per row on medium screens and two cards per row on small screens. Cards stack vertically on extra small screens.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Card Layout</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-4">
    <div class="row g-3">
      <div class="col-sm-6 col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="Card image">
          <div class="card-body">
            <h5 class="card-title">Card One</h5>
            <p class="card-text">This is a responsive card example using Bootstrap grid.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="Card image">
          <div class="card-body">
            <h5 class="card-title">Card Two</h5>
            <p class="card-text">Cards adjust layout based on screen size automatically.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="Card image">
          <div class="card-body">
            <h5 class="card-title">Card Three</h5>
            <p class="card-text">Use spacing classes like <code>g-3</code> for gutters between cards.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage showing three cards in a row on medium+ screens, two cards per row on small screens, and stacked cards on extra small screens, each card with an image, title, and text.

⚠️

Common Pitfalls

Not using the row container can break the grid layout.
Forgetting responsive column classes causes cards to not adjust on different screen sizes.
Using fixed widths or heights on cards can cause overflow or poor scaling.
Not adding gutters (g-* classes) can make cards stick together without spacing.

html

<!-- Wrong: Missing row and responsive columns -->
<div>
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
</div>

<!-- Right: Using row and responsive columns -->
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="card">Card 1</div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="card">Card 2</div>
  </div>
</div>

📊

Quick Reference

Use row to group columns.
Use responsive col-* classes to control card width on different devices.
Add g-* classes on row for spacing between cards.
Use card component for consistent styling.
Test on multiple screen sizes to ensure responsiveness.

✅

Key Takeaways

Wrap cards inside Bootstrap row and responsive col classes for layout.

Use responsive column sizes like col-sm-6 and col-md-4 to control cards per row on different screens.

Add gutter classes like g-3 on the row for spacing between cards.

Avoid fixed widths on cards to keep them flexible and responsive.

Always test your layout on various screen sizes to ensure it adapts well.