Bootstrap provides several classes for styling and controlling HTML form elements such as text inputs, passwords, email fields, textareas, select boxes, checkboxes, radio buttons, range inputs, and file inputs. These controls help you create clean, consistent, and responsive forms.
Form controls are the elements through which users enter or select information in an HTML form.
Common form controls include:
Bootstrap provides classes to make these controls visually consistent.
A text input is used to collect short text such as a name, username, city, or subject.
<input type="text"
class="form-control"
placeholder="Enter your name">The email input is used for collecting email addresses.
<input type="email"
class="form-control"
placeholder="name@example.com">
The email input type also allows browsers to provide
appropriate input behavior and basic validation.
Password fields hide the characters entered by the user.
<input type="password"
class="form-control"
placeholder="Enter password">The number input is useful for numeric values such as age, quantity, marks, or price.
<input type="number"
class="form-control"
placeholder="Enter age">
The min and max attributes can define the
allowed numeric range.
<input type="number"
class="form-control"
min="1"
max="100">These HTML attributes provide client-side constraints. Server-side validation should also be performed when processing submitted data.
The step attribute controls the allowed increments for
numeric inputs.
<input type="number"
class="form-control"
step="5">
For example, a step of 5 allows values such as 0, 5, 10,
15, and so on when the browser applies the constraint.
The date input allows users to select a calendar date.
<input type="date"
class="form-control">The time input allows users to select a time.
<input type="time"
class="form-control">
HTML provides different date and time input types. For example,
datetime-local allows users to enter a local date and time.
<input type="datetime-local"
class="form-control">A textarea is used when users need to enter multiple lines of text.
<textarea
class="form-control"
rows="4"
placeholder="Enter address">
</textarea>
The .form-select class styles a standard HTML
<select> element.
<select class="form-select">
<option selected>
Select Course
</option>
<option>
HTML
</option>
<option>
CSS
</option>
</select>
The HTML multiple attribute allows users to select
multiple options from a select control.
<select class="form-select"
multiple>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>Python</option>
</select>On a desktop browser, multiple options can generally be selected using the operating system's standard multi-selection behavior.
Checkboxes are useful when users can select one or more independent 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 are used when the user should choose one option from a group.
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="course"
id="htmlCourse">
<label
class="form-check-label"
for="htmlCourse">
HTML
</label>
</div>The range input creates a slider that allows users to choose a value from a specified range.
<input type="range"
class="form-range"
min="0"
max="100">
Bootstrap uses the .form-range class to style range
inputs.
The step attribute can control how the range value changes.
<input type="range"
class="form-range"
min="0"
max="100"
step="10">
The form-control class can be used to style a file input.
<input type="file"
class="form-control">The browser provides the file-selection interface. Uploading and storing the selected file requires server-side processing.
The HTML color input can be styled with the
.form-control-color class.
<input type="color"
class="form-control form-control-color"
value="#563d7c">Bootstrap provides large and small sizes for many text-based form controls.
<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 disabled attribute prevents the user from interacting
with a control.
<input
type="text"
class="form-control"
value="Disabled Field"
disabled>
The readonly attribute prevents users from editing the
value of a text-based control.
<input
type="text"
class="form-control"
value="STU-101"
readonly>Readonly and disabled are different. A disabled control cannot be interacted with, while a readonly text control can generally still be focused and its value is submitted with the form.
The placeholder attribute displays a short hint inside
an empty form control.
<input
type="text"
class="form-control"
placeholder="Enter your name">
The required attribute tells the browser that a value
must be provided before the form can be submitted.
<input
type="text"
class="form-control"
required>
The .form-text class provides additional information
about a form control.
<label class="form-label">
Password
</label>
<input
type="password"
class="form-control">
<div class="form-text">
Password should be kept private.
</div>An input group can combine a form control with text or other elements.
<div class="input-group">
<span class="input-group-text">
₹
</span>
<input
type="number"
class="form-control"
placeholder="Amount">
</div>Bootstrap provides validation classes for displaying valid and invalid states.
<input
class="form-control is-valid"
value="Correct value">
<input
class="form-control is-invalid"
value="">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please enter a value.
</div>Bootstrap form controls can be combined with the grid system to create responsive layouts.
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">
First Name
</label>
<input
type="text"
class="form-control">
</div>
<div class="col-md-6 mb-3">
<label class="form-label">
Last Name
</label>
<input
type="text"
class="form-control">
</div>
</div>On smaller screens, the columns can stack because of Bootstrap's responsive grid behavior.
The following example combines different Bootstrap form controls commonly used in a student admission form.
This example combines several Bootstrap form controls into one responsive form.
<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">
Age
</label>
<input
type="number"
class="form-control"
min="1"
max="100">
</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">
Address
</label>
<textarea
class="form-control"
rows="4">
</textarea>
</div>
<div class="col-12 mb-3">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="agree">
<label
class="form-check-label"
for="agree">
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-control for many text-based inputs..form-select for select controls..form-check for checkboxes and radio buttons..form-range for range sliders..form-control-color for color inputs..form-control-lg and .form-control-sm for input sizing.disabled to prevent interaction with a control.readonly when a text value should not be edited.required for required fields.min, max, and step where appropriate for numeric controls..form-text for helpful instructions..is-valid and .is-invalid for validation states.Question: Which Bootstrap class is used to style a standard select dropdown?