CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
evfwcqcg
evfwcqcg

Reputation: 16335

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

I'm using twitter-bootstrap, and i found it fairly hard to center div which has class .btn-group (link). Usually, I use 

margin: 0 auto;

or

text-align: center;

to center stuff within div, but it doesn't work when inner element has property float: left which in this case uses for visual effects.

http://jsfiddle.net/EVmwe/1

Upvotes: 76

Views: 98650

Answers (12)

Alberto Gaona
Alberto Gaona

Reputation: 2437

Adding text-center to a parent 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>

Upvotes: 80

Diego
Diego

Reputation: 11

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

Upvotes: 1

Shankar ARUL
Shankar ARUL

Reputation: 13710

This did the trick for me in Bootstrap v3.3

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

Upvotes: 0

Vasil Valchev
Vasil Valchev

Reputation: 5819

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>

Upvotes: 10

Jake Wolfe
Jake Wolfe

Reputation: 1

Throw the btn-group in a 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>

Upvotes: 0

Rusty
Rusty

Reputation: 4473

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>

Upvotes: 1

Osify
Osify

Reputation: 2295

In Bootstrap 3, you just need to structure as simple as following 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 amend the style only this (override the bootstrap) which force float left so that you cannot force by margin or text center:

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

This works for me, without much change.

Upvotes: 1

mikaelb
mikaelb

Reputation: 2148

Edited: This has changed as of Bootstrap 3. See solution for Bootstrap 3 below.

Is adding a wrapping div out of the question?

Look at this example: http://jsfiddle.net/EVmwe/4/

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

Wrapping the button group within a division, and setting the div to text-align center. The button group must also be overwritten to have display inline-block and inherited width.

Overwriting the anchors display to inline-block, and float: none, would also probably work, as @Andres Ilich said.

Update for Bootstrap 3

As of Bootstrap 3, you have alignment classes (as seen in the documentation). You now simply have to add the text-center class to a parent. Like so:

<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 working example here: http://jsfiddle.net/EVmwe/409/

Upvotes: 77

Nagra
Nagra

Reputation: 464

In case anyone also wants to change the width of the .btn-group, you can do min-width rather than width. I did 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%;}

That set the btn-group width to 90% of text-center and each included button is 50% of the button group (45% of the text-center div).

Upvotes: 4

Tim
Tim

Reputation: 5681

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

Upvotes: 6

Hanzaplastique
Hanzaplastique

Reputation: 564

or add "pagination-centered", 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>

Upvotes: 15

Andres I Perez
Andres I Perez

Reputation: 75379

Just declare your button links as inline-block instead of float:left and your text-align:center declaration will work, like so:

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

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

Upvotes: 7

Related Questions