# How to Use Bootstrap 4 Flex to Fill the Available Content Space
> Learn how to use Bootstrap 4 flex to fill available content space with the .flex-fill class. Make your flex items expand and occupy remaining horizontal space easily.
- Repository: [Bootstrap/bootstrap](https://github.com/twbs/bootstrap)
- Tags: how-to-guide
- Published: 2026-02-15
---
**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`](https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss), this class compiles to the following CSS:
```css
.flex-fill {
flex: 1 1 auto;
}
```
You can see the compiled output at line 1080 in [`dist/css/bootstrap.css`](https://github.com/twbs/bootstrap/blob/main/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:
```html
Flex item with a lot of content
Flex item
Flex item
```
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:
```html
Main content that expands to fill the rest of the line.
```
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:
```html
```
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`:
```html
Fixed size
Only this item expands
Fixed size
```
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`](https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss)** – Defines the `.flex-fill`, `.flex-grow-*`, and `.flex-shrink-*` utility classes that generate the final CSS rules
- **[`dist/css/bootstrap.css`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss) and compiled to [`dist/css/bootstrap.css`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss)** within the twbs/bootstrap repository. The compiled CSS output appears at line 1080 in **[`dist/css/bootstrap.css`](https://github.com/twbs/bootstrap/blob/main/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.