Advertisement
Google Ad Slot: content-top
Bootstrap 5 Width
In Bootstrap 5, width utility classes provide an easy way to set the width of elements. These utilities can be used to control the width relative to the parent, viewport, or specific values.
Syntax:
w-{side?}
w: Indicates width.value: The width value, which can be a percentage, fixed size, or responsive scale.
Width as Percentages:
Bootstrap includes predefined width classes that set the width as a percentage of the parent container:
25%
50%
100%
Class |
Description |
|---|---|
w-25 |
Width: 25% of the parent container. |
w-50 |
Width: 50% of the parent container. |
w-75 |
Width: 75% of the parent container. |
w-100 |
Width: 100% of the parent container. |
w-auto |
Automatically adjusts to content. |
Example
<div class="w-25 bg-light border">25% width</div>
<div class="w-50 bg-light border">50% width</div>
<div class="w-100 bg-light border">100% width</div>
Max Width:
Bootstrap also provides classes to limit the maximum width of elements:
Class |
Description |
|---|---|
mw-100 |
Max width: 100% of the parent. |
mw-auto |
Automatically adjusts width. |
Example
<div class="mw-100 bg-info text-white text-center p-2 mb-3">Max Width 100%</div>