Height

Bootstrap 5 Height

Responsive Height built with Bootstrap 5. Examples of sizing, modal height, textarea height, line height & more.

Basic example

The red div below is 100px height and all the child element are relative to it.

Height 25%
Height 50%
Height 75%
Height 100%
Height auto
Edit in sandbox 
<div class="d-flex align-items-start w-100" style="max-width: 500px; min-height: 100px; background-color: rgba(255, 0, 0, 0.1)">
  <div class="h-25 d-inline-block col-2 mx-auto" style="background-color: rgba(0, 0, 255, 0.1)">
    Height 25%
  </div>
  <div class="h-50 d-inline-block col-2 mx-auto" style="background-color: rgba(0, 0, 255, 0.1)">
    Height 50%
  </div>
  <div class="h-75 d-inline-block col-2 mx-auto" style="background-color: rgba(0, 0, 255, 0.1)">
    Height 75%
  </div>
  <div class="h-100 d-inline-block col-2 mx-auto" style="background-color: rgba(0, 0, 255, 0.1)">
    Height 100%
  </div>
  <div class="h-auto d-inline-block col-2 mx-auto" style="background-color: rgba(0, 0, 255, 0.1)">
    Height auto
  </div>
</div>

Height 100vh

But here red div below is a representation of the client viewport and the pink one is a representation of the div which has a height of 100vh. You can get 100% view height in the element by adding to it .vh-100 class.

Viewport

container with vh-100

Edit in sandbox 
<div class="vh-100">container with vh-100</div>

Textarea height

If you want to change the default height of textarea just change rows html attribute e.g. rows="8" in textarea input element.

Edit in sandbox 
<!-- Textarea 8 rows height -->
<div data-mdb-input-init class="form-outline">
  <textarea class="form-control" id="textAreaExample2" rows="8"></textarea>
  <label class="form-label" for="textAreaExample2">Message</label>
</div>

<!-- Textarea 2 rows height -->
<div data-mdb-input-init class="form-outline">
  <textarea class="form-control" id="textAreaExample3" rows="2"></textarea>
  <label class="form-label" for="textAreaExample3">Message</label>
</div>

Line height

To change line height in your paragraph you can add bootstrap class starting from .lh-* then combaine it with proper size e.g. lh-sm.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, aspernatur! Harum id, quibusdam commodi cum, rerum dolores accusamus dolorum, officiis eaque quas qui quidem placeat magnam quod incidunt! Tempora vero reprehenderit facere neque hic fugit iure, ea adipisci harum totam?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, aspernatur! Harum id, quibusdam commodi cum, rerum dolores accusamus dolorum, officiis eaque quas qui quidem placeat magnam quod incidunt! Tempora vero reprehenderit facere neque hic fugit iure, ea adipisci harum totam?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, aspernatur! Harum id, quibusdam commodi cum, rerum dolores accusamus dolorum, officiis eaque quas qui quidem placeat magnam quod incidunt! Tempora vero reprehenderit facere neque hic fugit iure, ea adipisci harum totam?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, aspernatur! Harum id, quibusdam commodi cum, rerum dolores accusamus dolorum, officiis eaque quas qui quidem placeat magnam quod incidunt! Tempora vero reprehenderit facere neque hic fugit iure, ea adipisci harum totam?

Edit in sandbox 
<p class="lh-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, aspernatur! Harum id, quibusdam commodi cum, rerum dolores accusamus dolorum, officiis eaque quas qui quidem placeat magnam quod incidunt! Tempora vero reprehenderit facere neque hic fugit iure, ea adipisci harum totam?</p>
<p class="lh-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, aspernatur! Harum id, quibusdam commodi cum, rerum dolores accusamus dolorum, officiis eaque quas qui quidem placeat magnam quod incidunt! Tempora vero reprehenderit facere neque hic fugit iure, ea adipisci harum totam?</p>
<p class="lh-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, aspernatur! Harum id, quibusdam commodi cum, rerum dolores accusamus dolorum, officiis eaque quas qui quidem placeat magnam quod incidunt! Tempora vero reprehenderit facere neque hic fugit iure, ea adipisci harum totam?</p>
<p class="lh-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, aspernatur! Harum id, quibusdam commodi cum, rerum dolores accusamus dolorum, officiis eaque quas qui quidem placeat magnam quod incidunt! Tempora vero reprehenderit facere neque hic fugit iure, ea adipisci harum totam?</p>

Modal height

To change height of the modal add .h-100 to the .modal-content then just set height of modal in .modal-dialog e.g. .h-50.

Edit in sandbox 
<!-- Button trigger modal -->
<button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog h-50">
    <div class="modal-content h-100">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
        <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>