Bootstrap 5 Sizing utility classes adjust element dimensions relative to the viewport or parent container. Options include percentage-based widths, and viewport-relative dimensions, facilitating responsive design for flexible layouts across various screen sizes.
Bootstrap 5 Sizing Classes
| Class Name | Description |
|---|
| Relative to the Parent | Sets the height and width of the element relative to its parent. |
| Relative to the Viewport | Sets the height and width of the element relative to the viewport. |
| Sass | Sass sizing utilities declared in the Utility API. |
Syntax:
<div class="w-25"> ... </div>
Examples of Bootstrap 5 Sizing
Example 1: In this example, we used the sizing classes relative to the parent to set the height and width of the element.
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Sizing</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> <!-- Bootstrap Javascript --> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="my-4"> <strong>Bootstrap 5 Sizing</strong> </div> <h5>Relative to Parent Width</h5> <div class="bg-dark"> <div class="w-100 p-2 mb-2 text-bg-success"> Width = 100% of the parent </div> <div class="w-auto p-2 mb-2 text-bg-success"> Width = auto</div> <div class="w-25 p-2 mb-2 text-bg-success"> Width = 25% of the parent</div> <div class="w-50 p-2 mb-2 text-bg-success"> Width = 50% of the parent</div> <div class="w-75 p-2 mb-2 text-bg-success"> Width = 75% of the parent</div> </div> <h5>Relative to Parent Height</h5> <div class="bg-dark" style="height:200px;"> <div class="h-100 w-auto p-3 text-bg-success d-inline-block">100% Height</div> <div class="h-50 w-auto p-3 text-bg-success d-inline-block">50% Height</div> <div class="h-25 w-auto p-3 text-bg-success d-inline-block">25% Height</div> <div class="h-auto w-auto p-3 text-bg-success d-inline-block">Auto Height</div> <div class="h-75 w-auto p-3 text-bg-success d-inline-block">75% Height</div> </div> </div> </body> </html>
Output:
.png)
Bootstrap 5 Sizing Example Output
Example 2: In this example, we used the sizing classes relative to the viewport to set the height and width of an element.
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap 5 Sizing</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> <!-- Bootstrap Javascript --> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="my-4"> <strong >Bootstrap 5 Sizing</strong > </div> <h5> Relative to Viewport Height And Width </h5> <div class="min-vw-100 p-3 text-bg-success d-inline-block" > Min VW 100 </div> <div class="vw-100 mt-3 p-3 text-bg-success d-inline-block" > VW 100 </div> <div class="min-vh-100 mt-3 p-3 text-bg-success d-inline-block" > Min VH 100 </div> <div class="vh-100 p-3 text-bg-success d-inline-block" > VH 100 </div> </div> </body> </html>
Output:
Bootstrap 5 Sizing Example Output Similar Reads
Bootstrap 5 Cards Sizing Bootstrap Cards Sizing refers to the ability to control the dimensions of cards in Bootstrap by using predefined classes such as col, col-sm, col-md, col-lg, col-xl, and col-xxl. This ensures consistency and responsiveness across various screen sizes, maintaining a uniform appearance for card elemen
2 min read
Bootstrap 5 Spacing The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. Padding is the area inside of any div or container, as opposed to a margin, which is the area outside of it. Margin and Padding can be added by adding Bootstrap classes in an
3 min read
Bootstrap 5 Select Sizing Bootstrap 5 Select Sizing is used to choose form's select small and large custom selects to match your different-sized text inputs. The large-sized select element used the class form-select-lg and the small-sized select uses the form-select-sm class. Bootstrap 5 Select Sizing Class: The default size
2 min read
Bootstrap 5 Dropdowns Sizing Bootstrap 5 Dropdowns Sizing is used to create dropdowns on different sizes of buttons. It normally works on any size of a button, there can be a single large button or a split small button. Bootstrap 5 Dropdowns Sizing Class: There is no pre-defined class for this you can use the Bootstrap 5 Dropdo
2 min read
Bootstrap 5 Spacing Gap The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. When the display is set to grid, you can use gap utilities on the parent grid container. With responsive gap utilities, you don’t have to add margin utilities to individual gr
2 min read