Bootstrap full-width text-input within inline-form

html

responsive-design

form-group

flex-model

byAlex Kataev·Dec 14, 2024

To obtain a 'full-width text input' in an inline form with Bootstrap, use the form-inline and w-100 classes for the input element:

<form class="form-inline">
  <input type="text" class="form-control w-100" placeholder="Search">
  <button type="submit" class="btn btn-primary">Go</button>
</form>

In this snippet, w-100 ensures the input expands throughout the available horizontal space.

Responsive adaptation of input sizes

When dealing with varying devices and contexts, employ Bootstrap's responsive grid classes, specifically col-md-12, to manage input width across different screen sizes:

<form class="form-inline">
  <div class="col-md-12">
    <input type="text" class="form-control w-100" id="responsive-wide-input" placeholder="Search"/>
  </div>
  <button type="submit" class="btn btn-primary">Search</button>
</form>

For larger input fields, use input-group-lg in combination with input-group to achieve desired sizes:

<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="I like 'em big">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Go</button>
  </div>
</div>

This snippet gives you an input field of larger size, promoting better visibility.

Optimization using form-group structure

Enhance form alignment and spacing by wrapping your labels and control elements within form-group:

<form class="form-inline">
  <div class="form-group w-100">
    <label for="search" class="sr-only">Search:</label>
    <input type="text" id="search" class="form-control w-100" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-primary">Go</button>
</form>

This usage of form-group ensures each form element has optimal space, adheres to the Grid system fit, and maintains a visually pleasing layout.

Flex model utility

Bootstrap's flex classes offer a powerful way to handle layout. Particularly relevant to inline forms are d-flex and flex-fill, skillfully employed to execute desired align and fill behaviors:

<form class="form-inline d-flex">
  <div class="flex-fill mr-2">
    <input type="text" class="form-control w-100" placeholder="Stretch Armstrong">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

The flex-fill class ensures that the input naturally expands to fill any available space, all the while maintaining alignment with buttons or other form elements.

Incorporating custom styles

When Bootstrap default classes do not fully serve your needs, it's time to introduce some custom CSS:

.custom-full-width-input {
  width: calc(100% - 50px); /* Subtract button width and margin because we respect personal space */
}

Applying this custom class to your input will allow it to adopt the perfect width, even when sitting next to other elements:

<form class="form-inline">
  <input type="text" class="form-control custom-full-width-input" placeholder="Perfectly balanced">
  <button type="submit" class="btn btn-primary ml-2">Go</button>
</form>