Bootstrap Form Inputs

Bootstrap enhances form inputs with predefined styles and features. These inputs include text fields, checkboxes, radio buttons, and select lists. Using Bootstrap, you can create modern and visually appealing forms effortlessly.

Supported Form Controls

Bootstrap supports various form elements, including:

Text inputs (single-line input fields)
Textareas (multi-line input fields)
Checkboxes
Radio buttons
Select lists

Bootstrap Input

Bootstrap applies styles to <input> fields to enhance their appearance.

Example:

<input type="text" class="form-control" placeholder="Enter your name">

Result:

Bootstrap Textarea

Use the form-control class for textareas.

Example:

<textarea class="form-control" rows="4" placeholder="Enter your message"></textarea>

Result:

Bootstrap Checkboxes

If you want the user to choose from a list of pre-selected items, checkboxes are used. Bootstrap styles checkboxes with custom UI:

Example:

<input type="checkbox"> Accept Terms and Conditions

Result:

Bootstrap Radio Buttons

Radio buttons allow users to select one option.

Example:

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Result:

Radio buttons also can appear in the same line by using .radio-inline.

Example:

<label class="radio-inline"><input type="radio" name="gender" value="male"> Male</label>
<label class="radio-inline"><input type="radio" name="gender" value="female"> Female</label>

Result:

Bootstrap Select List

You can use select lists, if you want to give the customer a choice between several options. Styled dropdown selection:

<select class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Result:

Request more information

Bootstrap Form Inputs