Skip to content
Bootstrap HTML

Documentation
On this page

Field sizing

Add .field-sizing on a .form-control or .form-select. The control grows to its contents. Bootstrap has no equivalent; there is no script.

Sizes are minified and gzip. A plugin figure includes the Bootstrap runtime that plugin imports. Shipping every plugin is bootstrap.bundle.min.js at 23.3 KB gzip, not the sum of these rows.
What runs it JavaScript
Bootstrap 5.3 No equivalent. Autosize is a third-party script. Not in bootstrap.min.js
This repo `field-sizing: content` on `.field-sizing` 0 KB
Markup this component accepts. The full inventory is /components.json.
Avoid
  • .form-control / .form-select alone stay width: 100%. Add .field-sizing.
  • An explicit width or height overrides field-sizing. Do not set those on the same control.

How it works

  • field-sizing: content sizes the field to its value, including the placeholder. An explicit width or height wins, so this class resets Bootstrap’s width: 100% on inputs and selects, and height on textareas.
  • A text input grows inline, from --bs-field-sizing-min-inline (15ch) to --bs-field-sizing-max-inline (50ch).
  • A textarea stays full width so a long placeholder does not collapse the box when the first character is typed. It grows in block size from 3lh to 10lh, then scrolls.
  • A select sizes to the selected option, not the longest one.
  • Without support, the control keeps the usual Bootstrap box.

Input

Type in the field. The width follows the value, within the min and max.

<label class="form-label" for="tag">Tag</label>
<input type="text" class="form-control field-sizing" id="tag" name="tag" value="css">

Textarea

Add lines. The height follows the text until the max block size.

<label class="form-label" for="note">Note</label>
<textarea class="form-control field-sizing" id="note" name="note">Type more lines to grow the box.</textarea>

Select

Pick a short or long option. The closed select follows the selected label.

<label class="form-label" for="size">Size</label>
<select class="form-select field-sizing" id="size" name="size">
  <option>S</option>
  <option selected>Medium</option>
  <option>Extra large, long label</option>
</select>

Accessibility

Label with <label for> or wrap the control. Do not use placeholder as the only name.

max-inline-size / max-block-size cap growth so the page does not jump without bound. The size change itself is not announced; do not rely on it as the only status.

Browser support

Three columns, not one baseline. The same row is on the overview.
No script Polyfill No fallback
field-sizing: content: Chrome 123+, Firefox 152+, Safari 26.2+. None None. Without field-sizing the control keeps Bootstrap’s fixed box.