Position and Overflow Class in Bootstrap CSS tutorial

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Position Overflow Class Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/Position_Overflow_Class_Bootstrap.css">
</head>

<body>
    <!--How to make Website Layout with Bootstrap ?-->
    <!--3 Bootstrap CSS Classes : Container, Row, Col-->
    <!--When use "Col" Class ? Answer: For Equal Width Div Tag-->
    <!--Total width of Grid in Every row is 12-->
    <!--Col Class for different Break Points-->
    <!--Extra Large:col-lg, Large:col-lg, Medium:col-md, Small:col-sm, Extra Small-->
    <!--Total width of Column Grid must be maximum 12 in one Row-->
    <div class="container">
        <div class="clearfix" style="border:3px solid blue">
            <div class="blue w-25 fixed-top">
                <!--<div class="blue w-25 fixed-bottom">-->
                <h2>Col A</h2>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>

            <div class="green w-50 float-right">
                <h2>Col A</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui officiis aut adipisci, mollitia, eius
                    cupiditate eveniet perspiciatis dolor eligendi corporis quae! Ea, dignissimos accusamus dolore ad
                    repellat, itaque reprehenderit dolores consectetur, odit quasi mollitia incidunt. Cum, maxime?
                    Doloribus doloremque sequi eaque, recusandae tenetur ducimus officiis, suscipit quis ipsa ut
                    voluptate cupiditate fuga dolorem fugiat explicabo vitae. Culpa laudantium, blanditiis odit magnam
                    perferendis itaque laborum maxime quo quae. Fugit, nostrum sapiente! Voluptatum, perspiciatis
                    sapiente commodi tenetur repellat non ipsam beatae magni, iure ut dolore deserunt, et ea delectus
                    laudantium earum nisi quibusdam. Saepe accusantium voluptas quos reprehenderit, quia placeat sequi
                    corrupti suscipit rerum? Ea molestiae cum velit minus dolorem ex libero quo autem beatae nemo, quia
                    veritatis tempora dignissimos eaque sunt, reiciendis similique? Aliquid quae sapiente doloremque
                    error quisquam eum exercitationem dicta, tempore molestiae! Esse ea nobis ipsa saepe magnam sapiente
                    ad omnis officia asperiores similique voluptatibus fugit aspernatur tempora natus dicta a assumenda
                    voluptates sint nesciunt eligendi autem, libero possimus optio vero. Sit accusamus voluptatum iste
                    placeat laboriosam veritatis magni veniam, ipsam dolorum. Eveniet, voluptatem rem explicabo soluta
                    tempore laboriosam amet quia veniam itaque illum dolores reiciendis voluptate mollitia rerum
                    necessitatibus atque perferendis aliquam eligendi beatae repellat inventore modi? Molestiae.</p>
            </div>
        </div>
    </div><br><br><br>

    <div class="container">
        <div class="row">
            <div class="w-50 pink overflow-auto" style="height: 150px">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam corporis quia inventore aut
                necessitatibus corrupti blanditiis perspiciatis quis, praesentium debitis voluptas, natus excepturi at
                officiis ut itaque mollitia, molestias rerum beatae numquam aliquid quidem! Libero praesentium enim,
                neque officiis dolorem quae facere tempora itaque. Inventore cupiditate nisi porro soluta dolores vero
                facilis totam libero non fugiat laboriosam natus repudiandae, repellat necessitatibus? Beatae veritatis
                deserunt suscipit est tenetur blanditiis cumque voluptas molestiae, voluptatum maxime facere natus
                excepturi, perferendis fugiat laborum iure praesentium cum totam nisi velit neque in ratione iusto
                eligendi. Quia unde fugit reiciendis porro minus minima quis magnam odit?
            </div>
        </div>
        <div class="clearfix" style="border:3px solid blue">
            <div class="blue w-25 sticky-top">
                <h2>Sticky Top</h2>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto aliquid quisquam culpa porro error
                ex at quo natus voluptatem minus.
            </div>

            <div class="green w-50 float-right">
                <h2>Col CD</h2>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident aut, neque odio amet id, alias
                placeat quis numquam nemo culpa asperiores reiciendis mollitia nulla cum consequuntur. Cupiditate hic
                pariatur, libero blanditiis, voluptates beatae eius ducimus fugiat nostrum quo sequi debitis error iusto
                aut odit mollitia in asperiores laudantium ipsum minus corporis vitae! Soluta iusto dignissimos,
                deserunt reprehenderit quia cum magni at, aut eius consectetur nesciunt id suscipit vitae? Doloremque
                reprehenderit adipisci accusantium nostrum vel modi pariatur a recusandae eveniet corporis nulla
                voluptas deserunt exercitationem ea quis, facilis perspiciatis cum incidunt? Deleniti ducimus natus
                cumque, dignissimos nesciunt earum fugit labore, provident, ratione necessitatibus animi accusamus
                dolore? Quibusdam numquam eos alias, autem vero sed ratione dignissimos rerum at voluptate ad? Quidem
                doloremque ea deleniti harum inventore laudantium quae dignissimos molestias fugit amet officiis maiores
                consectetur quam ipsam mollitia, consequatur dolorem molestiae voluptate sint. Neque, aperiam facere
                distinctio accusantium sapiente numquam dolorem quibusdam, provident unde praesentium laudantium
                veritatis vitae tenetur ratione quaerat ex architecto nisi omnis qui eligendi error voluptatum natus.
                Expedita repellat asperiores aut, doloremque, cupiditate nisi nostrum adipisci voluptatibus eos dolorum
                fugiat quidem odit reiciendis voluptas corporis beatae iure. Magnam magni atque blanditiis
                exercitationem obcaecati sunt iure dolor accusantium dolorem a?
            </div>
        </div>
    </div><br><br><br>

    <div class="container">
        <div class="clearfix" style="border:3px solid blue">
            <div class="blue w-25 fixed-bottom">
                <h2>Col AB</h2>
                Lorem ipsum dolor sit amet.
            </div>

            <div class="green w-50 float-right">
                <h2>Col BC</h2>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim sapiente, fugiat, quisquam voluptatum
                repudiandae nobis ea consequuntur quam earum tempore molestias! Fugiat maiores provident eveniet nobis
                quidem adipisci sequi sunt autem possimus quasi fugit, tenetur nam exercitationem, dolorum nostrum
                veritatis at impedit expedita dicta illo recusandae repellendus esse consequuntur soluta. Maxime,
                numquam? Blanditiis itaque perspiciatis molestias? Necessitatibus quibusdam error iure, labore sint
                sequi voluptates quod nostrum eum temporibus soluta nesciunt cum ducimus consectetur! Quia, ut molestiae
                vel sunt molestias possimus pariatur! Soluta nam adipisci, ea quod nostrum, deserunt possimus, ducimus
                ipsa maiores numquam perspiciatis nulla sit reprehenderit. Ipsam rem nemo id! Assumenda dolorem, eius
                tempora enim ex aliquid sunt voluptatibus numquam, iure et, neque minima dolores non! Deleniti
                blanditiis quas tempora officiis libero odio quod distinctio ab, reprehenderit praesentium doloremque
                cupiditate saepe consequuntur placeat temporibus, earum hic a animi repellendus commodi perspiciatis
                minus porro! Deleniti mollitia iste quasi dignissimos voluptates blanditiis, expedita saepe? Maxime sint
                quibusdam laboriosam tempore nostrum, illo iure, cumque quae soluta deleniti amet! Consequuntur, earum
                magni totam maiores quos nobis ipsum recusandae fugiat consequatur delectus officia voluptatum culpa
                voluptatibus in enim distinctio illo accusamus nostrum amet! Distinctio ipsum aliquid commodi
                temporibus! Sed commodi mollitia vitae dolorum. Quibusdam.
            </div>
        </div>
    </div><br><br><br>

    <!--<div class="container">
        <div class="clearfix" style="border:3px solid blue">
            <div class="blue w-25 fixed-bottom fixed-top">
                <h2>Col ABC</h2>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, iste!
            </div>
        </div>
    </div>-->
</body>

</html>

Below File is css/Position_Overflow_Class_Bootstrap.css File.
.container {
    border: 5px solid #000000;
}

.row {
    border: 3px solid #ff0000;
}

.pink {
    background: #ffc0cb;
}

.orange {
    background: #f39c12;
}

.blue {
    background: #4aa6ee;
}

.green {
    background: #9acd32;
}