Html – Bootstrap 3 Horizontal Center Button Group In A Row

csshtmltwitter-bootstraptwitter-bootstrap-3

I am trying to horizontally center two radio buttons (in a group) on my page. This is what I have so far. It is not exactly center. It is a bit to the left. Pull right makes it go too far to the right. I added center-block and text-center but they did not help at all.

Can anyone help?

<div class="row">
    <div class="col-sm-5">&nbsp;</div>
    <div class="col-sm-2">
        <div class="btn-group center-block text-center" data-toggle="buttons">
            <label class="btn btn-default center-block"><input type="radio">All</label>
            <label class="btn btn-default active center-block"><input type="radio">Filtered</label>
        </div>
    </div>
    <div class="col-sm-5">&nbsp;</div>
</div>

Best Solution

You need to have text-center in the parent div, not the div being centered.

<div class="row">
    <div class="col-sm-offset-5 col-sm-2 text-center">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default center-block"><input type="radio">All</label>
            <label class="btn btn-default active center-block"><input type="radio">Filtered</label>
        </div>
    </div>
</div>

Also, you should use col-sm-offset-5 instead of <div class="col-sm-5"> </div>.

Bootply Demo

Related Solutions

Html – How to horizontally center an element

You can apply this CSS to the inner <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

EDIT

With flexbox it is very easy to style the div horizontally and vertically centered.

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

To align the div vertically centered, use the property align-items: center.

Html –

Here's a page describing the differences (basically you can put html into a <button></button>)
And another page describing why people avoid <button></button> (Hint: IE6)

Another IE problem when using <button />:

And while we're talking about IE, it's got a couple of bugs related to the width of buttons. It'll mysteriously add extra padding when you're trying to add styles, meaning you have to add a tiny hack to get things under control.