How to center a div with Bootstrap2? [duplicate]

Question

http://twitter.github.com/bootstrap/scaffolding.html

I tried like all combinations:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

or

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

changed span and offset numbers...

But I cant get a simple box perfectly centered on a page :(

I just want a 6-column-wide box centered...

edit:

did it with

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

But the box is too wide, is there any way I can do it with span7 ?

span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...

Are you looking to center a box horizontally on the page? Because the container class already does that, thought you might be looking to center a smaller box. Or are you looking to center a box both horizontally and vertically on the page? — Andres I Perez
– Andres I Perez, Commented Feb 22, 2012 at 0:10
a box thing you say? . . . .here in developer world we call that a div — pythonian29033
– pythonian29033, Commented May 28, 2013 at 14:21
What version of Bootstrap were you using? it should be reflected in the title as people looking this up will end up here and see outdated code. — JGallardo
– JGallardo, Commented Oct 23, 2015 at 18:32

max taldykin · Accepted Answer · 2013-03-22 19:10:43Z

165

Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

If you have this class defined, just add it to the span and you're good to go.

<div class="span7 center"> box </div>

Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.

edited Mar 22, 2013 at 19:10

max taldykin

13k5 gold badges49 silver badges69 bronze badges

answered Feb 18, 2013 at 9:31

Zuhaib Ali

3,3944 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2109908 Over a year ago

I'm using Rails, so I just want to point out that in application.css, add *= require bootstrap.min before *= require_self and *= require_tree

Peter Berg Over a year ago

This didn't work for me, but adding display: table seemed to fix it

ivan.a.bovin · Accepted Answer · 2012-11-30 12:12:50Z

46

besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for

you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)

edited Nov 30, 2012 at 12:12

ivan.a.bovin

1,12510 silver badges18 bronze badges

answered Feb 23, 2012 at 19:04

csturtz

6,5902 gold badges26 silver badges34 bronze badges

3 Comments

BigSauce Over a year ago

Consider Zuhaib Ali's answer. text-align: center doesn't work for centering elements within a <div>. The offset* class isn't truly centering components. It is merely creating the illusion of centering. You can verify this by resizing the window and seeing that the components do not remain centered. When you apply Zuhaib Ali's method, the components stay centered.

Shawn Taylor Over a year ago

Instead of adding inline styling (style="text-align:center"), add the class "center-block" and get centred content within your centred div.

jruzafa Over a year ago

col-md-4 or col-lg-4 is equal a margin: 0 auto; ?

jpaugh · Accepted Answer · 2018-10-25 19:53:57Z

35

Bootstrap3 has the .center-block class that you can use. It is defined as

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Documentation here.

edited Oct 25, 2018 at 19:53

jpaugh

7,1845 gold badges46 silver badges94 bronze badges

answered Nov 27, 2014 at 6:56

user147373

Comments

Craig · Accepted Answer · 2014-05-26 23:39:32Z

21

If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do. It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

answered May 26, 2014 at 23:39

Craig

8,3448 gold badges48 silver badges79 bronze badges

2 Comments

Gavindra Kalikapersaud Over a year ago

is that a valid way of centering divs in boostrap?

Craig Over a year ago

The content of the div is not centered, but the div itself is.

cstrat · Accepted Answer · 2012-10-07 06:07:40Z

8

Sounds like you just wanted to center align a single container. The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:

<div class="login-container">
  <!-- Your Login Form -->
</div>

and style:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

That should work fine if you are nested somewhere within a bootstrap .container div.

answered Oct 7, 2012 at 6:07

cstrat

1,04711 silver badges17 bronze badges

Comments

mrpix · Accepted Answer · 2013-02-04 19:37:11Z

3

add the class centercontents

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

answered Feb 4, 2013 at 19:37

mrpix

614 bronze badges

Comments

Miriam Farber · Accepted Answer · 2017-09-20 12:09:32Z

0

@ZuhaibAli code kind of work for me but I changed it a little bit:

I created a new class in css

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

then the div become

<div class="center col-md-6"></div>

I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.

edited Sep 20, 2017 at 12:09

Miriam Farber

19.7k15 gold badges66 silver badges78 bronze badges

answered Sep 20, 2017 at 12:05

jakson

2553 silver badges10 bronze badges

Comments

core114 · Accepted Answer · 2017-09-20 12:10:39Z

0

Follow this guidance https://getbootstrap.com/docs/3.3/css/

Use .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

answered Sep 20, 2017 at 12:10

core114

5,33917 gold badges111 silver badges201 bronze badges

Comments

Mahmoud Farahat · Accepted Answer · 2020-04-28 23:47:44Z

0

wrap the div in a parent div with class row then add style margin:0 auto; to the div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>

answered Apr 28, 2020 at 23:47

Mahmoud Farahat

5,4814 gold badges46 silver badges63 bronze badges

Collectives™ on Stack Overflow

How to center a div with Bootstrap2? [duplicate]

9 Answers 9

2 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related