How to align button to center using Bootstrap

Question

I have created a tile using Bootstrap. Inside the tile, near to the bottom I want three buttons (start, middle and end) of the tile.

I made the start and end buttons but using two div tags with pull-left and pull-right classes. Now what I want is to place the middle button.

Here's a part of my code and a screenshot:

<div class="col-lg-12">
    <div class="pull-left">
        <button class="btn btn-primary btn-sx" type="button">Confirm</button>
    </div>

    <!-- I want another button here, center to the tile-->

    <div class="pull-right">
        <button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>
    </div>
</div>

Answer 1

Use this option:

<div class="text-center">
    <button class="btn btn-primary btn-sx" type="button">
        Confirm
    </button>
</div>

Answer 2

One Bootstrap's most powerful features is nesting row elements. Every col-* container can have another row inside it, which then provides another full set of 12 col spaces:

<div class="col-lg-12">
    <div class="row">
        <div class="col-xs-4">
            <button class="btn btn-primary btn-sx" type="button">Confirm</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Middle Button</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Decline</button>
        </div>
    </div>
</div>

I'm not sure how your pull-* classes exactly work, but using Bootstrap's built-in grid system you should be able to get rid of those.

Don't miss the Bootstrap guide on nesting columns, as it provides way more information than this answer.

Answer 3

divide the row div in to 3 column divs - col-md-4. Use text-center for the parent div(col-md-4) of each button to solve the issue.

 <div class="row">
    <div class="col-md-4 form-group text-center">
        <button type="button" class="btn btn-primary">B1</button>
    </div>
    <div class="col-md-4 form-group text-center">
        <button type="button" class="btn btn-primary">B2</button>
    </div>
    <div class="col-md-4 form-group text-center">
        <button type="button" class="btn btn-primary">B3</button>
    </div>
</div>

Answer 4

You're using bootstrap I presume, so your best bet and practice would be to take advantage of its' grid system.

Make a div with a class called row and divide the children inside of that parent div into the content you want.

The way this division works is that the number behind col-[size]- decides how much of the horizontal space it will take up. In the end it has to add up to 12, so in your case, we want three parts that are size 4 each.

For example :

<div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
</div>

Then simply put the buttons inside of the col-xs-4 div's and you're ready to go.