Twitter Bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. In this article we use some built-in Twitter Bootstrap CSS class to make Forms layout.
What Bootstrap is
Twitter Bootstrap was created by two guys at Twitter who wanted to speed up (bootstrap) their workload and code. The Bootstrap framework is used to develop front-facing web applications and sites. When we work on the project there are many things that are required in nearly every project. For example a Grid, Tables, Forms, Buttons and so on. These are the common requirements of any project. With these you can get a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals and more.
To read more see Bootstrap.
Include with HTML
Now to include them in the project. So let’s imagine we have a blank HTML file that goes something like the following:
HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Now we need to add a reference to the bootstrap CSS file and JavaScrit file with the HTML file as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Note: Also don’t forget to include jQuery if you’ll be using Bootstraps JS plugins.
The following code defines the simple forms. The HTML file looks as in the following:
Creating Forms with Twitter Bootstrap
To make the forms more attractive using Bootstrap, open up the bootstrap.css file and check out the following Bootstrap CSS class.
-
Vertical Form (default form layout)
-
Horizontal Form
-
Inline Form
1. Using default form layout
Now first we use the form tag with label and TextBox. The HTML file looks such as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="dist/js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<form>
<div>
<label for="inputUserName">UserName</label>
<input type="email" id="inputEmail" placeholder="UserName">
</div>
<div >
<label for="inputPassword">Password</label>
<input type="password" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit">Login</button>
</form>
</body>
</html>
The HTML will render without Bootstrap as in the following:
Now using some important BootStrap CSS class to make form attractive.
- form-group class
- form-control class
Using bootstrap CSS class="form-group"
The form-group class is used to Wrap labels and controls in .form-group for optimum spacing on the form. You can do this by simply applying the Bootstrap's class form-group.
The HTML file looks as in the following:
<form>
<div class="form-group" >
<label for="inputUserName">UserName</label>
<input type="email" id="inputEmail" placeholder="UserName">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox" class="form-group" >
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit">Login</button>
</form>
The HTML will render without Bootstrap as in the following:
Using bootstrap CSS class="form-control"
All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%. You can do this by simply applying the Bootstrap's class form-control.
The HTML file looks as in the following:
<form>
<div class="form-group" >
<label for="inputUserName">UserName</label>
<input type="email" class ="form-control" id="inputEmail" placeholder="UserName">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class ="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox" class="form-group" >
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit">Login</button>
</form>
The HTML will render without Bootstrap as in the following:
2. Using bootstrap CSS class="Horizontal Form"
To make a form that uses the horizontal layout: Add a class of ‘.form-horizontal’ to the parent element. Then wrap labels and controls in a
with class ‘.control-group’. Next, add a class of ‘.control-label’ to the labels. And then wrap any associated controls in a
To make a form that uses the horizontal layout: Add a class of ‘.form-horizontal’ to the parent
To make a form that uses the horizontal layout: Add a class of ‘.form-horizontal’ to the parent
To make a form that uses the horizontal layout: Add a class of ‘.form-horizontal’ to the parent
To make a form that uses the horizontal layout: Add a class of ‘.form-horizontal’ to the parent
The horizontal form layout the label in the right and floated to left to make them appear on the same line as form controls. To make a form that uses the Horizontal layout :
- Add .form-horizontal to the <form> element
- Wrap labels and form controls in .control-group
- Add .control-label to the <label> element
The list groups class is used to display lists of items in a beautiful manner. To do that you can use a list-group-item class with every item.
The HTML file looks as in the following:
<form class="form-horizontal">
<div class="form-group">
<label for="inputUserName" class="control-label">
UserName</label>
<input type="email" id="inputUserName" placeholder="UserName">
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">
Password</label>
<input type="password" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Remember me</label>
</div>
<button type="submit">
Login</button>
</form>
The HTML will render without Bootstrap as in the following:
3. Using bootstrap CSS class="Inline Form"
To make a form where all the element are inline just add Inline Form class with the form tag. You can do this by simply applying the Bootstrap's class Inline Form :
The HTML file looks as in the following:
<form class="form-inline">
<div class="form-group">
<label for="inputUserName">
UserName</label>
<input type="email" id="inputEmail" class="form-control" placeholder="UserName">
</div>
<div class="form-group">
<label for="inputPassword">
Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Remember me</label>
</div>
<button type="submit">
Login</button>
</form>
The HTML will render without Bootstrap as in the following:
![Inline Form]()