Bootstrap 4 - Sizing

You can make the size of an element wide or tall by using 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 −
<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 −
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 −
<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 −

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page