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:
<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:
<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:
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 --></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:
<!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
filter_none
Output:
Reference: https://getbootstrap.com/docs/4.0/utilities/sizing/
