Bootstrap | Sizing an element with Examples - GeeksforGeeks

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:
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/
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to change navigation bar color in Bootstrap ?
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to set Bootstrap Timepicker using datetimepicker library ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?