Bootstrap 5 Sizing

Last Updated : 04 Apr, 2024

Bootstrap 5 Sizing utility classes adjust element dimensions relative to the viewport or parent container. Options include percentage-based widths, and viewport-relative dimensions, facilitating responsive design for flexible layouts across various screen sizes.

Bootstrap 5 Sizing Classes

Class Name	Description
Relative to the Parent	Sets the height and width of the element relative to its parent.
Relative to the Viewport	Sets the height and width of the element relative to the viewport.
Sass	Sass sizing utilities declared in the Utility API.

Syntax:

<div class="w-25">
    ...
</div>

Examples of Bootstrap 5 Sizing

Example 1: In this example, we used the sizing classes relative to the parent to set the height and width of the element.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Sizing</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />

    <!-- Bootstrap Javascript -->   
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div class="my-4">
            
            <strong>Bootstrap 5 Sizing</strong>
        </div>

        <h5>Relative to Parent Width</h5>
        <div class="bg-dark">
            <div class="w-100 p-2 mb-2 
                text-bg-success">
                Width = 100% of the parent
            </div>
            <div class="w-auto p-2 mb-2 text-bg-success">
                Width = auto</div>
            <div class="w-25 p-2 mb-2 text-bg-success">
                Width = 25% of the parent</div>
            <div class="w-50 p-2 mb-2 text-bg-success">
                Width = 50% of the parent</div>
            <div class="w-75 p-2 mb-2 text-bg-success">
                Width = 75% of the parent</div>
        </div>

        <h5>Relative to Parent Height</h5>
        <div class="bg-dark" style="height:200px;">
            <div class="h-100 w-auto p-3 text-bg-success 
                d-inline-block">100% Height</div>
            <div class="h-50 w-auto p-3 text-bg-success 
                d-inline-block">50% Height</div>
            <div class="h-25 w-auto p-3 text-bg-success 
                d-inline-block">25% Height</div>
            <div class="h-auto w-auto p-3 text-bg-success 
                d-inline-block">Auto Height</div>
            <div class="h-75 w-auto p-3 text-bg-success 
                d-inline-block">75% Height</div>
        </div>
    </div>
</body>

</html>

Output:

Bootstrap 5 Sizing Example Output

Example 2: In this example, we used the sizing classes relative to the viewport to set the height and width of an element.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            http-equiv="X-UA-Compatible"
            content="IE=edge"
        />
        <meta
            name="viewport"
            content="width=device-width, 
                     initial-scale=1.0"
        />
        <title>Bootstrap 5 Sizing</title>

        <!-- Bootstrap CSS -->
        <link
            rel="stylesheet"
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
        />

        <!-- Bootstrap Javascript -->
        <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">

        </script>
    </head>

    <body>
        <div class="container">
            <div class="my-4">
                <strong
                    >Bootstrap 5 Sizing</strong
                >
            </div>

            <h5>
                Relative to Viewport Height And
                Width
            </h5>

            <div
                class="min-vw-100 
                       p-3 
                       text-bg-success 
                       d-inline-block"
            >
                Min VW 100
            </div>
            <div
                class="vw-100 mt-3 
                       p-3 text-bg-success 
                       d-inline-block"
            >
                VW 100
            </div>
            <div
                class="min-vh-100 
                       mt-3 p-3 
                       text-bg-success 
                       d-inline-block"
            >
                Min VH 100
            </div>
            <div
                class="vh-100 p-3 
                       text-bg-success 
                       d-inline-block"
            >
                VH 100
            </div>
        </div>
    </body>
</html>