Bootstrap 5 Show Notation – GeeksforGeeks


<!doctype html>

<html lang="en">

 

<head>

    <hyperlink href=

    <script src=

    </script>

</head>

 

<physique>

    <h1 class="text-success ms-3">

        GeeksforGeeks

    </h1>

    <h3 class="ms-3">

        Bootstrap 5 Show Notation

    </h3>

    <div class="container mt-4">

        <div>On this instance:

            <p class="d-inline-block d-lg-block w-75

                      border border-success border-3

                      p-1 mt-2 bg-light">

                This half has an inline-block show in

                viewport above lg dimension

            </p>

            and we will see it begins on a brand new line

            with areas above and beneath it.

        </div>

        <hr>

        <div>On this instance:

            <p class="d-inline d-lg-inline-block w-75

                      border border-success

                      border-3 p-1 mt-2 bg-light">

                This half has an inline-block

                show in viewport above lg dimension

            </p>

            and we will see it takes up the width and peak

            values whereas staying an inline aspect.

        </div>

        <hr>

        <div>On this instance:

            <p class="d-block d-lg-inline w-50 h-75

                      border border-success

                      border-3 p-1 mt-2 bg-light">

                This half has an inline show

                in viewport above lg dimension

            </p>

            and we will see it doesn't matter what width and peak

            values it has it would not change

        </div>

        <hr>

        <p>The beneath instance reveals a flex container show</p>

        <div class="d-lg-flex gap-2 mt-2 text-light">

            <div class="bg-success w-25 border p-1">

                Column 1

            </div>

            <div class="bg-success w-25 border p-1">

                Column 2

            </div>

            <div class="bg-success w-25 border p-1">

                Column 3

            </div>

        </div>

    </div>

</physique>

</html>

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles