How to center buttons in Twitter Bootstrap 3?

Centering with Bootstrap's Grid System

Bootstrap's grid system is your go-to tool when you want to align buttons across various viewport sizes:

<div class="row">
    <div class="col-sm-6 col-sm-offset-3 text-center">
        <button class="btn btn-primary" id="yesItIsWorking">Button in Center</button>
    </div>
</div>
<!--Little offset here never hurt anyone, right? Now it's in the middle!-->


The col-sm-6 col-sm-offset-3 classes create a centered column, placing your button exactly in the middle.

Grouping and Aligning Multiple Buttons

When you have multiple buttons, you can use the .btn-group class to group them and ensure they keep their style:

<div class="text-center">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>
<!--Look mom, all my buttons are in a row!-->


Every button will align at the center for maximum swag.

Override with Direct CSS

You might run into scenarios where direct CSS overrides could come in handy:

.button-container {
    display: table;
    margin: 0 auto;
}
/* Who needs Bootstrap when you got pure CSS skills?! */


Wrap your button in a <div> with the .button-container class:

<div class="button-container">
    <button class="btn btn-default">Centered Button</button>
</div>
<!--Kudos if you recognized the old-school method to center stuff-->


Trust me; this fallback will be useful when flexbox isn't an option!

Flexbox and Bootstrap 4

Bootstrap 4 introduces flexbox utilities. Here's the syntax when using Bootstrap 4 for alignment:

<div class="d-flex justify-content-center">
    <button class="btn btn-primary">Centered Button</button>
</div>


The button will perfectly center within its container using Bootstrap 4's .d-flex and .justify-content-center classes.

Applying Styles for Better Clarity

Use classes like .btn-primary, .btn-warning, to apply colorful and meaningful hues to buttons.

<div class="text-center">
    <button class="btn btn-primary">Primary Action</button>
    <button class="btn btn-secondary">Secondary Action</button>
</div>


The colors ensure that your buttons are both centered and styled for easy comprehension by users.

Containers and Full-width Forms

For forms that span full width, ensure that the container is container-fluid for a responsive, full-width behavior:

<div class="container-fluid">
    <div class="row">
        <div class="col-12 text-center">
            <button class="btn btn-success">Submit</button>
        </div>
    </div>
</div>


The button maintains being centered, and the form takes up the full width.