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

HTML
<!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.

Similar Reads

Using CSS Grid

We can create responsive column cards using CSS Grid, which makes it easy to create complex grid layouts. With CSS Grid, we can effortlessly create responsive column cards, making our design process easy....

Using Flexbox

Flexbox is a one-dimensional layout model that provides a more efficient way to distribute space among items in a container. Using Flexbox, we can easily create responsive column cards for our design needs....

Using Bootstrap Grid System

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....