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.

How to Right Align Bootstrap Buttons

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.

Bootstrap 5 Align Button Right

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”.

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>

Here’s how to align any Bootstrap element to the right within a div.

Bootstrap 4 Align Buttons Right

Bootstrap version four supports the same alignment classes as version five:

<div className="col d-flex justify-content-end">
  <button className="btn btn-primary" type="button">
    Bootstrap v4 Right Aligned Button
  </button>
</div>

The most important classes are d-fled and justify-content-end. The justify-content-end adds the style of the same name in the DOM.

Bootstrap 3 Align Buttons Right

The simplest way to right align a button in a div with Bootstrap 3 is with the text-right class. It applies a styling of the same name in the DOM:

<div className="col text-right">
  <button className="btn btn-primary" type="button">
    Top Right
  </button>
</div>

This is a very different approach than Bootstrap 4 and 5 because flex classes are not supported. However, you can still use flex stylings in custom classes.

Content inside buttons, like text and icons, can also be aligned.

How to Center Bootstrap Buttons

Bootstrap buttons can be horizontally centered using flex classes in newer versions of Bootstrap.

Center Button in Bootstrap 5 and 4

The easiest way to horizontally center a button in Bootstrap 5 and Bootstrap 4 is by adding classes d-flex and justify-content-center to the parent div.

The easiest way to vertically center a Button in Bootstrap 5 and Bootstrap 4 is to add class align-items-center to the wrapping element.

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

This code will create the “Center Center” button pictured in the layout image in the intro section.

Center Button in Bootstrap 3

If you are using Bootstrap 3, flex classes are not supported. However, you can use flex in custom classes.

The best supported class for centering a button in Bootstrap 3 is text-center. This adds a style of the same name to the wrapping div in the DOM.

<div className="col text-center">
  <button className="btn btn-primary" type="button">
    Center
  </button>
</div>

After aligning the buttons, consider changing their background color with a custom scss variable.

How to Left Align Bootstrap Buttons

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.

How to Vertically Align Bootstrap Buttons

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. These are all vertically aligned buttons in Bootstrap columns.

//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>

FAQs

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