ApiDemos™Bootstrap 5 Sizing
Bootstrap 5 Width
The width is set using the w-*(.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100) class.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="w-25 bg-warning">The width is 25%</div>
<div class="w-50 bg-warning">The width is 50%</div>
<div class="w-75 bg-warning">The width is 75%</div>
<div class="w-100 bg-warning">The width is 100%</div>
<div class="w-auto bg-warning">Automatically set the width</div>
<div class="mw-100 bg-warning">Maximum width is 100%</div>
</div>
</body>
</html>Output:
Bootstrap 5 Height
The height is set using the h-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100) class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-warning">The height is 25%</div>
<div class="h-50 d-inline-block p-2 bg-warning">The height is 50%</div>
<div class="h-75 d-inline-block p-2 bg-warning">The height is 75%</div>
<div class="h-100 d-inline-block p-2 bg-warning">The height is 100%</div>
<div class="h-auto d-inline-block p-2 bg-warning">Automatically set height</div>
<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Maximum height is 100%</div>
</div>
</div>
</body>
</html>Output:
