Row and Column

In this tutorial, we will delve into the basics of using Bootstrap rows and columns to create responsive, flexible, and well-structured layouts. The grid system in Bootstrap uses a series of containers, rows, and columns to layout and align content.

The Bootstrap Grid System

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page. It’s a powerful tool to create complex layouts with ease. The key elements are:

.container or .container-fluid: Wraps the entire grid and ensures it is centered and has proper padding.
.row: Creates a horizontal group of columns.
.col: Defines the column within a row.

Creating a Basic Grid

To start using the grid system, we need a container, a row, and columns inside the row.

Example:

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In this example, three columns are created within a single row. Each column will automatically have equal width.

Specifying Column Widths

You can specify the width of each column by using the grid classes like .col-1, .col-2, up to .col-12.

Example:

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Responsive Columns

Bootstrap allows you to create responsive layouts that change based on the screen size. You can use different column classes for different breakpoints.

Example:

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Nesting Columns

You can nest columns inside other columns to create complex layouts.

Example:

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Offsetting Columns

Offsetting columns allows you to create space between columns without using empty columns.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Offsetting Columns - codeswithpankaj.com</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-4 offset-4">
                <p>Offset Column (centered)</p>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Conclusion

Understanding and utilizing Bootstrap's grid system is essential for creating responsive and structured web layouts. By mastering rows and columns, you can design complex and flexible layouts with ease.

For more tutorials and examples, visit codeswithpankaj.com.

PreviousContainer

Last updated 2 months ago