center a row using Bootstrap 3 - css

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> Test 1 </li>
<li> Test 2 </li>
<li> Test 3 </li>
<li> Test 4 </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.

Answer 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.

Answer 4

Instead of
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
You could just use
<div class="col-md-4 col-md-offset-4"></div>
As long as you don't want anything in columns 1 & 3 this is a more elegant solution. The offset "adds" 4 columns in front, leaving you with 4 "spare" after.
PS I realise that the initial question specifies no offsets but at least one previous answer uses a CSS hack that is unnecessary if you use offsets. So for completeness' sake I think this is valid.

Answer 5

you can use grid system without adding empty columns
<div class="col-xs-2 center-block" style="float:none"> ... </div>
change col-xs-2 to suit your layout.
check preview: http://jsfiddle.net/rashivkp/h4869dja/

Answer 6

We can also use col-md-offset like this, it would save us from an extra divs code. So instead of three divs we can do by using only one div:
<div class="col-md-4 col-md-offset-4">Centered content</div>

Answer 7

Simply use text-center class
<div class="row">
<div class="col-md-12">
<h3 class="text-center">Here Comes your Text</h3>
</div>
</div>

Answer 8

Add this to your css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
Then, in your HTML code:
<div class=" row row-centered">
<div class="col-*-* col-centered>
Your content
</div>
</div>

Answer 9

this peace of code can help you
<div class="row" style="display: flex; justify-content: center;"></div>

Answer 10

Try this, it works!
<div class="row">
<div class="center">
<div class="col-xs-12 col-sm-4">
<p>hi 1!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 2!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 3!</div>
</div>
</div>
</div>
Then, in css define the width of center div and center in a document:
.center {
margin: 0 auto;
width: 80%;
}

Answer 11

I use text-align-center in a row like this
<div class="row tac">
<h1>Centered content</h1>
</div>
<style>
.tac { text-align: center}
</style>

Answer 12

I use this peace of code and I have successeful
<div class="row center-block">
<div style="margin: 0 auto;width: 90%;">
<div class="col-md-12" style="top:10px;">
</div>
<div class="col-md-12" style="top:10px;">
</div>
</div>

Answer 13

Instead of trying to center div's, just add this to your local css.
.col-md-offset-15 {
margin-left: 12.4999999%;
}
which is roughly offset-1 and half of offset-1. (8.333% + 4.166%) = 12.4999%
This worked for me.