center a row using Bootstrap 3

Question

How to center a row (12 column) in Bootstrap 3 ? I do not want to use the offset

I am using this way but not worked.

    .col-centered{          float: none;          margin: 0 auto;      }

    <div class="row" style="max-width: 300px;">          <div class="col-md-12 col-xs-12 col-centered">              <div class="input-group">                  <div class="input-group-btn">                      <button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">                          All Items                                       <span class="caret"></span>                      </button>                      <ul id="NormalSearch" class="dropdown-menu customize-dropdown-menu">                          <li><a href="#"> Test 1 </a></li>          <li><a href="#"> Test 2 </a></li>          <li><a href="#"> Test 3 </a></li>          <li><a href="#"> Test 4 </a></li>                      </ul>                  </div>                  <!-- /btn-group -->                  <input type="text" class="form-control">                  <span class="input-group-btn">                      <button class="btn btn-default" type="button">                          <i class="fa fa-search"></i>                      </button>                  </span>              </div>          </div>      </div>

Is there any solution to this? I have not an idea for this work.

Answer 1

Why not using the grid system?

The bootstrap grid system consist of 12 columns, so if you use the "Medium" columns it will have a 970px width size.

Then you can divide it to 3 columns (12/3=4) so use 3 divs with "col-md-4" class:

<div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> 

Each one will have 323px max width size. Keep the first and the last empty and use the middle one to get your content centerd:

<div class="col-md-4"></div> <div class="col-md-4">    <p>Centered content.</p> </div> <div class="col-md-4"></div> 

Answer 2

What you are doing is not working, because you apply the margin: auto to the full-width column.

Wrap it in a div and center that one. E.g:

<div class="i-am-centered">   <div class="row">...</div> </div> 

.

.i-am-centered { margin: auto; max-width: 300px;} 

http://www.bootply.com/93751

Its a cleaner solution anyway, as it is more expressive and as you usually don't want to mess with the grid.