Centering a Column Using Bootstrap

Question

I have the following code:

    <div class="row">
        <div class="col-xs-12" id="buttonList">
            <ul class="list-inline">
                <li><button id="homeBtn" type="button" class="smallMarginB headerButton active btn btn-sm btn-primary">Home</button></li>
                <li><button id="aboutBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">About</button></li>
                <li><button id="servicesBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Services</button></li>
                <li><button id="transBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Transformations</button></li>
                <li><button id="testBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Testimonials</button></li>
                <li><button id="contactBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Contact</button></li>
                <li><button id="faqBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">FAQ</button></li>
            </ul>
        </div>
    </div>

It simply shows buttons in a single column. I want it to be centered no matter the users resolution. I have tried using offesets but for odd resolutions it doesn't work (ex. resolution is 1366px). I have also tried adding col-centered and margin: auto with no success.

Try adding a class with `text-align:center` – Martin Staufcik Mar 06 '16 at 21:31 — Martin Staufcik, Mar 06 '16 at 21:31

score 1 · Accepted Answer · edited Mar 06 '16 at 22:06

1

Try adding class="text-center" to div col element:

<div class="col-xs-12 text-center" id="buttonList">

edited Mar 06 '16 at 22:06

Mike

1,158
5
22
32

answered Mar 06 '16 at 21:37

celinne

26
2

Wow, thank you. Is there a reason text-center works when center-block and margin: auto; didn't? – MJW Mar 06 '16 at 21:41
margin: auto works in block elements while text-align:center works for inline elements. In this case, your items are display: inline-block. I hope this helps another time. Excuse my English, I speak Spanish :P – celinne Mar 06 '16 at 22:03

score 0 · Answer 2 · answered Mar 06 '16 at 21:34

0

You can try:

margin-left:auto; margin-right:auto for horizontal alignment;

margin-top:auto; margin-bottom:auto, for vertical alignment

or

margin:auto for both.

answered Mar 06 '16 at 21:34

Rahul Sharma

892
1
6
16

I have tried that as well. Some reason it only shifts the column slightly the the right (about 5px) – MJW Mar 06 '16 at 21:38

Centering a Column Using Bootstrap

2 Answers2