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






                        filter_none








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







                        filter_none








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


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



















                        chevron_right







                        filter_none








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


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



















                        chevron_right







                        filter_none








Output:




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





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
harjindersinghs168
Check out this Author's contributed articles.
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 : 
Bootstrap
Web Technologies

           	
        

         

         
 
         
        Be the First to upvote.

                

        



        
        
        
        
        

    

            

            0
            

            

                             No votes yet.
                    

            
            
            
            
            
        

        
        

        

        

        

        

        

        


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