css - How do I align these boxes using bootstrap? -

here code:

<div class="row" >                  <div id="box1" class="col-lg-4 box"style="">                     <img src="images/1.png" style="" class="num-img">                     <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a>                 </div>                   <div id="box2" class="col-lg-4 box" style="">                         <img src="images/2.png" style="" class="num-img">                         <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a>                 </div>                 <div id="box3" class="col-lg-4 box" style="">                         <img src="images/3.png" style="" class="num-img">                         <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a>                   </div>              </div> 

css of box:

.box {     height: 130px;     width: 200px;     background-color: #000;     color: #fff;     padding: 20px;     font-size: 30px;     text-align: center; } 

this how want like:

this how looks right :

and how looks when remove box class , write:

<div id="box1" class="col-lg-4 "style=""> 

how fix this??

update (after adding margin:0 auto):

you possibly overriding width of col-lg-4 divs, depending on when box css loaded. try

<div id="box1" class="col-lg-4">     <div class="box">         <img src="images/1.png" style="" class="num-img">         <a href="search.jsp" style="text-decoration:none;color:#fff;">box 1 content</a>     </div>   </div>   

this not force col-lg-4 div have set px width, instead % inner div having set width.

if want center blocks within bootstrap cols, add margin: 0 auto; box css.

.box {     height: 130px;     width: 200px;     background-color: #000;     color: #fff;     padding: 20px;     font-size: 30px;     text-align: center;     margin: 0 auto; } 

example using fiddle