Flex Utilities
Bootstrap flex utilities expose the main CSS flexbox controls through readable classes for direction, wrapping, alignment, distribution, and gaps.
Core concept
Explain flex-direction, flex-wrap, justify-content, align-items, align-self, align-content, flex-grow, flex-shrink, and gap. Relate each group to a concrete layout problem rather than memorizing class names.
Using it in a real interface
Build a toolbar that wraps on small screens, distributes actions at opposite ends, and vertically centers icons with text. Explain why flex is usually preferable to manual margins for such arrangements.
Implementation notes
When flex behavior looks wrong, inspect the container rather than changing every child. The parent controls direction and distribution; individual children usually need only size or alignment exceptions.