Bootstrap
In this tutorial we will learn to style forms in Bootstrap.
Forms are an important part of any website. It allows the user to submit data and fetch data. Bootstrap provides classes that helps us to style our forms.
Wrap label and controls like input or select inside .form-group for proper spacing.
label
input
select
.form-group
<form> <div class="form-group"> <!-- some more html elements goes here --> </div> </form>
We can use the .form-control class on all textual <input>, <select> and <textarea> to set their width to 100% by default.
.form-control
<input>
<select>
<textarea>
<form> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" name="email"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" name="password"> </div> <div class="form-group"> <label for="file">Upload File</label> <input type="file" id="image" name="image"> </div> <div class="form-group"> <label for="description">Description</label> <textarea rows="3" class="form-control" id="description" name="description"></textarea> </div> <div class="form-group"> <label for="file">Upload File</label> <select class="form-control" id="team" name="team"> <option value="-">--- Select Team ---</option> <option value="team-a">Team A</option> <option value="team-b">Team B</option> <option value="team-c">Team C</option> </select> </div> <button type="submit" class="btn btn-success"> Submit </button> </form>
Output:
To create inline form we use the .form-inline class in the opening form tag.
.form-inline
This only applies to forms within viewports that are at least 768px wide.
<form class="form-inline"> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control"> </div> <button type="submit" class="btn btn-primary"> Login </button> </form>
To create horizontal form we use the .form-horizontal class in the opening form tag.
.form-horizontal
<form class="form-horizontal"> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-6"> <input type="email" class="form-control"> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">Password</label> <div class="col-sm-6"> <input type="password" class="form-control col-sm-10"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <button type="submit" class="btn btn-primary"> Login </button> </div> </div> </form>
For the input file type we don't use the .form-control class. You can use it though if you want border around it.
Without the .form-control class.
<div class="form-group"> <label for="file">Upload File</label> <input type="file" id="image" name="image"> </div>
With the .form-control class.
<div class="form-group"> <label for="file">Upload File</label> <input type="file" class="form-control" id="image" name="image"> </div>
When we want to allow the user to select multiple options we use the checkbox. And to style checkbox we use the .checkbox class.
.checkbox
<div class="checkbox"> <label> <input type="checkbox" value="Option 1"> Option 1 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="Option 2"> Option 2 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="Option 3"> Option 3 </label> </div>
To make the checkbox inline we use the .checkbox-inline class.
.checkbox-inline
<div class="checkbox-inline"> <label> <input type="checkbox" value="Option 1"> Option 1 </label> </div> <div class="checkbox-inline"> <label> <input type="checkbox" value="Option 2"> Option 2 </label> </div> <div class="checkbox-inline"> <label> <input type="checkbox" value="Option 3"> Option 3 </label> </div>
To disable a checkbox we use the .disabled class and add the disabled attribute to the input element.
.disabled
disabled
<div class="checkbox"> <label> <input type="checkbox" value="Option 1"> Option 1 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="Option 2"> Option 2 </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="Option 3" disabled> Option 3 </label> </div>
When we want to allow the user to select only one option from many options we use the radio.
<div class="radio"> <label> <input type="radio" name="options" value="Option 1"> Option 1 </label> </div> <div class="radio"> <label> <input type="radio" name="options" value="Option 2"> Option 2 </label> </div> <div class="radio"> <label> <input type="radio" name="options" value="Option 3"> Option 3 </label> </div>
To make the radio inline we use the .radio-inline class.
.radio-inline
<div class="radio-inline"> <label> <input type="radio" name="options" value="Option 1"> Option 1 </label> </div> <div class="radio-inline"> <label> <input type="radio" name="options" value="Option 2"> Option 2 </label> </div> <div class="radio-inline"> <label> <input type="radio" name="options" value="Option 3"> Option 3 </label> </div>
To disable a radio we use the .disabled class and add the disabled attribute to the input element.
<div class="radio"> <label> <input type="radio" name="options" value="Option 1"> Option 1 </label> </div> <div class="radio"> <label> <input type="radio" name="options" value="Option 2"> Option 2 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="options" value="Option 3" disabled> Option 3 </label> </div>
This covers some of the commonly used elements of a form. For more details you can checkout Bootstrap official website.
See you in the next tutorial.