Bootstrap Forms & Inputs — Form Controls and Layout

DodaTech Updated 2026-06-28 5 min read

In this tutorial, you will learn about Bootstrap Forms & Inputs. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap form utilities provide styled form controls, grid-based form layouts, input groups, and floating labels for building consistent and accessible forms.

What You'll Learn

You will learn how to style text inputs, selects, textareas, checkboxes, and radio buttons, use grid layouts for forms, create input groups, and add floating labels.

Why It Matters

Forms collect user data. DodaTech's registration and feedback forms use Bootstrap's form classes for consistent styling, validation feedback, and responsive layouts.

Real-World Use

Doda Browser's settings page uses Bootstrap forms with floating labels for account details, toggles for preferences, and input groups for search filters.

flowchart LR
    A[Tables] --> B[Forms & Inputs]
    B --> C[Text Inputs]
    B --> D[Select Menus]
    B --> E[Checkboxes & Radios]
    B --> F[Layout]
    B --> G[Input Groups]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Text Inputs

<div class="mb-3">
  <label for="name" class="form-label">Full Name</label>
  <input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="mb-3">
  <label for="email" class="form-label">Email address</label>
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="bio" class="form-label">Bio</label>
  <textarea class="form-control" id="bio" rows="3" placeholder="Tell us about yourself"></textarea>
</div>

Expected output: Three form fields with styled labels, inputs, and consistent spacing.

Select Menus

<div class="mb-3">
  <label for="country" class="form-label">Country</label>
  <select class="form-select" id="country">
    <option selected>Choose your country</option>
    <option value="US">United States</option>
    <option value="UK">United Kingdom</option>
    <option value="IN">India</option>
    <option value="DE">Germany</option>
  </select>
</div>

<label for="multiselect" class="form-label">Multiple select</label>
<select class="form-select" id="multiselect" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

Expected output: A styled single-select dropdown and a multi-select box with consistent Bootstrap styling.

Checkboxes and Radios

<div class="mb-3">
  <label class="form-label">Interests</label>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="webdev">
    <label class="form-check-label" for="webdev">Web Development</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="security">
    <label class="form-check-label" for="security">Security</label>
  </div>
</div>

<label class="form-label">Plan selection</label>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="free" checked>
  <label class="form-check-label" for="free">Free</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="pro">
  <label class="form-check-label" for="pro">Pro ($9/mo)</label>
</div>

Expected output: Styled checkboxes with labels and radio buttons in a vertical layout.

Inline Form Controls

<div class="mb-3">
  <label class="form-label">Preferences</label>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="emailNotify" checked>
    <label class="form-check-label" for="emailNotify">Email notifications</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="smsNotify">
    <label class="form-check-label" for="smsNotify">SMS notifications</label>
  </div>
</div>

Expected output: Checkboxes displayed horizontally inline instead of vertically stacked.

Form Grid Layout

Use Bootstrap's grid for multi-column forms:

<form>
  <div class="row mb-3">
    <div class="col-md-6">
      <label for="firstName" class="form-label">First Name</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">Last Name</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>
  <div class="mb-3">
    <label for="address" class="form-label">Address</label>
    <input type="text" class="form-control" id="address">
  </div>
  <div class="row mb-3">
    <div class="col-md-4">
      <label for="city" class="form-label">City</label>
      <input type="text" class="form-control" id="city">
    </div>
    <div class="col-md-4">
      <label for="state" class="form-label">State</label>
      <select class="form-select" id="state">
        <option selected>Choose</option>
        <option>California</option>
        <option>Texas</option>
        <option>New York</option>
      </select>
    </div>
    <div class="col-md-4">
      <label for="zip" class="form-label">Zip Code</label>
      <input type="text" class="form-control" id="zip">
    </div>
  </div>
</form>

Expected output: A form with first/last name side by side on desktop, and city/state/zip in three columns.

Input Groups

Attach text or buttons to inputs:

