”;
This chapter discusses about Bootstrap sizing. Sizing allows you to adjust the height and width of an element through the utility classes.
Relative to the parent
The width and height utilities are created using the utility API found in _utilities.scss. They come with default support for values like 25%, 50%, 75%, 100%, and auto. You can customize these values to generate different utilities.
Relative to the width
The w-25, w-50, w-75, w-100, and w-auto classes define the width of each div element.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Sizing</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="w-25 p-3 text-bg-primary">25% width</div>
<div class="w-50 p-3 text-bg-secondary">50% width</div>
<div class="w-75 p-3 text-bg-warning">75% width</div>
<div class="w-100 p-3 text-bg-info">Full width (100%)</div>
<div class="w-auto p-3 text-bg-danger">Auto width</div>
</body>
</html>
Relative to the height
The classes h-25, h-50, h-75, h-100, and h-auto are responsible for setting the height of each div element.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Sizing</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="text-bg-light" style="height: 100px;">
<div class="h-25 d-inline-block text-bg-primary text-center" style="width: 150px;">25% Height</div>
<div class="h-50 d-inline-block text-bg-secondary text-center" style="width: 150px;">50% Height</div>
<div class="h-75 d-inline-block bg-warning text-center" style="width: 150px;">75% Height</div>
<div class="h-100 d-inline-block text-bg-info text-center" style="width: 150px;">100% Height </div>
<div class="h-auto d-inline-block text-bg-danger text-center" style="width: 150px;">Auto Height</div>
</div>
</body>
</html>
Use class mw-100 to set the max-width: 100%. In the following example, we demonstrate the use of this class:
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Sizing</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="text-bg-light" style="width: 50%; height: 100px;">
<div class="mw-100 text-bg-warning text-center" style="width: 200%;">Maximum width 100%</div>
</div>
</body>
</html>
Use class mh-100 to set the max-height: 100%. In the following example, we demonstrate the use of this class:
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Sizing</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="text-bg-light" style="height: 100px;">
<div class="mh-100 text-bg-warning" style="width: 100px; height: 200px;">Maximum height 100%</div>
</div>
</body>
</html>
Relative to the viewport
It is possible to modify the width and height of elements relative to the viewport.
-
min-vw-100 – sets a minimum width of 100 viewport width.
-
min-vh-100 – sets a minimum height of 100 viewport height.
-
vw-100 – sets the width of the element to be exactly 100 viewport width.
-
vh-100 – sets the height of the element to be exactly 100 viewport height.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Sizing</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-bg-light" >
<div class="min-vw-100 text-bg-primary p-3 my-2 d-inline-block">Minimum width (min-vw-100)</div>
<div class="vw-100 text-bg-warning p-3 my-2 d-inline-block">Width (vw-100)</div>
<div class="min-vh-100 text-bg-secondary p-3 mx-2 d-inline-block ">Minium height (min-vh-100)</div>
<div class="vh-100 text-bg-danger p-3 mx-2 d-inline-block">Height (vh-100)</div>
</div>
</body>
</html>
”;