center a row using Bootstrap 3
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.
Solution 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>
Solution 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.
Solution 3:
I know this question was specifically targeted at Bootstrap 3, but in case Bootstrap 4 users stumble upon this question, here is how i centered rows in v4:
<div class="container">
<div class="row justify-content-center">
...
More related to this topic can be found on bootstrap site.