Bootstrap5 Height

In Bootstrap 5, height utility classes allow you to control the height of elements using predefined classes. You can set heights as a percentage, viewport-based units, or fixed values to make your design responsive and flexible.

1. Height Classes

Bootstrap provides percentage-based height classes to adjust an element’s height relative to its parent container.

  <div style="height:150px;background-color:#b3b3b3">
    <div class="h-25 bg-primary text-white p-2">Height 25%</div>
    <div class="h-50 bg-secondary text-white p-2">Height 50%</div>
    <div class="h-75 bg-success text-white p-2">Height 75%</div>
    <div class="h-100 bg-danger text-white p-2">Height 100%</div>
    <div class="h-auto bg-warning p-2">Auto Height</div>
  </div>

Output:

2. Max-Height Classes

To restrict the maximum width of an element, Bootstrap provides .mw-100.

<img src="https://via.placeholder.com/400x600" class="mh-100" alt="Responsive Image">

Output:

.mh-100 – Ensures the element does not exceed 100% of its parent container’s height.

3. Responsive Height (Breakpoint-Based Heights)

Bootstrap allows setting different heights for different screen sizes using breakpoints.

<div class="h-100 h-md-50 h-lg-25 bg-dark text-white p-2">Responsive Height</div>

Output:

• .h-100 – Full height on small screens.
• .h-md-50 – 50% height on medium screens (≥768px).
• .h-lg-25 – 25% height on large screens (≥992px)