How to use Bootstrap flex utilities?

Bootstrap's flex tool implements responsive layout through built-in classes without the need for custom CSS. Use d-flex or d-inline-flex to create a flexible container, combined with flex-row, flex-column, etc. to control the direction, justify-content and align-items to align the main axis and the cross axis, align-self to adjust a single element, flex-grow/shrink to control scaling, and support breakpoint responsive combinations such as sm, md, lg, etc. to quickly build a flexible layout.

Bootstrap's flex utilities make it easy to control layout, alignment, and sizing of elements using CSS Flexbox. You don't need to write custom CSS—just apply the built-in classes to achieve responsive layouts quickly.

Enable Flex Behavior

Add d-flex or d-inline-flex to make an element a flex container.

• d-flex : creates a block-level flex container
• d-inline-flex : creates an inline flex container

Example:

Set Flex Direction

Control the direction of flex items with these classes:

• flex-row : left to right (default)
• flex-row-reverse : right to left
• flex-column : top to bottom
• flex-column-reverse : bottom to top

Use responsive versions like flex-md-column to change direction at specific breakpoints.

Justify Content (Main Axis)

Align items along the main axis:

• justify-content-start : packed at start (default)
• justify-content-end : packed at end
• justify-content-center : centered
• justify-content-between : space between items
• justify-content-around : space around items
• justify-content-evenly : equal spacing

Example: class="d-flex justify-content-center" centers items horizontally.

Align Items (Cross Axis)

Align items along the cross axis:

• align-items-start : align to the top
• align-items-end : align to the bottom
• align-items-center : center vertically
• align-items-baseline : align text baselines
• align-items-stretch : stretch to fill container (default)

Useful for vertical centering: d-flex align-items-center .

Individual Item Alignment

Adjust single items with align-self :

• align-self-start , align-self-end , align-self-center , etc.
• Works even if parent uses different alignment

Example: one item sticks to the bottom while others are centered.

Grow and Shrink

Control how items fill available space:

• flex-grow-1 : item grows to fill space
• flex-grow-0 : item won't grow
• flex-shrink-1 : item shrinks if needed
• flex-shrink-0 : item won't shrink

Great for making one column expand while others stay fixed width.

Responsive Flex Utilities

All flex classes can be made responsive by adding breakpoint prefixes:

• d-flex → d-md-flex d-lg-none
• flex-column → flex-md-row
• justify-content-center → justify-content-lg-end

This lets you change layout behavior on mobile vs desktop.

Basically just combine utility classes to build flexible, responsive layouts without writing CSS. Check Bootstrap's official docs for full class lists and examples.

The above is the detailed content of How to use Bootstrap flex utilities?. For more information, please follow other related articles on the PHP Chinese website!