Bootstrap makes managing complex modern CSS layouts incredibly easy through its intensive Flexbox support. The foundation of this system starts purely with explicitly defining the display property of a container so its children know how to align.
Standard HTML elements (like <div>) default to acting as isolated blocks, stacking vertically on top of each other. By simply applying the .d-flex utility class to the parent wrapper, you instantly transform it into a flexbox container. By default, this immediately forces all of its children to align horizontally in a row.
<!-- A standard HTML Div stacks vertically -->
<div>
<div>Item 1</div>
<div>Item 2</div>
</div>
<!-- Applying .d-flex aligns items horizontally side-by-side! -->
<div class="d-flex">
<div>Item 1</div>
<div>Item 2</div>
</div>When you use .d-flex, the container itself still acts like a block element, taking up 100% of the available horizontal width. If you want the flex container to only take up as much space as the items inside it, use .d-inline-flex.
<!-- The wrapper container shrinks to strictly fit the inner content -->
<div class="d-inline-flex">
<div>Item 1</div>
<div>Item 2</div>
</div>One of the most powerful reasons to use Bootstrap is its breakpoint system. You often want items to stack vertically on mobile phones (where screens are narrow) but align side-by-side using Flexbox on Desktop monitors!
To do this, simply use the responsive classes: .d-sm-flex, .d-md-flex, .d-lg-flex, etc.
<!-- Starts out vertical/stacked. At the "Medium" (MD) screen size, it toggles into Flexbox! -->
<div class="d-grid d-md-flex gap-2">
<div>Menu Link 1</div>
<div>Menu Link 2</div>
<div>Menu Link 3</div>
</div>