Sizing utilities control the width and height of elements using Bootstrap classes.

They are useful for:

• Setting an element to a percentage width.
• Setting an element to a percentage height.
• Making an element use the full available width.
• Limiting an element to the parent's maximum width.
• Creating viewport-based layouts.
• Building responsive cards, images, forms, and containers.

The w-25 class sets an element's width to 25% of its containing block.

<div class="w-25 bg-primary text-white p-3">

    25% Width

</div>

The actual rendered width depends on the width of the parent element.

The w-50 class sets the width to 50% of the containing block.

<div class="w-50 bg-success text-white p-3">

    50% Width

</div>

This utility is useful for creating half-width sections.

The w-75 class sets the element's width to 75% of its containing block.

<div class="w-75 bg-warning p-3">

    75% Width

</div>

The w-100 class sets the element's width to 100% of its containing block.

<div class="w-100 bg-danger text-white p-3">

    100% Width

</div>

It is commonly used for full-width buttons, images, and sections.

The w-auto class sets the width to auto.

<div class="w-auto bg-light p-3">

    Auto Width

</div>

The browser determines the element's width according to normal CSS layout rules.

Several width utilities can be used together in a demonstration.

<div class="w-25 p-2 bg-primary text-white">
    25%
</div>

<div class="w-50 p-2 bg-success text-white">
    50%
</div>

<div class="w-75 p-2 bg-info text-white">
    75%
</div>

<div class="w-100 p-2 bg-danger text-white">
    100%
</div>

The h-25 class sets an element's height to 25% of the height of its containing block.

<div
class="h-25
bg-primary
text-white
p-3">

    25% Height

</div>

Percentage height works only when the containing block has an appropriate defined height.

The h-50 class sets an element's height to 50% of the containing block.

<div
class="h-50
bg-success
text-white
p-3">

    50% Height

</div>

The h-75 class sets an element's height to 75% of the containing block.

<div
class="h-75
bg-info
text-white
p-3">

    75% Height

</div>

The h-100 class sets an element's height to 100% of its containing block.

<div
class="h-100
bg-warning
p-3">

    100% Height

</div>

Like percentage width and height utilities, the parent needs an appropriate height for percentage height to have the intended effect.

The h-auto class sets the height to auto.

<div class="h-auto p-3 bg-light">

    Automatic Height

</div>

The browser determines the height according to the content and normal layout rules.

The mw-100 class sets max-width: 100%.

<img
src="image.jpg"
class="mw-100"
alt="Example image">

It prevents the element from becoming wider than its containing block.

The mh-100 class sets max-height: 100%.

<div class="mh-100">

    Content

</div>

It limits the maximum height of an element to 100% of its containing block.

Sizing utilities are useful when controlling the width of images.

<img
src="image.jpg"
class="w-100"
alt="Responsive image">

The image takes 100% of the available width of its containing block.

For responsive images, Bootstrap's img-fluid class is also commonly used.

<img
src="image.jpg"
class="img-fluid"
alt="Responsive image">

The w-100 class can make a button fill the available width.

<button
class="btn btn-primary w-100">

    Submit

</button>

This is useful for full-width buttons in forms and mobile layouts.

Sizing utilities can be used with form controls.

<input
type="text"
class="form-control w-75"
placeholder="Enter your name">

The input occupies 75% of its containing block.

You can control the width of Bootstrap cards using sizing utilities.

<div class="card w-50">

    <div class="card-body">

        <h4 class="card-title">
            Course Card
        </h4>

        <p class="card-text">
            Learn Bootstrap.
        </p>

    </div>

</div>

Bootstrap also provides viewport width utilities.

<div class="vw-100">

    Full Viewport Width

</div>

The vw-100 class sets the width to 100% of the viewport width.

The vh-100 class sets an element's height to 100% of the viewport height.

<section class="vh-100">

    Full Screen Section

</section>

It is useful for full-screen sections, landing pages, and application layouts.

The min-vw-100 utility sets the minimum width of an element to 100% of the viewport width.

<div class="min-vw-100">

    Minimum Viewport Width

</div>

This can be useful for sections that should span at least the entire viewport width.

The min-vh-100 utility sets the minimum height to 100% of the viewport height.

<section class="min-vh-100">

    Full Height Section

</section>

Unlike vh-100, the minimum height can grow if the content requires more space.

Sizing utilities can be combined with Bootstrap containers.

<div class="container">

    <div class="w-50 bg-light p-4">

        Half Width Content

    </div>

</div>

The percentage width is calculated relative to the element's containing block.

Sizing utilities can be combined with Flexbox utilities.

<div class="d-flex gap-3">

    <div class="w-50 p-3 bg-primary text-white">

        Left Section

    </div>

    <div class="w-50 p-3 bg-success text-white">

        Right Section

    </div>

</div>

Flexbox behavior can affect how available space is distributed, so percentage sizing should be tested in the actual layout.

Bootstrap sizing utilities can be combined with responsive display utilities.

<div
class="w-100
w-md-75">

    Responsive Width

</div>

Avoid these common mistakes:

• Assuming percentage height always works without a defined parent height.
• Using w-100 when the parent layout does not provide the desired available width.
• Confusing width with max-width.
• Using viewport sizing when content should stay inside a container.
• Forgetting that viewport units are based on the viewport rather than the parent.
• Using too many fixed dimensions in responsive layouts.
• Ignoring how Flexbox or Grid affects available space.

Responsive images should generally be allowed to shrink when the viewport becomes smaller.

<img
src="photo.jpg"
class="img-fluid"
alt="Responsive photo">

The img-fluid class applies responsive sizing behavior so the image does not overflow its containing block.

You can also combine it with sizing utilities when necessary.

<img
src="photo.jpg"
class="img-fluid w-100"
alt="Full width photo">

A full-screen section can be created with viewport height utilities.

<section
class="min-vh-100
d-flex
align-items-center
justify-content-center">

    <div class="text-center">

        <h1>
            Welcome
        </h1>

        <p>
            Full Screen Section
        </p>

    </div>

</section>

Here, min-vh-100 provides a minimum height equal to the viewport height while Flexbox centers the content.

The following example creates a card with a controlled width.

<div class="container">

    <div
    class="card w-100 mx-auto">

        <div class="card-body">

            <h3>
                Bootstrap Course
            </h3>

            <p>
                Learn Bootstrap step by step.
            </p>

            <button
            class="btn btn-primary">

                Start Learning

            </button>

        </div>

    </div>

</div>

Using w-100 makes the card fill the available width of its containing block.

This example combines width, minimum viewport height, Flexbox, and responsive layout utilities.

<section
class="min-vh-100
d-flex
align-items-center
justify-content-center
p-4">


    <div
    class="card w-100
    text-center">


        <div class="card-body p-5">


            <h1>
                Bootstrap Sizing
            </h1>


            <p class="mb-4">

                Create responsive layouts
                using Bootstrap sizing
                utilities.

            </p>


            <div
            class="d-flex
            flex-column
            gap-2">


                <button
                class="btn btn-primary
                w-100">

                    Start Course

                </button>


                <button
                class="btn btn-outline-secondary
                w-100">

                    View Lessons

                </button>


            </div>


        </div>


    </div>


</section>