Bootstrap Sizing
A webpage is a combination of different HTML elements. Each element has a different size than the other. Sometimes you need a smaller element or sometimes you need a larger element. It depends on the size of the block containing that element The element size should be set accordingly so that the element can be adjusted in the given parent block. The element size is very crucial in web designing.
Bootstrap 5 provides height and weight utility classes that easily adjust the size of the element within the containing block. In this tutorial, we are going to learn how to use these classes to perfectly size an element.
Relative to the parent
The sizes of an element can be adjusted relative to its containing block. If the parent block is smaller. The sizes can be reduced so it fits the parent block. The bootstrap provides width and height utilities to adjust the size of the element relative to its parent element.
Here is a list of width classes used in bootstrap 5.
- .w-25 - It sets the width of the element to 25% of the Maximum width of the parent element.
- .w-50 - It sets the width of the element to 50% of the Maximum width of the parent element.
- .w-75 - It sets the width of the element to 75% of the Maximum width of the parent element.
- .w-100 - It sets the width of the element to the maximum width of the parent element.
- .w-auto - It adjusts the width automatically for the given element.
Example: Usage of width classes relative to its parent
In the below example, we have shown how we can add these width utility classes to the element. These elements are styled with CSS background color and some padding.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container my-4">
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Similar to the width class there are some height utility classes to adjust the height of an elhttps://www.myamcat.com/dashboardement relative to its parent element. The list of height utility classes is
- .h-25 - It sets the height of the element to 25% of the maximum height of the parent element.
- .h-50 - It sets the height of the element to 50% of the maximum height of the parent element.
- .h-75 - It sets the height of the element to 75% of the maximum height of the parent element.
- .h-100 - It sets the height of the element to 100% of the maximum height of the parent element.
- .h-auto - It automatically sets the height of the given element.
Example: Usage of height class relative to its parent element
Here is an example to show how height utility classes work in bootstrap on the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container my-4 bg-light" style="height: 100px;">
<div class="h-25 d-inline-block bg-secondary"style="width: 130px;">Height 25%</div>
<div class="h-50 d-inline-block bg-secondary "style="width: 130px;">Height 50%</div>
<div class="h-75 d-inline-block bg-secondary"style="width: 130px;" >Height 75%</div>
<div class="h-100 d-inline-block bg-secondary"style="width: 130px;" >Height 100%</div>
<div class="h-auto d-inline-block bg-secondary"style="width: 130px;" >Height auto</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Example: Usage of Max Width / Max Height classes
There are a couple of classes used to set the width and height to its maximum size. The .mw-100 is used to set the width of the element to max-width:100%. Similarly, The height of the element is set to .max-height:100% using the .mh-100 class. In the following example, we have shown how these classes adjust the size of the element as per the dimension of relative parent elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-light mt-3" style="height: 100px;" >
<div class="d-block mw-100 bg-secondary"style="height:75px;">
maximum-width block
</div>
</div>
<div class="container mt-3 bg-light" style="height: 100px;">
<div class="d-block mh-100 bg-secondary"style="width: 100px; height:200px;">
maximum height block
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
Bootstrap height and width classes are easy to use and quickly adjust the size of the element with respect to the dimension of the given parent element. The given classes enhance the look of the websites by properly adjusting the size of the elements.
