How to center a .btn group from twitter-bootstrap?

Question

I use twitter-bootstrap , and it was pretty hard for me to center a div that has a .btn-group class ( link ). I usually use

 margin: 0 auto; 

or

 text-align: center; 

to center the material in the div, but it doesn’t work when the inner element has the float: left property, which in this case is used for visual effects.

http://jsfiddle.net/EVmwe/1

Answer 1

Edited: This has changed from Bootstrap 3. See the solution for Bootstrap 3 below.

Does div extract from question?

Have a look at this example: http://jsfiddle.net/EVmwe/4/

The important part of the code:

 /* a wrapper for the paginatior */ .btn-group-wrap { text-align: center; } div.btn-group { margin: 0 auto; text-align: center; width: inherit; display: inline-block; } a { float: left; } 

Wrap a group of buttons within a division and set the div to the center of the text alignment. The button group must also be overwritten to display the built-in block and inherited width.

Rewriting the mapping of bindings to the inline block and float: none would also probably work as @Andres Ilich said.

---

Update for Bootstrap 3

As in Bootstrap 3, you have alignment classes (as shown in the documentation ). Now you just need to add the text-center class to the parent. For example:

 <div class="text-center"> <ul class="pagination"> <li class="disabled"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li> </ul> </div> 

See a working example here: http://jsfiddle.net/EVmwe/409/

Answer 2

This works for me (Bootstrap 3):

 <div class="text-center"> <div class="btn-group"> <a href=1 class="btn btn-small">1</a> <a href=1 class="btn btn-small">2</a> <a href=1 class="btn btn-small">3</a> </div> </div> 

Answer 3

or add "pagination centering", for example:

 <div class="btn-toolbar pagination-centered"> <div class="btn-group"> <a href=1 class="btn btn-small">1</a> <a href=1 class="btn btn-small">2</a> <a href=1 class="btn btn-small">3</a> </div> </div> 

Answer 4

Just declare links to inline-block buttons instead of float:left , and your text-align:center declaration will work like this:

 .btn-group a { display:inline-block; } 

Demo: http://jsfiddle.net/EVmwe/3/

Answer 5

With Twitter Bootstrap 3, there is no need for any workaround. Just specify text-align: center for the parent element.

Answer 6

for bootstrap 4

 <div class="text-center"> <div class="btn-group"> <a href="#" class="btn btn-primary">text 1</a> <a href="#" class="btn btn-outline-primary">text 2</a> </div> </div> 

Answer 7

If someone wants to change the width of .btn-group, you can do min-width, not width. I have done this:

HTML:

 <div class="text-center"> <div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button> </div> </div> 

CSS

 .btn-group {min-width: 90%;} .btn {width: 50%;} 

Set the width of the btn group to 90% of the text center, and each included button is 50% of the button group (45% of the text center).

Answer 8

I am using the following solution.

 <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> 

Answer 9

In Bootstrap 3, you just need to create the structure as simple as the next change

  <div class="btn-toolbar"> <div class="btn-group"> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 1 </button> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 2 </button> <button onclick="#" class="btn btn-default btn-sm" type="button"> Click 3 </button> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 4 </button> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 5 </button> <button onclick="#" type="button" class="btn btn-default btn-sm"> Click 6 </button> </div> </div 

And change only this style (override load), which force the float to the left so that you cannot force the marker or text center:

 .btn-toolbar .btn-group {float:initial;} 

This works for me without much change.

Answer 10

Throw the btn group into the p tag and use text-align: center style for p {}

  p { text-align: center; } <p> <div class="btn-group" role="group" aria-label="..."> <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> </p> 

Answer 11

This helped me in Bootstrap v3.3

 .btn-group { margin: auto; display: flex; flex-direction: row; justify-content: center; } 

Answer 12

 <div class="btn-group mx-auto" role="group"> <a href="#" class="btn btn-outline-primary"> Button 1</a> <a href="#" class="btn btn-outline-primary"> Button 2</a> </div>