Grid Classes: col-, col-sm-, col-md-, col-lg-, col-xl-

In Bootstrap 4, the grid system is a powerful and flexible layout system based on a 12-column layout. It enables you to design responsive web pages with ease. Here are the key classes and concepts of the Bootstrap 4 grid system, along with examples:

Basic Grid Classes

Container
- .container: Provides a responsive fixed-width container.
- .container-fluid: Provides a full-width container, spanning the entire width of the viewport.
Row
- .row: Used to create a horizontal group of columns.
Columns
- .col: Automatically adjusts to equal width of the columns in a row.
- .col-[number]: Specifies the number of columns to span (e.g., .col-6 for half the width).
- .col-[breakpoint]-[number]: Specifies the number of columns to span for a specific breakpoint (e.g., .col-md-4).

Breakpoints

.col-sm-[number]: For small devices (≥576px)
.col-md-[number]: For medium devices (≥768px)
.col-lg-[number]: For large devices (≥992px)
.col-xl-[number]: For extra large devices (≥1200px)

Examples

Basic Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">Column 1</div>
            <div class="col">Column 2</div>
            <div class="col">Column 3</div>
        </div>
    </div>
</body>
</html>

In this example, each column will take up an equal part of the row.

Specifying Column Width

<div class="container">
    <div class="row">
        <div class="col-4">Column 1 (4/12)</div>
        <div class="col-4">Column 2 (4/12)</div>
        <div class="col-4">Column 3 (4/12)</div>
    </div>
</div>

Each column takes up one-third of the row.

Responsive Columns

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">Responsive Column 1</div>
        <div class="col-sm-6 col-md-4 col-lg-3">Responsive Column 2</div>
        <div class="col-sm-6 col-md-4 col-lg-3">Responsive Column 3</div>
        <div class="col-sm-6 col-md-4 col-lg-3">Responsive Column 4</div>
    </div>
</div>

Here, each column adjusts its width based on the screen size:

Small devices: 50% width (6/12)
Medium devices: 33.33% width (4/12)
Large devices: 25% width (3/12)

Offsetting Columns

<div class="container">
    <div class="row">
        <div class="col-md-4 offset-md-4">Centered Column</div>
    </div>
</div>

This example centers a column in the middle of the row by offsetting it.

Nesting Columns

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">Nested Column 1</div>
                <div class="col-md-6">Nested Column 2</div>
            </div>
        </div>
        <div class="col-md-4">Column 2</div>
    </div>
</div>

Nesting allows you to create more complex layouts within a column.

These examples cover the basic usage of the Bootstrap 4 grid system. By combining different classes and breakpoints, you can create a wide variety of responsive layouts.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us