Grid systems in Bootstrap

Ethan Karla 446 28 Jul 2021

What are grid systems in Bootstrap?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 29 Jul 2021

The grid system in Bootstrap is a series of columns, rows, and containers to accommodate the layout and align the content inside it. These are built in flexbox properties and are fully responsive across all your devices.

Let us understand with the help of an example:

<!doctype html>

<html lang='en'>

<head>

    <!-- Required meta tags -->

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <!-- Bootstrap CSS -->

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <title>Hello, world!</title>

</head>

<body>

    <div class='container pt-4'>

        <div class='row'>

            <div class='col-sm bg-secondary text-light mx-1'>

                One of three columns

            </div>

            <div class='col-sm bg-secondary text-light mx-1'>

                One of three columns

            </div>

            <div class='col-sm bg-secondary text-light mx-1'>

                One of three columns

            </div>

        </div>

    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <!--

    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>

    -->

</body>

</html>

Hope this helps you to make your reasoning,

Happy Coding!

forum

Grid systems in Bootstrap

Can you answer this question?

1 Answers