Centering elements with bootstrap

Question

I've been trying and searching how to center elements using Bootstrap but can't seem to find a way to do it. The first row container centers just right using the center block class.

I found HERE that changing .navbar-nav>li to float:none; fixed things in that case, but for me it just stacks the icons vertically.

Thanks in advance.

<div class="container" style="height: 30px;"></div>
  <div class="row">
    <div class="col-md-4" style="">
       <a class="brand" href="index.php"> <img style="width: 57%;" class="center-block" src="img/xelha_logo.png" /></a>
    </div>
    <div class="col-md-4" style="background-color:blue;"> <!-- THIS ONE -->
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/facebook_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/twitter_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/youtube_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/tripadvisor_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/faq_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/mexicanflag.png" /></a>
    </div>
    <div class="col-md-4 center-block" style="background-color:green;"> <!-- AND THIS ONE -->
        <!-- Single button -->
        <div class="btn-group" >
          <button type="button" class="btn btn-default btn-lg dropdown-toggle center-block" data-toggle="dropdown">
            Customer Service <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Canc&uacute;n: 998 2 51 65 60</a></li>
            <li><a href="#">Playa del Carmen: 984 1 47 65 60</a></li>
            <li><a href="#">M&eacute;xico: 01 800 21 28 951</a></li>
            <li><a href="#">USA-CAN: 188 892 27 381</a></li>
            <li><a href="#">Argentina: 0 800 666 15 26</a></li>
            <li><a href="#">Colombia: 01 800 931 67 45</a></li>
          </ul>
        </div>
    </div>
</div>

Mustafa sabir · Accepted Answer · 2014-05-14T06:30:29.130

Change your code to this and try :-

<div class="container" >


<div class="row">
<div class="col-md-3">

</div>
<div class="col-md-2" >
<a class="brand" href="index.php"> <img style="width: 57%;" src="img/xelha_logo.png" /></a>
</div>
 <div class="col-md-2" style="background-color:blue;">
<a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/facebook_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/twitter_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/youtube_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/tripadvisor_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/faq_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/mexicanflag.png" /></a>
</div>


<div class="col-md-2" style="background-color:green;">

      <div class="btn-group" >
          <button type="button" class="btn btn-default btn-lg dropdown-toggle center-block" data-toggle="dropdown">
            Customer Service <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Canc&uacute;n: 998 2 51 65 60</a></li>
            <li><a href="#">Playa del Carmen: 984 1 47 65 60</a></li>
            <li><a href="#">M&eacute;xico: 01 800 21 28 951</a></li>
            <li><a href="#">USA-CAN: 188 892 27 381</a></li>
            <li><a href="#">Argentina: 0 800 666 15 26</a></li>
            <li><a href="#">Colombia: 01 800 931 67 45</a></li>
          </ul>
        </div>
</div>
<div class="col-md-3" >
</div>
</div>

Nope, it just stacks the 3 elements, over each other. thank you, i just need to center the element inside the col-md not the whole document. — Uriel Coria, May 13 '14 at 17:03
Oh ok, I Thought you are asking to centre each element separately. I have updated the code , try this now. And if you feel elements are a bit far away change the x in col-md-x values to properly divide your screen. — Mustafa sabir, May 14 '14 at 06:32

Centering elements with bootstrap

1 Answers1