Bootstrap 5 Sizing
Bootstrap 5 Sizing is a set of utility classes used to set the height and width of the element. Height and width can be set relative to the viewport of the device as well as relative to the parent element.
- Relative to the Parent: These classes are used to set the height and width of the element relative to the parent element.
- Relative to the Viewport: These classes are used to set the height and the width of the element relative to the viewport.
- Sass: This involves the Sass sizing utilities that are declared in Utility API.
Syntax:
<div class="w-25">
...
</div>
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= <!-- Bootstrap Javascript --> <script src= </script> </head> <body> <div class="container"> <div class="my-4"> <h1 class="text-success"> GeeksforGeeks </h1> <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:
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= <!-- Bootstrap Javascript --> <script src= </script> </head> <body> <div class="container"> <div class="my-4"> <h1 class="text-success"> GeeksforGeeks</h1> <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:
Reference: https://getbootstrap.com/docs/5.2/utilities/sizing/
Please Login to comment...