Advertisement
Google Ad Slot: content-top
Bootstrap 5 Height
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. |
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. |