Bootstrap - Sizing

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>
Advertisements