bootstrap-card-deck
Advanced tools
Responsive Card Deck built with Bootstrap 5. Bootstrap card-deck with multiple rows and standard breakpoints.
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.
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards.
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>
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>
Download MDB 5 - free UI KIT
Choose your favourite customized component and click on the image
Copy & paste the code into your MDB project
▶️ Subscribe to YouTube channel for web development tutorials & resources
FAQs
Responsive Card Deck built with Bootstrap 5. Bootstrap card-deck with multiple rows and standard breakpoints.
The npm package bootstrap-card-deck receives a total of 7 weekly downloads. As such, bootstrap-card-deck popularity was classified as not popular.
We found that bootstrap-card-deck demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.