Easily Align Bootstrap Buttons (Right/Left/Center/Vertical)

Bootstrap makes layouts easy and has an excellent component library. However, sometimes it can be tricky to get buttons and other components aligned exactly as needed.

In this tutorial I will build the grid shown below. It will have buttons aligned right, left, and vertically. I will show alignment with both flex CSS and bootstrap classes.

It’s important to note that the button alignments below work exactly the same in a div without any bootstrap grid classes as they do in a grid. Also, the Bootstrap alignment classes work in both Bootstrap v4 and Bootstrap v5.

A Code Sandbox with full React and Bootstrap code is in the Resources section.

Bootstrap Buttons Aligned Right

When it comes to right aligning buttons in Bootstrap, the styling and classes are actually applied to the button’s container, not to the button itself. This makes sense because we are aligning the button relative to its parent container.

The goal is to make the container a flex container and to justify the contents to the end (horizontally align to the right).

Code for a basic example of a right aligned button in bootstrap is below. This example is using built-in bootstrap classes to apply display: flex and justify-content: end.

<div class="d-flex justify-content-end">
  <button class="btn btn-primary" type="button">
    Button
  </button>
</div>

The below example accomplishes the same right alignment, but does it using regular CSS values instead of Bootstrap.

<div style={{ display: "flex", justifyContent: "end" }}>
  <button class="btn btn-primary" type="button">
    Button
  </button>
</div>

Now lets look at right aligning buttons in the Bootstrap grid I created. As info, the border and margin classes only work in Bootstrap v5, but the grid and alignment classes work in Bootstrap v4 and v5.

//row 1
<div class="col  d-flex justify-content-end align-items-start">
  <button class="btn btn-primary" type="button">
    Top Right
  </button>
</div>

//row 2
<div class="col  d-flex justify-content-end align-items-center">
  <button class="btn btn-primary" type="button">
    Center Right
  </button>
</div>

//row 3
<div class="col d-flex justify-content-end align-items-end">
  <button class="btn btn-primary" type="button">
    Bottom Right
  </button>
</div>

Take a look at the dev tools screenshot below. The d-flex class applies display: flex (and nothing else) and the justify-content-end class applies only justify-content: flex-end. Bootstrap created these classes to abstract away from CSS and keep everything in the “Bootstrap world”.

Bootstrap right align classes in dev tools.
Bootstrap classes in dev tools

A final way of aligning buttons to the right is with the ms-auto class in Bootstrap v5. This applies margin-left: auto !important. The container must be a block element (or have display: block set) and needs a fixed width (not a %).

<div class="ms-auto" style={{ width: "200px" }}>
  <button class="btn btn-primary" type="button">
    Button
  </button>
</div>

Bootstrap Buttons Aligned Left

Similar to right aligned buttons, left aligned buttons are aligned relative to their container. All alignment styling and classes are applied at the container level.

Left alignment is the default, but if you need to manually accomplish it you can do so with d-flex and justify-content-start in Bootstrap.

<div class="d-flex justify-content-start">
  <button class="btn btn-primary" type="button">
    Button
  </button>
</div>

The below example accomplishes the same left alignment, but does it using regular CSS values instead of Bootstrap.

<div style={{ display: "flex", justifyContent: "start" }}>
  <button class="btn btn-primary" type="button">
    Button
  </button>
</div>

If you want to see how to left align Bootstrap buttons in a grid, see my Code Sandbox.

Left aligned Bootstrap Buttons
Left aligned Bootstrap Buttons

Bootstrap Buttons Aligned Vertically

Once again, Bootstrap button vertical alignment is accomplished relative to the container. You will need to set the container to display: flex just like with horizontal alignment.

The key difference with vertical alignment is that you need to use align-items in a flex container to control vertical alignment.

The align-items property has three values:

  • align-items: start
  • align-items: center
  • align-items: end

These correspond to top, center, and bottom vertical alignment. The three respective Bootstrap classes are as follows:

  • align-items-start
  • align-items-center
  • align-items-end

The default value is align-items: start. Here is a basic example of a div with a button center aligned vertically:

<div class="d-flex align-items-center">
  <button class="btn btn-primary" type="button">
    Button
  </button>
</div>

And here is the same using regular CSS (actually JSS since I am using React):

<div style={{ display: "flex", alignItems: "center" }}>
  <button class="btn btn-primary" type="button">
    Button
  </button>
</div>

Below is code from the Bootstrap grid I created. It shows top, center, and bottom vertical alignment for Bootstrap buttons.

Vertically aligned Bootstrap buttons
Vertically aligned Bootstrap buttons
//row 1
<div class="col border-end  d-flex justify-content-center align-items-start">
  <button class="btn btn-primary" type="button">
    Top Center
  </button>
</div>

//row 2
<div class="col border-end  d-flex justify-content-center align-items-center">
  <button class="btn btn-primary" type="button">
    Center Center
  </button>
</div>

//row 3
<div class="col border-end d-flex justify-content-center align-items-end">
  <button class="btn btn-primary" type="button">
    Bottom Center
  </button>
</div>

Resources

Here’s how to add hover styling to Bootstrap buttons.

Here’s how to handle vanilla Bootstrap Button onClick with TypeScript, and here’s how to handle React-Bootstrap Button onClick.

Here’s everything you need to know about padding in Bootstrap.

Bootstrap Button API

If you’ve never tried Material-UI, I highly recommend it. Take a look at how to align buttons in every way in MUI.

Code Sandbox Link

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.