<div class="mb-3">
  <label for="domain" class="form-label">Website</label>
  <div class="input-group">
    <span class="input-group-text">https://</span>
    <input type="text" class="form-control" id="domain" placeholder="example.com">
    <button class="btn btn-primary" type="button">Check</button>
  </div>
</div>

<div class="mb-3">
  <label for="amount" class="form-label">Donation amount</label>
  <div class="input-group">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" id="amount">
    <span class="input-group-text">.00</span>
  </div>
</div>

Expected output: Inputs with prepended and appended text/buttons as single visual units.

Floating Labels

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
  <label for="floatingEmail">Email address</label>
</div>
<div class="form-floating mb-3">
  <select class="form-select" id="floatingSelect">
    <option selected>Open this select menu</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <label for="floatingSelect">Select an option</label>
</div>

Expected output: Inputs where the label floats above when the field is focused or has a value.

Form Sizing

<input class="form-control form-control-lg mb-2" type="text" placeholder="Large input">
<input class="form-control mb-2" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder="Small input">

<select class="form-select form-select-lg mb-2">
  <option>Large select</option>
</select>
<select class="form-select form-select-sm">
  <option>Small select</option>
</select>

Expected output: Inputs and selects in large, default, and small sizes.

Disabled and Readonly

<input class="form-control mb-2" type="text" placeholder="Disabled input" disabled>
<input class="form-control mb-2" type="text" value="Readonly value" readonly>

Expected output: A grayed-out disabled input and a readonly input that cannot be edited but looks normal.

Common Mistakes

1. Missing form-label for Accessibility

Every form control needs an associated <label> with for attribute matching the input's id. Labels improve accessibility and click target size.

2. Using form-control on Selects

Use form-select for <select> elements, not form-control. The classes have different styling for dropdown appearance.

3. Forgetting the form-check Wrapper

Checkboxes and radios need the .form-check wrapper div. Without it, the checkbox styling does not apply correctly.

4. Not Matching for and id Attributes

The label's for attribute must match the input's id. If they differ, clicking the label does not focus the input.

5. Using Placeholder as Label

Placeholders disappear when the user types. Always use a visible <label> for accessibility. Floating labels are an acceptable alternative.

Practice Questions

What class styles text inputs in Bootstrap? form-control styles text, email, password, number, and other text-like inputs.
How do you create an inline checkbox group? Add form-check-inline to each form-check wrapper div.
What is an input group used for? Input groups attach additional text, buttons, or icons to the beginning or end of an input.
How do you make a form with side-by-side fields? Use Bootstrap's grid row and column classes inside the form.
What is the difference between disabled and readonly? Disabled inputs are grayed out, cannot be focused, and are excluded from form submission. Readonly inputs look normal, can be focused, and are included in submission.

Challenge

Create a sign-up form with first name, last name, email, password, password confirmation, a terms checkbox, and a submit button. Use grid layout for name fields and floating labels for all inputs.

FAQ

Can I use Bootstrap forms without JavaScript?

Yes. Bootstrap form styling is CSS-only. JavaScript is only needed for validation feedback or dynamic form behavior.

How do I make a switch toggle instead of a checkbox?

Use the form-check form-switch classes on the form-check wrapper to convert a checkbox into a toggle switch.

What is the difference between form-control and form-select?

form-control is for text-like inputs. form-select is specifically for select dropdowns and includes dropdown arrow styling.

Can I use validation icons with Bootstrap forms?

Yes. Bootstrap includes validation states with icons when .was-validated is applied or invalid/valid feedback classes are used.

How do I create a file upload input?

Use input type=file with form-control class. Bootstrap styles file inputs consistently across browsers.

Mini Project

Build a complete contact form with name, email, subject (select), message (textarea), and a submit button. Use floating labels, input groups for the website field, and grid layout for name fields.

What's Next

Master Form Validation for client-side validation. Then explore Bootstrap Buttons for button styling.

← Previous Bootstrap Tables — Styled and Responsive Data Tables Next → Bootstrap Form Validation — Client-Side Validation Feedback

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap