<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap - Layout</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>

    <div class="container">


        <div class="row mb-4" style="height:10px;">

            <div class="col-1 bg-primary text-center text-white border">1</div>
            <div class="col-1 bg-primary text-center text-white border">2</div>
            <div class="col-1 bg-primary text-center text-white border">3</div>
            <div class="col-1 bg-primary text-center text-white border">4</div>
            <div class="col-1 bg-primary text-center text-white border">5</div>
            <div class="col-1 bg-primary text-center text-white border">6</div>
            <div class="col-1 bg-primary text-center text-white border">7</div>
            <div class="col-1 bg-primary text-center text-white border">8</div>
            <div class="col-1 bg-primary text-center text-white border">9</div>
            <div class="col-1 bg-primary text-center text-white border">10</div>
            <div class="col-1 bg-primary text-center text-white border">11</div>
            <div class="col-1 bg-primary text-center text-white border">12</div>

        </div>

        <div class="row mb-3" style="height:100px;">

            <div class="col-1 bg-primary text-center text-white">
                col-1
            </div>

            <div class="col-2 bg-success text-center text-white">
                col-2
            </div>

            <div class="col-9 bg-secondary text-center text-white">
                col-9
            </div>

        </div>

        <div class="row mb-3" style="height:100px;">

            <div class="col-4 bg-primary text-center text-white">
                col-4
            </div>

            <div class="col-4 bg-success text-center text-white">
                col-4
            </div>

            <div class="col-4 bg-secondary text-center text-white">
                col-4
            </div>

        </div>

        <div class="row mb-5" style="height:100px;">

            <div class="col-6 offset-6 bg-primary text-center text-white">
                col-6
            </div>

        </div>

        <div class="row mb-5" style="height: 400px;">

            <div class="col-6 bg-warning border border-danger"></div>

            <div class="col-6 bg-warning border border-danger"></div>

        </div>

    </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>