Core Code
Core Code Modern Dev Handbook

Height Utilities

Set element height using Bootstrap h-* classes.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<div class="d-flex gap-2" style="height:200px">

<div class="bg-primary text-white h-25 p-2">25%</div>
<div class="bg-secondary text-white h-50 p-2">50%</div>
<div class="bg-success text-white h-75 p-2">75%</div>
<div class="bg-dark text-white h-100 p-2">100%</div>

</div>

</div>

</body>
</html>

More BS5 Sizing Examples (7)

example Width Utilities open example example Viewport Height open example example Viewport Width open example example Max Width Utility open example example Card Width Control open example example Full Width Button open example example Responsive Image Width open example