Bootstrap | Sizing an element with Examples

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
      
    <!-- Add Bootstrap CSS -->
      
    <!-- Add JQuery and Bootstrap JS -->
</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>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 -->
    </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>

chevron_right


Output:

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



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.