Bootstrap Input Sizing

Bootstrap 5 Form Input Sizing

Input Sizing in Forms

Bootstrap 5 provides classes to easily control the height and width of your form input elements, helping you create visually balanced and responsive forms.

Set the heights of input elements using classes like .form-control-lg (for larger inputs) and .form-control-sm (for smaller inputs) on <input>, <select>, and <textarea> elements.

Set the widths of input elements primarily using Bootstrap’s grid column classes (e.g., .col-lg-6, .col-sm-4, or just .col for auto-sizing within a row).

Height Sizing

You can make form controls taller or shorter using .form-control-lg and .form-control-sm respectively.

Visual Example:

`.form-control-sm` (Small input)


`.form-control` (Default input)


`.form-control-lg` (Large input)

The following example shows input elements with different heights:

<form>
  <div class="mb-3">
    <label for="inputSmall" class="form-label">Small input (.form-control-sm)</label>
    <input type="text" class="form-control form-control-sm" id="inputSmall" placeholder=".form-control-sm">
  </div>
  <div class="mb-3">
    <label for="inputDefault" class="form-label">Default input (.form-control)</label>
    <input type="text" class="form-control" id="inputDefault" placeholder="Default form-control">
  </div>
  <div class="mb-3">
    <label for="inputLarge" class="form-label">Large input (.form-control-lg)</label>
    <input type="text" class="form-control form-control-lg" id="inputLarge" placeholder=".form-control-lg">
  </div>
  <div class="mb-3">
    <label for="selectLarge" class="form-label">Large select (.form-select-lg)</label>
    <select class="form-select form-select-lg" id="selectLarge">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
    </select>
  </div>
</form>

<!--
  Note: For <select> elements, use `.form-select-lg` and `.form-select-sm` for height sizing.
  The older `.input-lg` and `.input-sm` classes are deprecated.
-->

Sizing in Horizontal Forms:

When using horizontal forms (with labels and controls on the same line via the grid system), you can also size labels using .col-form-label-sm or .col-form-label-lg to match the input size.

<form>
  <div class="row mb-3 align-items-center">
    <label for="inputLargeHorizontal" class="col-sm-3 col-form-label col-form-label-lg">Large Label & Input</label>
    <div class="col-sm-9">
      <input type="text" class="form-control form-control-lg" id="inputLargeHorizontal" placeholder="Large input">
    </div>
  </div>
  <div class="row mb-3 align-items-center">
    <label for="inputDefaultHorizontal" class="col-sm-3 col-form-label">Default Label & Input</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputDefaultHorizontal" placeholder="Default input">
    </div>
  </div>
  <div class="row mb-3 align-items-center">
    <label for="inputSmallHorizontal" class="col-sm-3 col-form-label col-form-label-sm">Small Label & Input</label>
    <div class="col-sm-9">
      <input type="text" class="form-control form-control-sm" id="inputSmallHorizontal" placeholder="Small input">
    </div>
  </div>
</form>

<!-- Common Obstacle: Mismatched label and input sizes in horizontal forms. Use corresponding .col-form-label-* and .form-control-* classes. -->

Column Sizing (Width)

Control the width of form inputs using Bootstrap’s grid column classes within a .row. This is the preferred method for managing input widths.

Visual Example of inputs within grid columns:

`col-2` (Input in a 2-column wide container)


`col-3` (Input in a 3-column wide container)


`col-4` (Input in a 4-column wide container)

The following example shows input elements placed within different grid column widths. Remember that .col-* classes apply to the smallest breakpoint (extra small) and up, unless overridden by larger breakpoint classes (e.g., .col-sm-*, .col-md-*).

<form>
  <div class="row g-3 mb-3"> <!-- g-3 adds gutters -->
    <div class="col-md-2">
      <label for="ex1" class="form-label">col-md-2</label>
      <input class="form-control" id="ex1" type="text" placeholder=".col-md-2">
    </div>
    <div class="col-md-3">
      <label for="ex2" class="form-label">col-md-3</label>
      <input class="form-control" id="ex2" type="text" placeholder=".col-md-3">
    </div>
    <div class="col-md-4">
      <label for="ex3" class="form-label">col-md-4</label>
      <input class="form-control" id="ex3" type="text" placeholder=".col-md-4">
    </div>
  </div>
  <div class="row g-3">
    <div class="col-auto"> <!-- col-auto sizes to content -->
        <label for="ex4" class="form-label">col-auto</label>
        <input class="form-control" id="ex4" type="text" placeholder="Auto width">
    </div>
    <div class="col">
        <label for="ex5" class="form-label">col (fills remaining space)</label>
        <input class="form-control" id="ex5" type="text" placeholder="Takes remaining width">
    </div>
  </div>
</form>

<!--
  Practical Application: Column sizing is essential for creating complex form layouts, like multi-column address forms or search filters.
  Note: The `.col-xs-*` classes from older Bootstrap versions are now simply `.col-*` for the smallest breakpoint.
-->

Help Text (formerly .help-block)

Use the .form-text class to add block-level help text or guidance below your form inputs. This replaces the older .help-block class.

<form>
  <div class="mb-3">
    <label for="inputPasswordHelp" class="form-label">Password</label>
    <input type="password" id="inputPasswordHelp" class="form-control" aria-describedby="passwordHelpBlock">
    <div id="passwordHelpBlock" class="form-text">
      Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
    </div>
  </div>
  <div class="mb-3">
    <label for="inputUsernameHelp" class="form-label">Username</label>
    <input type="text" id="inputUsernameHelp" class="form-control" aria-describedby="usernameHelpInline">
    <span id="usernameHelpInline" class="form-text">
      Must be 5-10 characters long. (This is inline help text using span)
    </span>
  </div>
</form>

<!--
  Accessibility: Associate the help text with the input using `aria-describedby` on the input, pointing to the `id` of the help text element.
  Resource: Bootstrap Forms Overview: https://getbootstrap.com/docs/5.3/forms/overview/#help-text
-->