Clever Geek Handbook

Bootstrap 3 Horizontal center group button in row

I am trying to horizontally center two radio buttons (in a group) on my page. This is what I have so far. It's not really the center. It's a little to the left. Pull to the right makes it go too far to the right. I added a center box and text center, but they didn't help anything.

Can anyone please 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>
+3


source to share


1 answer


You need to have text-center

in the parent div, not the center of the div.

<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 <div class="col-sm-5">&nbsp;</div>

.

Bootply Demo

+9


source






More articles:


All Articles