So far we have seen how to create lists with predefined icons using Bootstrap in
. Now lets see the different types of Form layouts in Bootstrap.
The main objective of this article is to learn different types of form layouts in Bootstrap by using predefined
classes of Twitter Bootstrap.
Forms are the sectional parts of web pages. As we know that we can style the
using CSS. But it is difficult to control the styling for different sizes of screen. Twitter bootstrap comes with predefined CSS styles for different types of Form-Layots such as Horizontal, Vertical etc.
Creating Horizontal Form using Bootstrap
Just give form-horizontal class to your Html form tag like below. Below code is the sample example for creating horizontal form.
<form class="form-horizontal">
<div class="form-group">
<label for="inputFirstName" class="control-label col-xs-2">FirstName</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="control-label col-xs-2">LastName</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-2">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Sign Up</button>
</div>
</div>
</form>Now Save and Run your project and you will see the following output in your browser
In the above figure if you observe, the elements are in horizontal manner.
Creating Vertical Form using Bootstrap
If you want to make the above alignment as vertical, change your Form style by changing the class of form tag.
<form>
<div class="form-group">
<label for="inputFirstName">FirstName</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="inputLastName">LastName</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>In the above example code snippet, we have removed the
form-horizontal class as by default it will be in Vertical alignment. Check out the above code in your browser
Observe the figure, all elements are aligned vertically.
Creating Inline Form using Bootstrap
Now we will see the Inline Form.
Give the form-inline class to your form tag.
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputUserName">Username</label>
<input type="text" class="form-control" id="inputUserName" placeholder="Username">
</div>
<div class="form-group">
<label class="sr-only" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>'
sr-only' is the predefined class in
bootstrap.css which covers overflow, position properties.
sr-only looks like below.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}Now refresh your browser and observe the output
In the above figure, all the Html elements are aligned inline.
Creating Inline Form with Glyphicons using Bootstrap
We have already seen that there are some Glyphicons in Twitter Bootstrap. Now we are going to use them in here.
See the below example Code snippet of adding icons to the elements.
<form>
<div class="row">
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<button type="submit" class="btn btn-primary">Login</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-cog"></span> Settings</button>
</div>
</form>The output of the above code will be
In the above figure, Glyphicons have made the form more beautiful and nice look and feel.
Changing Height of Inputs and Dropdowns
Below example shows different sizes of Inputs and Select Boxes in terms of height.
<form>
<div class="row">
<div class="col-xs-3">
<input type="text" class="form-control input-lg" placeholder="Input Large">
</div>
<div class="col-xs-3">
<select class="form-control input-lg">
<option>Large1</option>
<option>Large2</option>
<option>Large3</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="Input Default">
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Default1</option>
<option>Default2</option>
<option>Default3</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
<input type="text" class="form-control input-sm" placeholder="Input Small">
</div>
<div class="col-xs-3">
<select class="form-control input-sm">
<option>Small1</option>
<option>Small2</option>
<option>Small3</option>
</select>
</div>
</div>
</form>Run the above code in your browser and you will see different sizes of Inputs like below
input-lg, input-sm are the predefined classes for larger and smaller inputs respectively.
Changing Width of Inputs and Dropdowns
Below example shows different sizes of Inputs and Select Boxes in terms of width.
<form>
<div class="row">
<div class="col-xs-1">
<textarea class="form-control"></textarea>
</div>
<div class="col-xs-2">
<textarea class="form-control"></textarea>
</div>
<div class="col-xs-3">
<textarea class="form-control"></textarea>
</div>
<div class="col-xs-4">
<textarea class="form-control"></textarea>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-1">
<select class="form-control">
<option>Option1</option>
<option>Option2</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control">
<option>Option1</option>
<option>Option2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Option1</option>
<option>Option2</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control">
<option>Option1</option>
<option>Option2</option>
</select>
</div>
</div>
</form>Now Save and Run the above example to see textareas and dropdowns with different width.
You can observe that width of elements is changed in your browser because of col-xs-1(column extra small), col-xs-2, col-xs-3 and col-xs-4 classes of Bootstrap.
Conclusion
In this article we have seen different types of Form-Layouts of using Bootstrap and also seen changing height and width of Html elements. Hope you understand. we will see more Bootstrap features on forms in next chapter. If you have any doubts or confusions, please ask in the comment box below.
Thanks for reading.