Bootstrap5 Width

In Bootstrap 5, the width of elements can be controlled using predefined utility classes. These classes allow you to set the width as a percentage of the parent element or as a fixed width using specific values.

1. Width Classes

Bootstrap provides classes to set the width of an element relative to its parent container using percentage values.

<div class="w-25 bg-primary text-white p-2">Width 25%</div>
<div class="w-50 bg-secondary text-white p-2">Width 50%</div>
<div class="w-75 bg-success text-white p-2">Width 75%</div>
<div class="w-100 bg-danger text-white p-2">Width 100%</div>
<div class="w-auto bg-warning p-2">Auto Width</div>

Output:

2. Max-Width Classes

To restrict the maximum width of an element, Bootstrap provides .mw-100.

<img src="https://via.placeholder.com/400" class="mw-100" alt="Responsive Image">

Output:

Ensures the element does not exceed 100% of its parent container.

3. Responsive Widths (Breakpoint-Based Widths)

Bootstrap also allows setting different widths at different screen sizes using breakpoints.

<div class="w-100 w-md-50 w-lg-25 bg-dark text-white p-2">Responsive Width</div>

Output:

• .w-100 – Full width on small screens.
• .w-md-50 – 50% width on medium screens (≥768px).
• .w-lg-25 – 25% width on large screens (≥992px).