In Bootstrap 5, height utility classes allow you to control the height of elements easily. These classes can be used to set fixed heights, relative heights, or responsive heights for elements.

Syntax:

h-{side?}

h: Indicates height.
value: The height value, which can be a percentage, fixed size, or responsive scale.

Height as Percentages:

Bootstrap includes predefined height classes that set the width as a percentage of the parent container:

Height Percentage (%)

25%

50%

100%

Class	Description
h-25	Height: 25% of the parent container.
h-50	Height: 50% of the parent container.
h-75	Height: 75% of the parent container.
h-100	Height: 100% of the parent container.
h-auto	Automatically adjusts to content.

Example

<h1>Height Percentage (%)</h1>

</div>

Try it yourself

Max Height:

Bootstrap also provides classes to limit the maximum height of elements:

Class	Description
mh-100	Max height: 100% of the parent.
mh-auto	Automatically adjusts height.

Example

<div class="mh-100 text-bg-info text-center p-2 mb-3" style="height:350px">Max height: 100%</div>

</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.