[css] 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{_x000D_
        float: none;_x000D_
        margin: 0 auto;_x000D_
    }

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

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

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>

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>

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>

Simply use text-center class

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

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.

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

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>

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/

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.

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.

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>