Bootstrap provides ready-made classes for creating clean, responsive, and user-friendly HTML forms. Forms are commonly used for login pages, registration pages, admission forms, contact forms, feedback forms, search forms, and payment forms.
A Bootstrap form is a normal HTML form styled using Bootstrap classes.
<form>
<label>Name</label>
<input type="text"
class="form-control">
<button class="btn btn-primary">
Submit
</button>
</form>Bootstrap form classes help create consistent spacing, sizing, and responsive layouts.
A basic Bootstrap form usually contains a label, a form control, and an action button.
<form>
<div class="mb-3">
<label class="form-label">
Name
</label>
<input type="text"
class="form-control">
</div>
<button class="btn btn-primary">
Submit
</button>
</form>
The .form-label class styles labels consistently with
Bootstrap forms.
<label class="form-label">
Email Address
</label>Using a proper label also improves form accessibility and usability.
The .form-control class is used with many text-based form
controls such as text, email, password, number, and date inputs.
<input type="text"
class="form-control"
placeholder="Enter name">
Bootstrap spacing utilities such as .mb-3 can be used to
create space between form fields.
<div class="mb-3">
<label class="form-label">
Name
</label>
<input type="text"
class="form-control">
</div>A text input is used to collect short text information.
<input type="text"
class="form-control"
placeholder="Enter your name">
Use type="email" when the form expects an email address.
<input type="email"
class="form-control"
placeholder="Enter email">The email input type also gives browsers useful information about the expected data.
Use type="password" for password fields.
<input type="password"
class="form-control"
placeholder="Enter password">The browser hides the characters typed into a password field.
The number input is useful when users need to enter numeric values.
<input type="number"
class="form-control"
placeholder="Enter age">The date input allows users to select a date.
<input type="date"
class="form-control">
The <textarea> element is used for longer text such as
messages, comments, addresses, and descriptions.
<textarea
class="form-control"
rows="4"
placeholder="Enter message">
</textarea>
The .form-select class is used to style a select dropdown.
<select class="form-select">
<option>
Select Course
</option>
<option>
HTML
</option>
<option>
CSS
</option>
</select>Checkboxes allow users to select one or more options.
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="html">
<label
class="form-check-label"
for="html">
HTML
</label>
</div>Radio buttons allow users to select one option from a group.
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="gender"
id="male">
<label
class="form-check-label"
for="male">
Male
</label>
</div>
The .form-check class provides a wrapper for checkboxes
and radio buttons.
<div class="form-check">
<input class="form-check-input"
type="checkbox"
id="terms">
<label class="form-check-label"
for="terms">
I agree to the terms.
</label>
</div>The file input allows users to select a file from their device.
<label class="form-label">
Upload Photo
</label>
<input type="file"
class="form-control">For server-side file uploading, the form also needs appropriate HTML attributes and server-side handling.
HTML validation attributes such as required can be combined
with Bootstrap form styling.
<input type="email"
class="form-control"
required>
The disabled attribute prevents the user from interacting
with a form control.
<input type="text"
class="form-control"
value="Not Available"
disabled>
The readonly attribute prevents editing while allowing
the value to remain available in the form.
<input type="text"
class="form-control"
value="Student ID: 101"
readonly>
Bootstrap provides .form-control-lg and
.form-control-sm for larger and smaller text inputs.
<input class="form-control form-control-lg"
placeholder="Large input">
<input class="form-control"
placeholder="Normal input">
<input class="form-control form-control-sm"
placeholder="Small input">
The .form-text class can be used to provide additional
information about a form field.
<label class="form-label">
Password
</label>
<input type="password"
class="form-control">
<div class="form-text">
Your password must be at least 8 characters.
</div>Input groups allow you to place text, symbols, or buttons beside a form control.
<div class="input-group">
<span class="input-group-text">
@
</span>
<input type="text"
class="form-control"
placeholder="Username">
</div>Bootstrap grid classes can be used to place labels and controls in different columns.
<div class="row mb-3">
<label class="col-sm-3 col-form-label">
Name
</label>
<div class="col-sm-9">
<input type="text"
class="form-control">
</div>
</div>Bootstrap grid and display utilities can be used to create forms where multiple controls appear in the same row.
<div class="row g-3 align-items-end">
<div class="col-md-4">
<label class="form-label">
Name
</label>
<input type="text"
class="form-control">
</div>
<div class="col-md-4">
<label class="form-label">
Course
</label>
<select class="form-select">
...
</select>
</div>
</div>Bootstrap button classes can be used for form actions such as Submit, Reset, Save, Cancel, and Login.
<button type="submit"
class="btn btn-primary">
Submit
</button>
<button type="reset"
class="btn btn-secondary">
Reset
</button>A login form can combine labels, email or text inputs, password fields, checkboxes, and buttons.
<form>
<div class="mb-3">
<label class="form-label">
Email
</label>
<input type="email"
class="form-control">
</div>
<div class="mb-3">
<label class="form-label">
Password
</label>
<input type="password"
class="form-control">
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox">
<label class="form-check-label">
Remember me
</label>
</div>
<button
class="btn btn-primary">
Login
</button>
</form>A registration form may contain multiple fields such as name, email, phone, password, course, and terms and conditions.
Bootstrap provides classes such as .is-valid and
.is-invalid for displaying validation states.
<input type="text"
class="form-control is-valid"
value="Rahul">
<input type="text"
class="form-control is-invalid"
value="">The following example demonstrates a simple student admission form using Bootstrap grid and form classes.
This complete example combines labels, text inputs, email, password, select, textarea, checkbox, responsive grid, and Bootstrap buttons.
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">
Full Name
</label>
<input type="text"
class="form-control"
placeholder="Enter full name"
required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
Email
</label>
<input type="email"
class="form-control"
placeholder="Enter email"
required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
Password
</label>
<input type="password"
class="form-control"
placeholder="Enter password"
required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
Course
</label>
<select class="form-select">
<option selected>
Select Course
</option>
<option>
HTML
</option>
<option>
CSS
</option>
<option>
Python
</option>
</select>
</div>
<div class="col-12 mb-3">
<label class="form-label">
Message
</label>
<textarea
class="form-control"
rows="4"
placeholder="Enter message">
</textarea>
</div>
<div class="col-12 mb-3">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="terms"
required>
<label
class="form-check-label"
for="terms">
I agree to the terms.
</label>
</div>
</div>
<div class="col-12">
<button
type="submit"
class="btn btn-primary">
Submit
</button>
<button
type="reset"
class="btn btn-secondary">
Reset
</button>
</div>
</div>
</form>.form-label for labels..form-control for many text-based inputs..form-select for select dropdowns..form-check for checkboxes and radio buttons..form-text for additional help text..input-group to combine inputs with text or buttons..form-control-lg and .form-control-sm for input sizing..is-valid and .is-invalid for validation states.required, disabled, and readonly when appropriate.for and id attributes.Question: Which Bootstrap class is commonly used to style text input fields?