How to use Bootstrap Grid System In CSS
Bootstrap is a popular CSS framework that provides a grid-based layout system for building responsive websites. Bootstrap’s grid system helps easily create responsive layouts for websites.
Example: Creating responsive column cards Using Bootstrap Grid System
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>
Responsive Column Cards with
Bootstrap Grid System
</title>
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="d-flex align-items-center
justify-content-center"
style="height: 100vh;">
<!-- Center the body vertically and horizontally -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card bg-primary text-white">
<div class="card-body">
Card 1
</div>
</div>
</div>
<div class="col-md-4">
<div class="card bg-success text-white">
<div class="card-body">
Card 2
</div>
</div>
</div>
<div class="col-md-4">
<div class="card bg-danger text-white">
<div class="card-body">
Card 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Create Responsive Column Cards with CSS
Column cards showcase articles, products, or user profiles attractively. Learning these techniques will help beginners and intermediate developers understand CSS better, creating responsive and attractive layouts. In this article, we’ll explore different ways to make column cards responsive with CSS.