How to set the button alignment in Bootstrap ?

Bootstrap buttons are no different from any other DOM elements of an HTML document. Aligning them is more likely the same as aligning paragraphs, divs and sections. Here are some of the scenarios that one can encounter.

Here we are using some common methods:

Buttons in a container class

To align buttons in Bootstrap using the .text-align classes, wrap the button group inside a <div> and apply .text-left, .text-center, or .text-right classes. This aligns buttons horizontally within the container as specified.

Syntax:

class="text-left"|"text-center"|"text-right"

Note: You can also use the HTML5 <center> tag to align buttons to the center.

Example: In this example we aligns buttons using Bootstrap's text alignment classes: text-left, text-center, and text-right. Additionally, a <center> tag centers buttons, showcasing various button alignments within a Bootstrap container.

Output:

Buttons inside FlexBox

The Buttons inside FlexBox approach uses Bootstrap’s flex utilities by applying d-flex and justify-content classes to align buttons. You can align buttons left, center, right, or spaced evenly within a flex container using these classes.

Example: In this example we aligns buttons using Bootstrap's flex utilities. Buttons are positioned at the top-left, center, and bottom-right within a flex container, demonstrating various alignments using align-self-* classes.

Output:

Relative-Absolute method

This method is widely used online: the parent div is set to position: relative, and child divs are set to position: absolute. This allows precise alignment of elements, such as buttons, in any desired position.

Example: In this example we use CSS with absolute positioning to align buttons at various positions within a container, including top, middle, and bottom placements, both centered and aligned to the left and right edges.

Output:

👁 Image