PUBLISHED ON: AUGUST 7, 2021
How to Center Buttons in Bootstrap?
The button is a useful and important component on the webpage. The buttons can be center-aligned in many ways. In this tutorial, we will learn to center align buttons in Bootstrap.
Center align buttons in the container class
The buttons in container class or inline blocks can be centered using text-align utilities. Use .text-center class to center align buttons in the container class.
Example: Center align button in a container class
In this example. we have placed the buttons in the container and aligned them using text utilities.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Center align buttons in container class</h2>
<div class="container">
<div class="text-center">
<button class="btn btn-primary">BUTTON 1</button>
<button class="btn btn-success">BUTTON 2</button>
</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Center align buttons using flexbox utilities
If the buttons are contained in the block element. Then use flexbox utilities to center align the button. Add .justify-content-center class to center align the buttons.
Example: Center align buttons using margin utilities
We can align the button to the center using margin utilities. Add .mx-auto class to buttons. It will create equal width to left and right of buttons.
Conclusion
We can center align the buttons using multiple ways. It depends on the containing block. For inline elements use text utilities, for block elements using flexbox utilities or you can use mx-auto directly to buttons. Bootstrap provides an easy way to align buttons.
