The bootstrap will support all HTML input controls such as text, select, textarea, password, datetime, number, email, url, etc. and it has a styling for all input controls.
By using bootstrap predefined .form-control
class, we can style textual form controls such as <input>
, <select>
and <textarea>
elements. Same way, we need to use other predefined classes such as .form-check-input
, .form-control-file
, etc. to style checkboxes, file inputs, etc. based on our requirements.
Now, we will learn how to style different input controls in bootstrap with examples.
As discussed, by using .form-control
class, we can style textual form controls such as <input>
, <select>
and <textarea>
elements.
<form>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="Password1" placeholder="Enter password">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control" id="Select1">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="form-group">
<label for="languages">Languages</label>
<select multiple class="form-control" id="Select2">
<option>English</option>
<option>Telugu</option>
<option>Hindi</option>
<option>Kannada</option>
<option>Tamil</option>
</select>
</div>
<div class="form-group">
<label for="bio">Bio</label>
<textarea class="form-control" id="Textarea1" rows="3"></textarea>
</div>
</form>
If you observe the above example, we added .form-control
class to textual input controls to change the style of controls. The above example will return the result like as shown below.
In bootstrap, we can style file input control by adding .form-control-file
class instead of .form-control
.
<form>
<div class="form-group">
<label for="fileupload">Profile Pic</label>
<input type="file" class="form-control-file" id="File1">
</div>
</form>
The above example will return the result like as shown below.
In bootstrap, we can change the default style of checkboxes and radio controls by using .form-check
class, .form-check-input
and .form-check-label
classes.
We need to wrap all the checkboxes and radios inside of .form-check
class to provide proper spacing and alignment. The .form-check-input
class is useful to style the checkboxes and radios. The .form-check-label
class is useful to style label controls.
By default, the checkboxes and radios will be vertically stacked. Following is the example of checkboxes and radios in bootstrap.
<form>
<div class="form-check">
<input type="radio" class="form-check-input" name="genderadios" id="Radio1" value="male" checked>
<label class="form-check-label" for="gridRadios1">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="genderadios" id="Radio2" value="female">
<label class="form-check-label" for="gridRadios2">Female</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="langchk" id="Checkbox1" value="english">
<label class="form-check-label" for="english">English</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="langchk" id="Checkbox2" value="telugu">
<label class="form-check-label" for="telugu">Telugu</label>
</div>
</form>
The above example will return the result like as shown below.
In case, if you want to arrange the checkboxes and radios horizontally in same row, then you need to add .form-check-inline
class along with .form-check
class like as shown below.
<form>
<!--Horizontal Radios-->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="genderadios" id="Radio1" value="male" checked>
<label class="form-check-label" for="gridRadios1">Male</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="genderadios" id="Radio2" value="female">
<label class="form-check-label" for="gridRadios2">Female</label>
</div>
<!--Horizontal Checkboxes-->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="langchk" id="Checkbox1" value="english">
<label class="form-check-label" for="english">English</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="langchk" id="Checkbox2" value="telugu">
<label class="form-check-label" for="telugu">Telugu</label>
</div>
</form>
The above example will return the result like as shown below.
In bootstrap forms, we can change the default style of range input control by adding .form-control-range
class.
<form>
<div class="form-group">
<label for="rangeinput">Set the Range</label>
<input type="range" class="form-control-range" id="range1">
</div>
</form>
The above example will return the result like as shown below.
In bootstrap, we can change the size of <input>
and <select>
controls to large or small by using .form-control-lg
, .form-control-sm
classes. Same way, we can also change the size of <label>
or <legend>
controls by using .col-form-label-lg
or .col-form-label-sm
classes.
<form>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label col-form-label-lg">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lg" id="Text2" placeholder="Large">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 col-form-label">Location</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Text3" placeholder="Default">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 col-form-label col-form-label-sm">Education</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="Text4" placeholder="Small">
</div>
</div>
</form>
The above example will return the result like as shown below.
Same way, you can apply .form-control-lg
, .form-control-sm
classes on <select>
elements to change the size of controls like as shown below.
<select class="form-control form-control-lg">
<option>Large</option>
</select>
<select class="form-control">
<option>Default</option>
</select>
<select class="form-control form-control-sm">
<option>Small</option>
</select>
In bootstrap, by adding disabled
and readonly
attributes to form input controls we can prevent the modification of input values.
The disabled
attribute will completely disable the input controls and it won’t allow making any modifications to the content. The readonly
attribute is also the same as disabled
attribute but the only difference is it will retain the standard cursor.
<form>
<div class="form-group">
<label for="username">Username (touch to focus)</label>
<input type="text" class="form-control" id="Text1" placeholder="Enter username">
</div>
<div class="form-group">
<label for="usernameDisabled">Username (disabled)</label>
<input type="text" class="form-control" id="Text2" placeholder="Enter username" disabled>
</div>
<div class="form-group">
<label for="usernameReadonly">Username (readonly)</label>
<input type="text" class="form-control" id="Text3" placeholder="Enter username" readonly>
</div>
</form>
The above example will return the result like as shown below.
In case, if you want to style the form input controls as plain text, then you need to apply .form-control-plaintext
instead of .form-control
class on <input>
controls.
The .form-control-plaintext
class will remove the default form field style and present the form input field value as plain text.
<form>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control-plaintext" id="email1" value="support@tutlane.com">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="Password1" placeholder="Enter password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
</form>
The above example will return the result like as shown below.
This is how we can change the default style of input controls using bootstrap built-in classes based on our requirements.