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.

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>

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.

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.

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.

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/

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>

Simply use text-center class

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

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>

this peace of code can help you

<div class="row" style="display: flex; justify-content: center;"></div>

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%;
}

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>

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>

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.