Form Controls 

Bootstrap Form Controls are a set of utility classes that, given standard HTML inputs, turn them into uniform, beautiful, responsive form controls. All you need to do to use them is apply either the .form-control class to text inputs and textareas or to dropdown menus the .form-select class. This will, by default, give your inputs full-width, modern, rounded corners and smooth transition effects when pressing on them. They take away the pain of ever having to write CSS again, and give your website a great, “touch-friendly” feel whether in mobile or desktop browsers.

The summation is explained in layman‘s terms.

1. The Basic Input: .form-control

This is the most important class in Bootstrap forms. When you apply .form-control to an <input>, <textarea>, or <select>, it does three main things:

• Makes the input 100% wide (filling its container).
• Adds nice padding and rounded corners.
• Adds a subtle blue glow (focus effect) when a user clicks into it.

HTML

<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="name@example.com">

2. Textareas and Selects

These work just like the default inputs, but utilize the same classes so that your whole site will have a consistent appearance.

• Textareas: Use .form-control. You can add the rows attribute to set the height.
• Select Menus: Use the specific class .form-select. This adds the little “down arrow” icon and ensures the dropdown looks consistent.

3. Checks and Radios

Checkboxes and Radios appear a little different to most other fields in that they tend to require a wrapper so that the “tick box” aligns with the text label correctly.

• Wrapper: Use a <div> with the class .form-check.
• The Input: Use the class .form-check-input.
• The Label: Use the class .form-check-label.

Pro Tip: Want the elements sitting side-by-side (horizontally) instead of stacking, add the class .form-check-inline to the wrapper.

4. Range and File Inputs

Bootstrap even styles the trickier elements like sliders and file upload buttons:

• Range: Use .form-range. It turns the default slider into a sleek, horizontal bar.
• File Input: Just use .form-control on an <input type="file">. Bootstrap handles the “Browse” button styling automatically.

5. Sizing and States

Sometimes a standard input is too big or too small for your layout. You can quickly adjust them:

• Small: .form-control-sm
• Large: .form-control-lg

You can also set an input to Read-only (using the readonly attribute) or Disabled (using disabled), and Bootstrap will automatically grey them out so users know they can’t type there.

6. Layout Helpers

To keep things neat, Bootstrap provides a few utility classes:

• .form-label: Adds the correct amount of spacing below your text labels.
• .form-text: Used for “help text” (like “Your password must be 8 characters long”) to make it smaller and slightly muted.

Summary Table

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.