Adding another box to an existing column using Bootstrap grid

equanimity 0
Viewed 25

I currently have a Bootstrap grid that looks as follows:

enter image description here

The code is:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous">

        <title>Example</title>
    </head>

    <body>
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="align-self-center">
                <h1>Box 1</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <div id="left-panel"  class="row justify-content-center">
                    <div class="align-self-center">
                    Box 2
                    </div>
                </div>
            </div>
            <div id="right-panel" class="col-6">
                <div class="row justify-content-center">
                    <div class="align-self-center">
                       Box 3
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

I would like to add a Box 4 to the grid, as seen below:

enter image description here

How would I amend my code to do this?

Thanks!

bootstrap-4 html
1 Answers

Total Grid is 12 so we need to separate as 3 columns (col-4) for three div

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous">

        <title>Example</title>
    </head>

    <body>
    <div class="container-fluid border border-dark">
        <div class="row justify-content-center">
            <div class="align-self-center">
                <h1>Box 1</h1>
            </div>
        </div>
        <div class="row border border-dark">
            <div class="col-4">
                <div id="left-panel"  class="row justify-content-center">
                    <div class="align-self-center">
                    Box 2
                    </div>
                </div>
            </div>
            <div id="right-panel" class="col-4">
                <div class="row justify-content-center">
                    <div class="align-self-center">
                       Box 3
                    </div>
                </div>
            </div>
            <div id="right-panel" class="col-4">
                <div class="row justify-content-center">
                    <div class="align-self-center">
                       Box 4
                    </div>
                </div>
            </div>

        </div>
    </div>
    </body>
</html>

Santhosh kumar P S0
Related