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>

Try it yourself

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>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.

Syntax:

Width as Percentages:

Class

Description

Max Width:

Class

Description