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