Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Bootstrap 5) expand_more
Layout & Grid
Containers Responsive containers Rows Columns Auto columns Responsive columns Gutters Offsets Order utilities CSS Grid option
Content & Helpers
Reboot Typography Images Tables Figures Vertical rule Stretched link Text truncation Ratio helper Visually hidden
Forms
Form controls Form text Select menus Checks and radios Range inputs Input groups Floating labels Form layout Validation Datalists
Utilities
Spacing utilities Display utilities Flex utilities Grid gap utilities Position utilities Sizing utilities Text utilities Background utilities Border utilities Opacity utilities
Components I
Accordion Alerts Badges Breadcrumb Buttons Button groups Cards Carousel Close button Collapse
Components II
Dropdowns List group Modal Navbar Navs and tabs Offcanvas Pagination Placeholders Popovers Progress
Components III
Scrollspy Spinners Toasts Tooltips Colored links Focus ring helper Icon link helper Stacks helper Object fit utilities Interactions utilities
Customization & JS
CSS variables Sass variables Color modes Utility API Breakpoints JavaScript without jQuery Data attributes Programmatic plugin API Popper integration Bootstrap 4 to 5 migration
Bootstrap 5 / Utilities

Flex utilities

Learn Flex utilities in Bootstrap 5 with a focused explanation, a topic-specific example, edge guidance, and a mastery check.

12 min read • Intermediate
bootstrap-033.html
html 
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2"><span>Profile</span><button class="btn btn-primary">Edit</button></div>
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Flex utilities Mastery Check →
← PREVIOUS
Display utilities
NEXT →
Grid gap utilities