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.

Terms Disclaimer About Us Contact Us