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.
<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
<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.
<!-- 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?
<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.
<!-- 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>