Bootstrap 4 Input Sizing
Input Sizing
Set the heights of input elements using classes like .form-control-lg and .form-control-sm.
Set the widths of elements using grid column classes like .col-lg-*and .col-sm-*.
Height Sizing
The following examples shows input elements with different heights:
Example
<form>
<div class="form-group">
<label for="inputdefault">Small
input</label>
<input class="form-control
form-control-sm" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Default
input</label>
<input class="form-control" id="inputlg" type="text">
</div>
<div class="form-group">
<label for="inputsm">Large
input</label>
<input class="form-control form-control-lg" id="inputsm" type="text">
</div>
</form>
Try it Yourself »
Column Sizing
The following examples shows input elements with different widths using different
.col-* classes:
Example
<div class="form-group row">
<div class="col-3">
<label for="ex1">col-3</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-4">
<label for="ex2">col-4</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-5">
<label for="ex3">col-5</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>
Try it Yourself »
