Bootstrap d-flex
In the examples below, you'll discover how to use Bootstrap's d-flex utility class to easily align buttons within a container. The d-flex class is part of Bootstrap's flexbox utilities, which provide a simple way to control the positioning and alignment of elements within a container.
justify-content-start
Aligns items to the start of the container along the main axis
HTML
<div class="container d-flex gap-2 justify-content-start">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
justify-content-end
Aligns items to the end of the container along the main axis
HTML
<div class="container d-flex gap-2 justify-content-end">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
justify-content-center
Aligns items at the center of the container along the main axis
HTML
<div class="container d-flex gap-2 justify-content-center">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
justify-content-between
Distributes items evenly along the main axis, with the first item aligned at the start and the last item aligned at the end
HTML
<div class="container d-flex gap-2 justify-content-between">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
justify-content-around
Distributes items evenly along the main axis, with equal space around them
HTML
<div class="container d-flex gap-2 justify-content-around">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
Basic Page
Button alignment
Button styles
Button with an icon
Button with text and icon on the left
Button with text and icon on the right
Content pagination
Include CSS and JS Files
Modal window
Popover
Popover with HTML content
Progress bars
Progress bars with tooltip
Popover with HTML content and a close button
Responsive cards
Responsive cards styled like business cards
Responsive cards styled like post-it notes
Responsive columns
Table
Table pagination with keyboard keys
Tabs
Tooltip
Tooltip with HTML content