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. |
Example
<div class="container mt-5">
<h1>Height Percentage (%)</h1>
<div style="height:200px;display:flex">
<div class="h-25 bg-primary text-white text-center p-2 mb-3">25%</div>
<div class="h-50 bg-success text-white text-center p-2 mb-3">50%</div>
<div class="h-100 bg-danger text-white text-center p-2 mb-3">100%</div>
</div>
</div>
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 style="height:300px;display:flex">
<div class="mh-100 text-bg-info text-center p-2 mb-3" style="height:350px">Max height: 100%</div>
</div>