How to Use Bootstrap 4 Flex to Fill the Available Content Space

Apply the .flex-fill class to any flex item to make it expand and occupy all remaining horizontal space in the container using the CSS property flex: 1 1 auto.

Bootstrap 4 introduced a comprehensive set of flexbox utility classes that eliminate the need for custom CSS when controlling layout behavior. If you need to make an element expand to fill the available content space in the twbs/bootstrap framework, the built-in flex utilities provide a declarative solution that works across all responsive breakpoints.

Understanding Bootstrap 4 Flex Utilities

Bootstrap 4 ships with utility classes that map directly to CSS Flexbox properties. These classes allow you to convert any element into a flex container and control how its children behave without writing additional stylesheets.

The .flex-fill Class

The primary tool for filling available space is the .flex-fill class. According to the Bootstrap 4 source code in scss/_utilities.scss, this class compiles to the following CSS:

.flex-fill {
  flex: 1 1 auto;
}

You can see the compiled output at line 1080 in dist/css/bootstrap.css within the twbs/bootstrap repository. The flex: 1 1 auto declaration tells the browser to allow the item to grow and shrink as needed, starting from its auto-calculated base size. When multiple siblings share this class, they divide the remaining space equally.

Supporting Flex Utilities

Several companion classes work alongside .flex-fill to create robust layouts:

• .d-flex – Establishes a flex container (display: flex)
• .flex-grow-1 – Explicitly sets flex-grow: 1 without the shorthand
• .flex-grow-0 – Prevents an item from growing (flex-grow: 0)
• .flex-shrink-0 – Stops an item from shrinking when space is tight
• .align-items-* and .justify-content-* – Control alignment along the cross and main axes

Practical Examples for Filling Available Space

The following patterns demonstrate how to use Bootstrap 4 flex utilities to fill available content space in common UI scenarios.

Equal-Width Columns

When you need multiple elements to share the full width of a row equally, apply .flex-fill to each child:

<div class="d-flex">
  <div class="p-2 flex-fill bg-light">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bg-secondary text-white">Flex item</div>
  <div class="p-2 flex-fill bg-light">Flex item</div>
</div>

Each child receives an equal portion of the remaining horizontal space after accounting for padding and borders.

Sidebar Layouts with Flexible Content

Create a fixed-width sidebar alongside a main content area that fills the remaining viewport width:

<div class="d-flex">
  <nav class="p-2 flex-shrink-0 bg-dark text-white" style="width: 200px;">
    Sidebar
  </nav>
  <main class="p-2 flex-fill bg-light">
    Main content that expands to fill the rest of the line.
  </main>
</div>

The flex-shrink-0 class on the sidebar prevents it from collapsing on smaller screens, while flex-fill ensures the main element consumes all leftover space.

Form Inputs with Fixed Buttons

Build a search bar where the input field stretches to fill available space while the submit button maintains its intrinsic size:

<form class="d-flex">
  <input type="text" class="form-control flex-fill me-2" placeholder="Search…">
  <button type="submit" class="btn btn-primary flex-shrink-0">Search</button>
</form>

The me-2 class adds a margin-end to separate the input from the button, while flex-fill allows the input to expand and flex-shrink-0 keeps the button at its natural width.

Selective Growth Behavior

When you need only one specific item to expand while siblings remain at their natural sizes, use .flex-grow-1 instead of .flex-fill:

<div class="d-flex">
  <div class="p-2 bg-light">Fixed size</div>
  <div class="p-2 bg-secondary text-white flex-grow-1">Only this item expands</div>
  <div class="p-2 bg-light">Fixed size</div>
</div>

This approach gives you granular control over which elements participate in space distribution without affecting the shrink behavior of other items.

Bootstrap 4 Source Code Reference

The flex utilities are implemented in the following locations within the twbs/bootstrap repository:

• scss/_utilities.scss – Defines the .flex-fill, .flex-grow-*, and .flex-shrink-* utility classes that generate the final CSS rules
• dist/css/bootstrap.css – Contains the compiled output where .flex-fill appears at line 1080 as flex: 1 1 auto
• site/src/content/docs/utilities/flex.mdx – Provides the official documentation and usage examples for these flex utilities

These files demonstrate how Bootstrap 4 translates SCSS mixins into the utility classes that power flexible, space-filling layouts.

Summary

• .flex-fill applies flex: 1 1 auto, causing an element to grow and fill available space while respecting sibling dimensions
• .d-flex establishes the flex container required for these utilities to function
• .flex-shrink-0 prevents fixed-width elements like sidebars or buttons from collapsing when space is constrained
• The utilities are defined in scss/_utilities.scss and compiled to dist/css/bootstrap.css in the twbs/bootstrap repository
• These classes work across all breakpoints and eliminate the need for custom flexbox CSS in most layout scenarios

Frequently Asked Questions

What is the difference between .flex-fill and .flex-grow-1 in Bootstrap 4?

While both classes make an element expand, .flex-fill sets the full flex: 1 1 auto shorthand, allowing the item to grow and shrink as needed with an automatic base size. .flex-grow-1 only sets flex-grow: 1 without explicitly defining the shrink factor or flex-basis, which means the element may inherit different shrink behavior depending on the browser's default styles or other CSS rules applied to the element.

Where is the .flex-fill class defined in the Bootstrap 4 source code?

The class is generated via the utilities API in scss/_utilities.scss within the twbs/bootstrap repository. The compiled CSS output appears at line 1080 in dist/css/bootstrap.css, where the rule reads .flex-fill { flex: 1 1 auto; }. The official documentation for this utility is located in site/src/content/docs/utilities/flex.mdx.

Can I use .flex-fill with Bootstrap 4's grid system?

Yes, but you must enable flexbox mode on the container first. Bootstrap 4's grid uses floats by default, so apply .d-flex to a row or column before using .flex-fill on child elements. Alternatively, you can use the flex utilities inside grid columns to control how content fills the available width within those specific columns, effectively combining the grid's structural breakpoints with flexbox's space distribution capabilities.

How do I prevent a flex item from shrinking in Bootstrap 4?

Apply the .flex-shrink-0 class to the element. This sets flex-shrink: 0 in the CSS, preventing the item from compressing below its intrinsic width when the container becomes too narrow. This technique is particularly useful for buttons, icons, navigation sidebars, or any UI element that must maintain its dimensions across all screen sizes while allowing other elements to shrink responsively.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}