Skip to content

Bootstrap Form Controls

Form controls go beyond basic text inputs. This lesson covers sizing variants, disabled and readonly states, range sliders, file inputs, and plaintext controls.

Bootstrap Form Controls Overview

Every text-like input, textarea, and select uses .form-control or .form-select as its base class, which can be resized with form-control-sm and form-control-lg, or disabled entirely with the native disabled attribute, which Bootstrap styles automatically.

Beyond text fields, Bootstrap styles specialized controls like range sliders (.form-range), file uploads (.form-control combined with type="file"), and read-only plaintext fields (.form-control-plaintext) that look like static text but remain part of a real form.

Concept Description Common Usage
form-control-sm / lg Smaller or larger sized input Compact toolbars or prominent hero forms
form-select Styled native select dropdown Choosing one option from a list
form-range Styled native range slider Volume, price range, or quantity sliders
form-control-plaintext Looks like text, behaves like a form field Read-only summary values inside a form
File input styling form-control applied to type=file Uploading documents or images

Bootstrap Form Controls Example

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

<label for="volume" class="form-label">Volume</label>
<input type="range" class="form-range" id="volume" min="0" max="100">

<input class="form-control" type="file">

<div class="row">
  <label class="col-sm-3 col-form-label">Email</label>
  <div class="col-sm-9">
    <input type="text" readonly class="form-control-plaintext" value="jane@example.com">
  </div>
</div>

The three sized inputs show how form-control-sm and form-control-lg scale padding and font size around the default. The range input becomes a native styled slider with form-range, the file input inherits standard control styling, and the plaintext example shows a read-only value that looks like text but still sits inside the form's grid layout.

Top 10 Bootstrap Form Controls Examples

These are the form control variations you'll reach for beyond a basic text input.

# Example Syntax
1 Small input <input class="form-control form-control-sm">
2 Large input <input class="form-control form-control-lg">
3 Select dropdown <select class="form-select"><option>A</option></select>
4 Small select <select class="form-select form-select-sm">...</select>
5 Range slider <input type="range" class="form-range">
6 File upload <input type="file" class="form-control">
7 Multiple file upload <input type="file" class="form-control" multiple>
8 Plaintext readonly field <input class="form-control-plaintext" readonly value="Fixed">
9 Disabled control <input class="form-control" disabled>
10 Color picker input <input type="color" class="form-control form-control-color">

Best Practices

  • Match input size (sm, default, lg) to the visual weight of the surrounding UI.
  • Use form-select instead of styling a native select manually.
  • Label range sliders clearly, and consider showing the current value with JavaScript.
  • Use accept attributes on file inputs to guide users toward valid file types.
  • Reserve form-control-plaintext for genuinely read-only display values inside a form layout.
  • Always pair disabled controls with a visual or text explanation of why they're disabled.
  • Test file inputs and color pickers across browsers, since native rendering varies.

Common Mistakes

  • Mixing form-control-sm and form-control-lg on fields that should look consistent within one form.
  • Using a plain <select> without form-select, resulting in inconsistent native styling.
  • Forgetting to display the current value of a range input, leaving users guessing.
  • Not restricting accepted file types, leading to confusing upload errors.
  • Using form-control-plaintext for fields that should actually be editable.
  • Styling disabled inputs to look identical to enabled ones, confusing users about interactivity.

Key Takeaways

  • form-control-sm and form-control-lg adjust input size without custom CSS.
  • form-select styles native dropdowns consistently with text inputs.
  • form-range and file inputs get automatic Bootstrap styling with minimal markup.
  • form-control-plaintext displays read-only values inside a real form's grid layout.
  • Disabled and readonly states should be visually distinct from normal editable fields.

Pro Tip

When using a range slider, bind a small script to update a nearby span with the current value so users get immediate feedback instead of guessing where the handle sits.

You now understand Bootstrap's form control variations. Continue to Bootstrap Input Groups to combine controls with icons, text, and buttons.