Bootstrap 3 center container div

Question

I can't seem to find the way to center a container that has a couple of images and a label. Here is the code:

<div class="container">
   <div class="row">  
       <div class="col-sm-1" style="width:88px;padding-left:0px">
           <img id="Img1" runat="server" src="images/image1.gif" />
       </div>
       <div class="col-sm-8" style="height:60px">
           <div class="row">
               <div class="col-sm-12 BaseColor1" style="text-align:center">
                   <img id="Img2" runat="server" src="images/image2.gif" />
                </div>
            </div>
             <div class="row" style="background-color:white;color: black;text-align:center">
                  <div class="col-sm-12" style="vertical-align:central">
                       <asp:Label Runat="server" Height="26px" ID="lblComp">COMPANY</asp:Label>
                   </div>
              </div>
          </div>
      </div>
  </div>

How do I make the entire container div or the "row" div (below) to center in the browser?

have you tried adding text-align: center; to your row class? — briskovich, Apr 03 '14 at 18:38
Yes. I tried to add the style with text-align: center to the row div but it made no difference. Thank you for the suggestion. — Hidalgo, Apr 03 '14 at 18:49
add the class col-sm-offset-2 to the first div inside your first row — Juan, Apr 03 '14 at 19:45
@JuanC. This does the job. Thank you.! But I don't understand how it works. If you can, please explain. — Hidalgo, Apr 03 '14 at 20:06

score 0 · Answer 1 · edited May 23 '17 at 10:26

Try adding "margin:0 auto"

<div class="container" style="margin:0 auto">
   <div class="row">  
       <div class="col-sm-1" style="width:88px;padding-left:0px">
           <img id="Img1" runat="server" src="images/image1.gif" />
       </div>
       <div class="col-sm-8" style="height:60px">
           <div class="row">
               <div class="col-sm-12 BaseColor1" style="text-align:center">
                   <img id="Img2" runat="server" src="images/image2.gif" />
                </div>
            </div>
             <div class="row" style="background-color:white;color: black;text-align:center">
                  <div class="col-sm-12" style="vertical-align:central">
                       <asp:Label Runat="server" Height="26px" ID="lblComp">COMPANY</asp:Label>
                   </div>
              </div>
          </div>
      </div>
  </div>

You can also see this post about using Bootstrap's "offsets"

maccettura. Thank you for the suggestion. It does not work but I am reading the suggested post. The suggestion of JuanC does the job. — Hidalgo, Apr 03 '14 at 20:09

Bootstrap 3 center container div

1 Answers1