Centering Divs on Bootstrap Responsive Grid

Question

I'm using bootstrap grid as shown below and I'm trying to centralize some divs. ( pic). I've tried everything {margin:0 auto; width:50% } etc etc but I can't work it out. It can't be that difficult to centralize some divs. What's the problem here? Please don't mark it as a duplicate. I've been researching the whole day, I just can't work it out. Thank you

<header data-spy="affix" id="myHeader" class="container row">
            <div class="col-sm-4 ">
                <div class="centralize">
                        <a href="http://www.facebook.com" target="_blank">
                        <img class="logos" src="images/facebook.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
                        </a>    

                        <a href="http://www.twitter.com" target="_blank">
                        <img class="logos" src="images/twitter.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
                        </a>    

                        <a href="http://www.instagram.com" target="_blank">
                        <img class="logos" src="images/instagram.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
                        </a>

                </div>
            </div>  
            <div class="col-sm-4">
                <div class="centralize">
                        //Other Stuff to be centralized 
                </div>
            </div>                  
            <div class="col-sm-4">
                <div class="centralize">
                        //Other Stuff to be centralized 
                </div>
            </div>          
    </header>

score 0 · Accepted Answer · answered Dec 06 '16 at 21:07

0

Actually with {margin:0 auto; width:50%} it should work.

But in your code I see that you are using the .col-sm-4 class on the parent div that only takes 1/3 of the width. It might work with .col-sm-12 instead that takes 100%

answered Dec 06 '16 at 21:07

Johann Kratzik

764
5
11

Sir, I wanna center stuff INSIDE the col-sm-4 divs. – Dec 06 '16 at 21:25
Bootstrap already has the ".text-center" class (http://getbootstrap.com/css/#type-alignment) so I don't see reasons to add another "centralize" class. You could even add it to the ".col-sm-4" divs and remove the inner
– Riccardo De Contardi Dec 06 '16 at 21:47
@RiccardoDeContardi I thought it only worked for... text. Thanks sir! – Dec 06 '16 at 22:16

Ryan Gee · Answer 2 · 2016-12-06T21:27:44.017

0

To center align the content within the class="centralize" divs, use:

.centralize {
    text-align: center;
}

edited Dec 06 '16 at 21:27

answered Dec 06 '16 at 21:10

Ryan Gee

394
1
9

It doesn't. I wanna center stuff INSIDE the col-sm-4 divs! – Dec 06 '16 at 21:26
I suggested the same or similar in [my answer here](http://stackoverflow.com/questions/18462808/responsive-image-align-center-bootstrap-3?rq=1). If the OP is using Bootstrap 3.0.1 or newer (they don't specify), you should [use the `.center-block` builtin instead](http://stackoverflow.com/a/20396826/383609) – Bojangles Dec 06 '16 at 21:46
@RyanGee Thanks sir. – Dec 06 '16 at 22:14

Centering Divs on Bootstrap Responsive Grid

2 Answers2