HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Individual form controls automatically receive some global styling with Bootstrap
Individual form controls automatically receive some global styling with Bootstrap.
All textual <input>, <textarea>, and <select> elements with class="form-control" are set to width: 100%; by default.
Standard rules for all three form layouts:
<div class="form-group">
(needed for optimum spacing).form-control
to all textual <input>
, <textarea>
, and <select>
elementsThe following example creates a simple Bootstrap form with two input fields, one checkbox, and a submit button:
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Class | Description | Example |
---|---|---|
.form-inline | Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide) | Try it |
.form-horizontal | Aligns labels and groups of form controls in a horizontal layout | Try it |
.form-control | Used on input, textarea, and select elements to span the entire width of the page and make them responsive | Try it |
.form-control-feedback | Form validation class | Try it |
.form-control-static | Adds plain text next to a form label within a horizontal form | Try it |
.form-group | Container for form input and label | Try it |
Class | Description | Example |
---|---|---|
.input-group | Container to enhance an input by adding an icon, text or a button in front or behind it as a "help text" | Try it |
.input-group-lg | Large input group | Try it |
.input-group-sm | Small input group | Try it |
.input-group-addon | Together with the .input-group class, this class makes it possible to add an icon or help text next to the input field | Try it |
.input-group-btn | Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar | Try it |
.input-lg | Large input field | Try it |
.input-sm | Small input field | Try it |