Container, Row, and Column: Understanding the structure

Bootstrap 4 is a popular framework for building responsive, mobile-first websites. It uses a grid system to create layouts, which is based on rows and columns. Here’s an explanation of how rows and columns work in Bootstrap 4, with examples.

Bootstrap 4 Grid System

The grid system in Bootstrap 4 is made up of 12 columns, and it's based on flexbox. It allows you to create responsive layouts where the columns can adjust themselves based on the screen size.

Rows

Rows are horizontal groups of columns.
The .row class is used to create a row.
All columns must be placed within a .row.

Columns

Columns are the building blocks of the grid.
The .col-* classes are used to specify the column widths.
Column widths are specified as numbers from 1 to 12.

Example: Basic Row and Column

Here's a basic example of a row with three equal-width columns:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Grid Example</title>
    <link rel="stylesheet" href="https://maxcdn.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>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In this example, the .row class creates a row, and each .col class creates an equal-width column. Because no specific width is provided, each column takes up an equal portion of the row.

Example: Specified Column Widths

You can specify the width of each column by using the .col-* classes. The following example shows a row with three columns of different widths:

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

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In this example, the first column takes up 4 out of 12 parts of the row, while the second column takes up 8 out of 12 parts.

Example: Responsive Columns

You can make your columns responsive by using the responsive breakpoint classes. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Grid Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-8">Column 1 (12/12 on small screens, 8/12 on medium and larger screens)</div>
            <div class="col-6 col-md-4">Column 2 (6/12 on small screens, 4/12 on medium and larger screens)</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In this example:

On small screens (col-12 and col-6), the first column takes up the entire row, and the second column takes up half of the row.
On medium and larger screens (col-md-8 and col-md-4), the first column takes up 8 out of 12 parts of the row, and the second column takes up 4 out of 12 parts.

Conclusion

Bootstrap 4's grid system is a powerful tool for creating responsive layouts. By understanding how to use rows and columns, you can create complex layouts that adapt to different screen sizes.

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