How to center a DIV with backround within bootstrap col?

Question

I am using bootstrap3 and have DIVs that contain background image. These DIVs are place within columns and I want to center them.

I have the following HTML:

<div id="badges">


            <div class="col-xs-6  col-sm-6   col-md-2 col-lg-2 badge-container center-block">               
                <div id="badge1" class="center-block"></div>
            </div>


            <div class="col-xs-6  col-sm-6   col-md-2 col-lg-2 badge-container center-block">   
                <div id="badge2" class="center-block"></div>
            </div>


            <div class="col-xs-6  col-sm-6   col-md-2 col-lg-2 badge-container center-block">   
                <div id="badge3" class="center-block"></div>
            </div>


            <div class="col-xs-6  col-sm-6   col-md-2 col-lg-2 badge-container center-block">   
                <div id="badge4" class="center-block"></div>
            </div>


 </div>

Each of my DIVs has a background img (here is my code in LESS)

#badges{


    .badge-container{


        height: 5em;


        #badge1{
            height:100%;
            width: auto;

            background-image: url("images/badge1.JPG");
            background-size: contain;
            background-repeat: no-repeat;                           
        }


        #badge2{
            height:100%;
            width: auto;

            background-image: url("images/badge2.JPG");
            background-size: contain;
            background-repeat: no-repeat;           
        }



        #badge3{
            height:100%;
            width: auto;

            background-image: url("images/badge3.PNG");
            background-size: contain;
            background-repeat: no-repeat;           
        }   


        #badge4{
            height:100%;
            width: auto;

            background-image: url("images/badge4.JPG");
            background-size: contain;
            background-repeat: no-repeat;           
        }    

    }


}

I have tried to make the divs be centered (also have added class="center-block", but it does not work.

How can I make these DIVs be centered?

Thanks

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

Here is a Codepen http://codepen.io/noobskie/pen/ojgrJX?editors=110 of what i think your wanting

bootstrap has a class called col-*-offset-* which you can use in case your columns dont equal up to a full grid size

an alternative method you can use is the old margin:0 auto way and adding a float:none; into a custom class

explained in much better details here Center a column using Twitter Bootstrap 3

edit removed redundant "center-block" classes

edited May 23 '17 at 12:32

Community

1
1

answered Sep 06 '15 at 13:37

NooBskie

3,761
31
51

Thank but that did not work. There is no change. P.S. Why remove the "center-block" class? Shouldnt that class center the div? Why does it worl like that? – Greg Sep 06 '15 at 17:13

score 0 · Answer 2 · answered Sep 06 '15 at 14:14

0

float:none;
margin:0 auto;

For every div you would like to center Don't forget to give specific width for the divs according to image width

answered Sep 06 '15 at 14:14

EfiBN

408
2
11

How to center a DIV with backround within bootstrap col?

2 Answers2