Bootstrap 5 Cards Horizontal is used to make the card horizontal so the image and content can be placed side by side. By default, the image, and the text content are stacked vertically and we have to change some settings to set them beside one another. To make it horizontal we have to use a grid class and have image and text content in columns in a row and reduce the grid gutters to zero.
Prerequisite: Bootstrap 5 Card layouts, and Layout Gutters.
Bootstrap 5 Cards Horizontal classes:
- col-md-*: This class is used to make the card horizontal at the md breakpoint.
- g-0: This class is used to define the grid gutters as 0, so that there are no gap between the columns.
Note: * can take values from 0,1, 2, 3 and so on.
Syntax:
<div class="card">
<div class="row g-0">
<div class="col">
<img src="..." alt="...">
</div>
<div class="col-md-*">
<div class="card-body">
....
</div>
</div>
</div>
</div>Example 1: This example below demonstrates the Horizontal Cards in action and a couple of them beside each other.
<!doctype html> <html lang="en">
<head>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap5 Cards Horizontal
</h4>
<div class="container d-flex mt-4 p-4">
<div class="card mb-3" style="max-width:540px;">
<div class="row g-0">
<div class="col-md-6">
<img src=
class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">
Data Structures
</h5>
<p class="card-text">
A data structure is a storage that is
used to store and organize data.
</p>
<p class="card-text">
<small class="text-muted">
Last updated now
</small>
</p>
</div>
</div>
</div>
</div>
<div class="card mb-3" style="max-width:540px;">
<div class="row g-0">
<div class="col-md-6">
<img src=
class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">Algorithms</h5>
<p class="card-text">
Algorithm refers to a sequence of
finite steps to solve a particular problem.
</p>
<p class="card-text">
<small class="text-muted">
Last updated now
</small>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Cards Horizontal
Example 2: The code below demonstrates how we can add a card in a modal.
<!doctype html> <html lang="en">
<head>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4 text-success">GeeksforGeeks</h1>
<h4 class="ms-4">Bootstrap 5 Cards Horizontal</h4>
<div class="container">
<button type="button" class="btn btn-success mt-4" data-bs-toggle="modal" data-bs-target="#cardModal">
Launch Modal
</button>
<div class="modal fade" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cardModalLabel">
This Modal Contains a Card
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container d-flex mt-4 p-4">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-6">
<img src=
class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">
Data Structures
</h5>
<p class="card-text">
A data structure is a storage that is
used to store and organize data.
</p>
<p class="card-text">
<small class="text-muted">
Last updated now
</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">
Ok, I Got it!
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Cards Horizontal
Reference: https://getbootstrap.com/docs/5.0/components/card/#horizontal