Horizontal cards
Bootstrap 5 Horizontal cards component
Responsive horizontal cards built with Bootstrap 5. Display content in a sleek, user-friendly layout with intuitive, responsive horizontal cards.
Basic example
Using a combination of grid and utility classes, cards can be made horizontal in a
mobile-friendly and responsive way. In the example below, we remove the grid gutters with
.g-0
and use .col-md-*
classes to make the card horizontal at the
md
breakpoint. Further adjustments may be needed depending on your card content.
![Trendy Pants and Shoes](https://mdbcdn.b-cdn.net/wp-content/uploads/2020/06/vertical.webp)
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="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>