Bootstrap 5 Sizing Last Updated : 04 Apr, 2024 Comments Improve Suggest changes Like Article Like Report 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 NameDescriptionRelative to the ParentSets the height and width of the element relative to its parent.Relative to the ViewportSets the height and width of the element relative to the viewport.SassSass sizing utilities declared in the Utility API.Syntax: <div class="w-25"> ... </div> Examples of Bootstrap 5 SizingExample 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: 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 Comment More infoAdvertise with us Next Article Bootstrap 5 Dropdowns Sizing V vpsop Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More 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 Bootstrap 5 Images Bootstrap 5 provides classes for responsive images, ensuring they scale appropriately within their parent elements, maintaining aspect ratio, and enhancing appearance across devices without overflowing.Types of Images:TermDescriptionResponsive imagesResize images according to parent element and scre 1 min read Like