0
0
BootstrapHow-ToBeginner · 4 min read

How to Use Form Control in Bootstrap: Simple Guide

Use the form-control class on input, select, and textarea elements to style them with Bootstrap's default form styles. This class makes form elements full-width, adds padding, border, and rounded corners for a clean, consistent look.
📐

Syntax

Apply the form-control class to form elements like <input>, <select>, and <textarea>. This class styles the element with Bootstrap's default form appearance.

  • input.form-control: Text fields, email, password, etc.
  • select.form-select: Dropdown menus.
  • textarea.form-control: Multi-line text input.
html
<input type="text" class="form-control" placeholder="Enter text">

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

<textarea class="form-control" rows="3"></textarea>
Output
A styled text input box, a styled dropdown menu, and a styled multi-line text area, all with consistent padding, border, and full width.
💻

Example

This example shows a simple Bootstrap form with text input, email input, select dropdown, and textarea all styled using form-control. The form controls are responsive and easy to use.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Form Control Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <form>
      <div class="mb-3">
        <label for="name" class="form-label">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="country" class="form-label">Country</label>
        <select class="form-select" id="country">
          <option>United States</option>
          <option>Canada</option>
          <option>Other</option>
        </select>
      </div>
      <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" rows="4" placeholder="Write your message here"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</body>
</html>
Output
A clean form with labeled fields: a text input for name, an email input, a dropdown for country, a multi-line textarea for message, and a blue submit button, all styled with consistent spacing and full width.
⚠️

Common Pitfalls

Common mistakes when using Bootstrap form controls include:

  • Not adding the form-control class, which results in unstyled, default browser inputs.
  • Using form-control on unsupported elements like button or div.
  • Forgetting to wrap inputs in form-group or spacing classes like mb-3 for proper spacing.
  • Using outdated Bootstrap versions where class names or behaviors differ.
html
<!-- Wrong: Missing form-control class -->
<input type="text" placeholder="No styling">

<!-- Right: Added form-control class -->
<input type="text" class="form-control" placeholder="Styled input">
Output
The first input appears plain and small, the second input is full width with padding and border styling.
📊

Quick Reference

ElementBootstrap ClassDescription
form-controlStyles text, email, password inputs with padding and border
form-selectStyles dropdown menus with consistent look