ckportfolio.com - Bootstrap Exploration: Layout Grid

Bootstrap Exploration: Layout Grid

Layout Grid

Arguably, one of Bootstrap's strongest features is its layout engine that allows developers to construct rigorous, responsive layouts with ease.

While you are encouraged to consult Bootstrap's exhaustive guide, you can simply remember that Bootstrap simply works in a 12-column grid. This means that you can go ahead and split the horizontal space into twelve parts and proceed with constructing different column permutations: you can make as many columns as you would like, as long as the column sizes add up to 12.

Note that the above example constructs a two-column layout, where the left column takes up 25% of the horizontal space (and the other, 75%).

Be advised that these "col-*" elements must be nested under "row" elements, and that you must start with a "container" element to indicate the start of a web page. Also, keep in mind that you can activate variable column sizes under different screen sizes by using Bootstrap-provided class names.

Finally: if you are curious about "mt-2" class name in the screenshot, note that the latest version of Bootstrap offers a short hand method to set up different margins and paddings.

Code Sample: HTML

<!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.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

        <title>Hello, world!</title>
    </head>
    <body>

        <div class="container">
            <div class="row mt-3">

                <div class="col-3">
                    <h1>Left</h1>
                </div>
                <div class="col-9">
                    <h1>Right</h1>
                </div>

            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    </body>
</html>
Fin