Forms are a vital part of any website, enabling user interaction through data submission, login pages, surveys, and more. Bootstrap 3 makes creating forms easier with its extensive collection of pre-designed classes that ensure consistency and responsiveness across devices.
This guide explores Bootstrap 3 form classes, layouts, and customizations, helping you design user-friendly forms effortlessly. Visit TheCodingCollege.com for more web development tutorials.
1. Form Layouts
Bootstrap 3 offers three types of form layouts:
1.1 Vertical Forms
This is the default layout where form controls are stacked vertically.
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>1.2 Horizontal Forms
Use the .form-horizontal class and grid system to align labels and inputs horizontally.
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>1.3 Inline Forms
Inline forms are compact and suitable for narrow spaces. Use the .form-inline class.
<form class="form-inline">
<div class="form-group">
<label for="name" class="sr-only">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="email" class="sr-only">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>2. Input Classes
Bootstrap provides multiple classes for styling input fields:
| Class | Description |
|---|---|
.form-control | Adds styles to text fields, dropdowns, and more. |
.input-lg | Creates a large input field. |
.input-sm | Creates a small input field. |
.input-group | Groups input fields with add-ons like icons. |
Example:
<input type="text" class="form-control input-lg" placeholder="Large input">
<input type="text" class="form-control" placeholder="Default input">
<input type="text" class="form-control input-sm" placeholder="Small input">3. Form Validation States
Bootstrap offers classes to indicate validation states for input fields.
| Class | Description |
|---|---|
.has-success | Applies green border and icon for valid input. |
.has-warning | Applies yellow border and icon for warnings. |
.has-error | Applies red border and icon for errors. |
Example:
<div class="form-group has-success">
<label for="success" class="control-label">Success:</label>
<input type="text" class="form-control" id="success" placeholder="Valid input">
</div>
<div class="form-group has-warning">
<label for="warning" class="control-label">Warning:</label>
<input type="text" class="form-control" id="warning" placeholder="Warning input">
</div>
<div class="form-group has-error">
<label for="error" class="control-label">Error:</label>
<input type="text" class="form-control" id="error" placeholder="Error input">
</div>4. Checkbox and Radio Buttons
Bootstrap styles checkboxes and radio buttons consistently.
Inline Checkboxes and Radios
<label class="checkbox-inline">
<input type="checkbox" value=""> Option 1
</label>
<label class="checkbox-inline">
<input type="checkbox" value=""> Option 2
</label>
<label class="radio-inline">
<input type="radio" name="options" value=""> Option 1
</label>
<label class="radio-inline">
<input type="radio" name="options" value=""> Option 2
</label>Checkbox and Radio Groups
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender"> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender"> Female
</label>
</div>5. Input Groups
Add text, buttons, or icons inside input fields using .input-group.
Example:
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-addon">.00</span>
</div>6. Disabled and Read-Only Fields
Use the disabled or readonly attributes for non-editable input fields.
Example:
<input type="text" class="form-control" placeholder="Disabled input" disabled>
<input type="text" class="form-control" placeholder="Read-only input" readonly>7. Form Controls with Help Text
Provide additional guidance with help text.
Example:
<div class="form-group">
<label for="example">Email address:</label>
<input type="email" class="form-control" id="example" placeholder="Enter email">
<p class="help-block">We'll never share your email with anyone else.</p>
</div>8. Horizontal Form Example
Combine several form features into one complete horizontal form.
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>Conclusion
Bootstrap 3 simplifies form creation with its comprehensive set of CSS classes for styling inputs, validation states, and layouts. Whether you need vertical, horizontal, or inline forms, Bootstrap ensures consistent design and responsiveness.