CODEWITHSUNDEEP
csstwitter-bootstrap
john
john

Reputation: 801

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.

Upvotes: 58

Views: 290077

Answers (14)

b1n
b1n

Reputation: 47

For the answer about bootstrap 4

<div class="container">
  <div class="row justify-content-center">
  ...

Caution about full width columns, you could need to use col-auto

<div class="container">
  <div class="row justify-content-center">
    <div class="col-auto">
  ...

Upvotes: 1

nichoio
nichoio

Reputation: 7667

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.

Upvotes: 52

Jessy Ndaya
Jessy Ndaya

Reputation: 314

this peace of code can help you

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

Upvotes: 6

Brian Nowell
Brian Nowell

Reputation: 1

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.

Upvotes: -3

Rashi
Rashi

Reputation: 1176

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/

Upvotes: 10

tfa
tfa

Reputation: 1699

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>

Upvotes: 1

hugo der hungrige
hugo der hungrige

Reputation: 12902

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.

Upvotes: 59

Monero Jeanniton
Monero Jeanniton

Reputation: 499

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>

Upvotes: 7

Saad Mujeeb
Saad Mujeeb

Reputation: 106

Simply use text-center class

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

Upvotes: 6

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

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>

Upvotes: 7

xola139
xola139

Reputation: 1

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>

Upvotes: -2

gonzo
gonzo

Reputation: 526

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.

Upvotes: 21

Ezequiel
Ezequiel

Reputation: 253

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

Upvotes: 4

Waleed Asender
Waleed Asender

Reputation: 1527

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>

Upvotes: 63

Related Questions