Bootstrap | Sizing an element with Examples
Last Updated :
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>
</head>
<body>
<div class="w-25 p-3" style="background-color: #eee;">
Width 25%
</div>
<div class="w-50 p-3" style="background-color: #eee;">
Width 50%
</div>
<div class="w-75 p-3" style="background-color: #eee;">
Width 75%
</div>
<div class="w-100 p-3" style="background-color: #eee;">
Width 100%
</div>
</body>
</html>
|
Output:
Example 2:
<html>
<head>
<title>GeeksForGeeks</title>
</head>
<body>
<div style="height: 100px; background-color: rgba(255, 0, 0, 0.1);">
<div class="h-25 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, .1)">
Height 25%
</div>
<div class="h-50 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, .1)">
Height 50%
</div>
<div class="h-75 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, .1)">
Height 75%
</div>
<div class="h-100 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, .1)">
Height 100%
</div>
</div>
</body>
</html>
|
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:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
</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>
</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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...