CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbutton
Sam Bates
Sam Bates

Reputation: 2817

How to center buttons in Twitter Bootstrap 3?

I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I fix this?

Here is my code.

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Upvotes: 271

Views: 652422

Answers (14)

Ado Moshe
Ado Moshe

Reputation: 229

I had this problem. I used

<div class = "col-xs-8 text-center">

On my div containing a few h3 lines, a couple h4 lines and a Bootstrap button. Everything besides the button jumped to the center after I used text-center so I went into my CSS sheet overriding Bootstrap and gave the button a

margin: auto;

which seems to have solved the problem.

Upvotes: 0

Alexandre Pereira
Alexandre Pereira

Reputation: 81

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

Upvotes: 8

Gonen09
Gonen09

Reputation: 119

For Bootstrap 3

we divide the space with the columns, we use 8 small columns (col-xs-8), we leave 4 empty columns (col-xs-offset-4) and we apply the property (center-block)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

For Bootstrap 4

We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element. The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

more info here: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

Upvotes: 1

Shekhar Pankaj
Shekhar Pankaj

Reputation: 9125

Wrap the Button in div with "text-center" class.

Just change this:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

To this: 

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

Edit

As of BootstrapV4, center-block was dropped #19102 in favor of m-*-auto

Upvotes: 587

Chris
Chris

Reputation: 134

Update for Bootstrap 4:

Wrap the button with a div set with the 'd-flex' and 'justify-content-center' utility classes to take advantage of flexbox.

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

The benefit of using flexbox is being able to add additional elements/buttons on the same axis, but with their own separate alignment. It also opens up the possibility of vertical alignment with the 'align-items-start/center/end' classes, too.

You could wrap the label and button with another div to keep them aligned with each other.

e.g. https://codepen.io/anon/pen/BJoeRY?editors=1000

Upvotes: 3

Seany84
Seany84

Reputation: 5596

According to the Twitter Bootstrap documentation: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.

See an example of the code above here: https://jsfiddle.net/Seany84/2j9pxt1z/

Upvotes: 36

benjamin
benjamin

Reputation: 99

add to your style:

display: table; margin: 0 auto;

Upvotes: 9

obe6
obe6

Reputation: 1881

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

Upvotes: 33

Swapneel
Swapneel

Reputation: 196

I tried the following code and it worked for me.

<button class="btn btn-default center-block" type="submit">Button</button>

The button control is in a div and using center-block class of bootstrap helped me to align the button to the center of div

Check the link where you will find the center-block class

http://getbootstrap.com/css/#helper-classes-center

Upvotes: 5

Mohammad Heydari
Mohammad Heydari

Reputation: 4270

It works for me try to make an independent <div>then put the button into that. just like this : 

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

Then Go to to your CSSStyle page and do the Text-align:center like this :

#contactBtn{text-align: center;}

Upvotes: 1

Rusty
Rusty

Reputation: 4473

You can do the following. It also avoids buttons overlapping.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

Upvotes: 1

ugur
ugur

Reputation: 9

or you can give specific offsets to make button position where you want simply with bootstrap grid system,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

this way, also let you specify button size if you set btn-block. sure, this will only work md size range, if you want to set other sizes too, use xs,sm,lg.

Upvotes: -2

rsudip90
rsudip90

Reputation: 869

use text-align: center css property

Upvotes: 3

user3443160
user3443160

Reputation: 106

You can do it by giving margin or by positioning those elements absolutely.

For example

.button{
  margin:0px auto; //it will center them 
}

0px will be from top and bottom and auto will be from left and right.

Upvotes: 5

Related Questions