Bootstrap | Sizing an element with Examples

Last Updated : 15 Jan, 2019

As the name suggests sizing means to adjust the size of an element relative to its parent with the help of height and width utilities(in px or in %). Width and height utilities are generated from the $sizes Sass map in _variables.scss.

By default Bootstrap sizing includes supports for 25%, 50%, 75% and 100%. You can add specific sizes if you need any size other than this.

Below are some examples explaining sizing in BootStrap and the classes available:
Example 1:

<html>
    <head>
        <title>GeeksForGeeks</title>
          
        <!-- Link Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
      
    <body>
        <!-- This specifies width of 25% -->
        <div class="w-25 p-3" style="background-color: #eee;">
            Width 25%
        </div>
          
        <!-- This specifies width of 50% -->
        <div class="w-50 p-3" style="background-color: #eee;">
            Width 50%
        </div>
          
        <!-- This specifies width of 75% -->
        <div class="w-75 p-3" style="background-color: #eee;">
            Width 75%
        </div>
          
        <!-- This specifies width of 100% -->
        <div class="w-100 p-3" style="background-color: #eee;">
            Width 100%
        </div>
    </body>
</html>                    

Output:

Example 2:

<html>
    <head>
        <title>GeeksForGeeks</title>
  
        <!-- Link Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
      
    <body>
        <div style="height: 100px; background-color: rgba(255, 0, 0, 0.1);">
          
        <!-- This specifies height of 25% -->
        <div class="h-25 d-inline-block" 
            style="width: 120px; background-color: rgba(0, 0, 255, .1)">
            Height 25%
        </div>
          
        <!-- This specifies height of 50% -->
        <div class="h-50 d-inline-block" 
            style="width: 120px; background-color: rgba(0, 0, 255, .1)">
            Height 50%
        </div>
          
        <!-- This specifies height of 75% -->
        <div class="h-75 d-inline-block" 
            style="width: 120px; background-color: rgba(0, 0, 255, .1)">
            Height 75%
        </div>
          
        <!-- This specifies height of 100% -->
        <div class="h-100 d-inline-block" 
            style="width: 120px; background-color: rgba(0, 0, 255, .1)">
            Height 100%
        </div>
        </div>
    </body>
</html>                    

output:

Input sizing
We can also adjust the size of input elements in bootstrap by the use of classes like .input-lg and .input-sm for adjusting heights and .col-lg* and .col-sm* for adjusting width.

Example 1:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
      
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      
    <!-- Add JQuery and Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
  
<body>
<div class="container">
    <h2>Input Sizing</h2>
      
    <p> The form below shows input elements 
        with different heights using .input-lg
        and .input-sm:
    </p>
    
    <form>
        <div class="form-group">
            <label for="inputdefault">
                Default input
            </label>
            <input class="form-control" id="inputdefault" 
                type="text">
        </div>
          
        <div class="form-group">
            <label for="inputlg">
                input-lg
            </label>
            <input class="form-control input-lg" 
                id="inputlg" type="text">
        </div>
          
        <div class="form-group">
            <label for="inputsm">
                input-sm
            </label>
          <input class="form-control input-sm" 
                id="inputsm" type="text">
        </div>
          
        <div class="form-group">
            <label for="sel1">Default select list</label>
                <select class="form-control" id="sel1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
        </div>
          
        <div class="form-group">
            <label for="sel2">input-lg</label>
                <select class="form-control input-lg" id="sel2">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
        </div>
          
        <div class="form-group">
            <label for="sel3">input-sm</label>
                <select class="form-control input-sm" 
                    id="sel3">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
        </div>
  </form>
</div>
   
</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Example</title>
          
        <!-- Add Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          
        <!-- Add Bootstrap JS and JQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>Column Sizing</h2>
              
            <p>The form below shows input elements with different widths using different .col-xs-* classes:</p>
              
            <form>
                <div class="form-group row">
                    <div class="col-xs-2">
                        <label for="ex1">col-xs-2</label>
                        <input class="form-control" id="ex1"
                            type="text">
                    </div>
                    <div class="col-xs-3">
                        <label for="ex2">col-xs-3</label>
                        <input class="form-control" id="ex2"
                            type="text">
                    </div>
                    <div class="col-xs-4">
                        <label for="ex3">col-xs-4</label>
                        <input class="form-control" id="ex3"
                            type="text">
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>

Output:

Reference: https://getbootstrap.com/docs/4.0/utilities/sizing/

My Personal Notes

Related Articles

Bootstrap | Sizing an element with Examples

Start Your Coding Journey Now!

Related Articles

Bootstrap | Sizing an element with Examples

Please Login to comment...

Start Your Coding Journey Now!