Bootstrap

Button Alignment

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 icon Only 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