How to use cards with grids and decks in Bootstrap.

Example:

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Bootstrap 5 Grid Cards:

<div class="row row-cols-2 row-cols-lg-4 gy-4 text-center">
	<div class="col">
		<div class="h-100">
			<div class="card shadow-sm h-100">
				<img class="card-img-top" src="https://via.placeholder.com/286x233" alt="Card image cap">
				<div class="card-body">
					<h5 class="card-title">Card title</h5>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
				<div class="card-footer bg-transparent border-0 mb-2 pt-0">
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="h-100">
			<div class="card shadow-sm h-100">
				<img class="card-img-top" src="https://via.placeholder.com/286x233" alt="Card image cap">
				<div class="card-body">
					<h5 class="card-title">Card title</h5>
					<p class="card-text">Some quick example text.</p>
				</div>
				<div class="card-footer bg-transparent border-0 mb-2 pt-0">
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="h-100">
			<div class="card shadow-sm h-100">
				<img class="card-img-top" src="https://via.placeholder.com/286x233" alt="Card image cap">
				<div class="card-body">
					<h5 class="card-title">Card title</h5>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
				<div class="card-footer bg-transparent border-0 mb-2 pt-0">
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="h-100">
			<div class="card shadow-sm h-100">
				<img class="card-img-top" src="https://via.placeholder.com/286x233" alt="Card image cap">
				<div class="card-body">
					<h5 class="card-title">Card title</h5>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
				<div class="card-footer bg-transparent border-0 mb-2 pt-0">
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>
		</div>
	</div>
</div>

Bootstrap 4 Card Decks:

<div class="card-deck text-center">
	<div class="card shadow-sm">
		<img class="card-img-top" src="https://via.placeholder.com/286x233" alt="Card image cap">
		<div class="card-body">
			<h5 class="card-title">Card title</h5>
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<div class="card-footer bg-transparent border-0 mb-2 pt-0">
			<a href="#" class="btn btn-primary">Go somewhere</a>
		</div>
	</div>
	<div class="card shadow-sm">
		<img class="card-img-top" src="https://via.placeholder.com/286x233" alt="Card image cap">
		<div class="card-body">
			<h5 class="card-title">Card title</h5>
			<p class="card-text">Some quick example text.</p>
		</div>
		<div class="card-footer bg-transparent border-0 mb-2 pt-0">
			<a href="#" class="btn btn-primary">Go somewhere</a>
		</div>
	</div>
	<div class="card shadow-sm">
		<img class="card-img-top" src="https://via.placeholder.com/286x233" alt="Card image cap">
		<div class="card-body">
			<h5 class="card-title">Card title</h5>
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<div class="card-footer bg-transparent border-0 mb-2 pt-0">
			<a href="#" class="btn btn-primary">Go somewhere</a>
		</div>
	</div>
	<div class="card shadow-sm">
		<img class="card-img-top" src="https://via.placeholder.com/286x233" alt="Card image cap">
		<div class="card-body">
			<h5 class="card-title">Card title</h5>
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<div class="card-footer bg-transparent border-0 mb-2 pt-0">
			<a href="#" class="btn btn-primary">Go somewhere</a>
		</div>
	</div>
</div>