How to set the button alignment in Bootstrap ?
Last Updated :
12 Sep, 2024
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:
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.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Aligning Buttons</title>
</head>
<body>
<h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
<div class="container">
<div class="text-left">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</div>
<div class="text-center">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</div>
<div class="text-right">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</div>
<center>
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</center>
</div>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
Output:
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.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Aligning Buttons</title>
<style type="text/css">
html,
body {
height: 200px;
}
</style>
</head>
<body>
<h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
<div class="container h-100">
<div class="d-flex h-100">
<div class="align-self-start mr-auto">
<button type="button" class="btn btn-danger">
Click Me!
</button>
</div>
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
<div class="align-self-end ml-auto">
<button type="button" class="btn btn-success">
Click Me!
</button>
</div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
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.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Aligning Buttons</title>
<style type="text/css">
html,
body {
height: 300px;
}
.top-left {
position: absolute;
top: 0;
left: 0;
}
.top-center {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.top-right {
position: absolute;
top: 0;
right: 0;
}
.mid-left {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.mid-center {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.mid-right {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.bottom-left {
position: absolute;
bottom: 0;
left: 0;
}
.bottom-center {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.bottom-right {
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<h1 style="color:green; text-align:center;">
GeeksforGeeks
</h1>
<div class="container h-100">
<div class="position-relative h-100">
<div class="position-absolute top-left">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
<div class="position-absolute top-center">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
<div class="position-absolute top-right">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
<div class="position-absolute mid-left">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
<div class="position-absolute mid-center">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
<div class="position-absolute mid-right">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
<div class="position-absolute bottom-left">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
<div class="position-absolute bottom-center">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
<div class="position-absolute bottom-right">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Output:
Similar Reads
How to set vertical alignment in Bootstrap ?
Setting vertical alignment in Bootstrap refers to the process of positioning elements along the vertical axis within a layout or container. This ensures consistent and visually appealing alignment of content, such as text, images, or buttons, relative to each other or to the container's boundaries.
2 min read
How to Align Text in Bootstrap Column ?
In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl
3 min read
How to align button to right side of text box in Bootstrap?
Aligning a button to the right of a text box in Bootstrap involves enclosing both within an "input-group" container. By adding the "input-group-append" class to the container, Bootstrap automatically positions the button to the right of the text box.There are some Common approaches :Table of Content
2 min read
How to align pills to center in Bootstrap ?
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. If you are new to Bootstrap we highly recommend going through our Bootstrap 4 introduction.Pills are a kind of Bootstrap badge with more rounded corners. Pills by default will act as an inline-
2 min read
How to align buttons in Card footer in Bootstrap ?
Alignment of buttons in the Card footer is so much easy when you are familiar with the float element. There is another way to align the left or right wherever you want to place the button in the footer of the card. In this article, you will learn how to align buttons in the footer section of a Boots
2 min read
How to col align right in Bootstrap 5 ?
Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn how we can right align the content in Col. We will
3 min read
How to align two navbars in bootstrap?
Aligning two navbars in Bootstrap involves utilizing its built-in navbar classes and custom CSS styles to create and position navigation bars on a web page. Bootstrap provides predefined classes for navbars that facilitate easy creation and customization. ApproachThe HTML document imports Bootstrap
2 min read
How to add Icons to Buttons in Bootstrap 5 ?
Adding Icons to the buttons enhances the overall look of the web page. Buttons are the components provided to create various buttons. Bootstrap 5 includes several predefined button styles, each serving its purpose. We can add icons to the buttons in several ways including Font Awesome Icons and Icon
2 min read
How to create an outline button in Bootstrap 4 ?
Before performing with outline classes of bootstrap just know about a little bit of button outline. An outline on buttons means to give an outline around the buttons. This '.btn-outline' class removes all background colors or styles from the button for giving the Effective, lighter, and highlighter
4 min read
How to Center the Text in Bootstrap ?
To center text in Bootstrap, you can use the class "text-center" on the parent element of the text you want to center. This class aligns the text horizontally in the center of its container, providing a simple and effective way to achieve centered text styling within Bootstrap layouts. Table of Cont
2 min read