Bootstrap 4 - Sizing

Description

You can make the size of an element wide or tall by using width and height utilities.

Width and Height Utilities

The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.

The following example demonstrates setting width and height utilities for an element −

Example

Live Demo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class = "container">
         <h2>Width</h2>
         <div class = "w-auto p-3" style = "background-color: #aaa;">
            Width : auto
         </div>
         <br>
         
         <div class = "w-100 p-3" style = "background-color: #aaa;">
            Width : 100%
         </div>
         <br>
         
         <div class = "w-75 p-3" style = "background-color: #aaa;">
            Width : 75%
         </div>
         <br>
         
         <div class = "w-50 p-3" style = "background-color: #aaa;">
            Width : 50%
         </div>
         <br>
         
         <div class = "w-25 p-3" style = "background-color: #aaa;">
            Width : 25%
         </div>
         <br>
         
         <h2>Height</h2>
         <div class = "bg-secondary" style = "height: 100px; ">
            <div class = "h-100 d-inline-block bg-info"  style = "width: 120px;">
               Height : 100%
            </div>
            <div class = "h-75 d-inline-block bg-info" style = "width: 120px;">
               Height : 75%
            </div>
            <div class = "h-50 d-inline-block bg-info" style = "width: 120px; ">
               Height : 50%
            </div>
            <div class = "h-25 d-inline-block bg-info" style = "width: 120px;">
               Height : 25%
            </div>
            <div class = "h-auto d-inline-block bg-info" style = "width: 120px;">
               Height : auto
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity =" sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Max-Width and Max-Height Utilities

You can also set max width and height to an element by using mw-100 and mh-100 utilities as shown in the below example −

Example

Live Demo

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class = "container">
         <h2>Max Width</h2>
         <img class = "mw-100" 
            src = "https://www.q1ins.com/wp-content/uploads/2016/09/black-transparent-box.png" 
            alt = "Max-width 100%">
         <br>
         <br>
         
         <h2>Max Height</h2>
         <div class = "bg-secondary" style = "height: 100px;">
            <div class = "mh-100 bg-info" style = "width: 100px; height: 200px;">
               Max-height : 100%
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

bootstrap4_utilities.htm