How to center a div with Bootstrap2?

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> 

range and offset number changed ...

But I can not get a simple box, ideally oriented on the page :(

I just want a cell with a width of 6 columns to be centered ...

---

Editing:

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 to do this with span7?

span7 offset2 gives an extra complement to the left complement span7 offset3 right ...

Answer 1

in addition, to squeeze the div itself to the desired size, reducing the size of the range in this way ... class="span6 offset3" , class="span4 offset4" , etc ... something simple like style="text-align: center" on a div may have the effect of searching

you cannot use span7 with any offset set and get spacing centered on the page (since total spacing = 12)

Answer 2

Bootstrap spaces move to the left. Everything that is required for their center redefines this behavior. I do this by adding this to the stylesheet:

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

If you have this class, just add it to the range and you will go well.

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

Note that this custom center class must be defined after the css bootstrap. You can use !important , but this is not recommended.

Answer 3

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

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

The documentation is here .

Answer 4

If you want to go to full load (and not left / right), you will need a template that will correspond to 12 columns, for example. 2 spaces, 8 contents, 2 spaces. What will this installation do. It only covers -md options, I usually snap it to full size for small, adding col-xs-12

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

Answer 5

Looks like you just wanted to center the alignment of one container. The bootstrap structure may be too complex, because in one example you could have a separate div with your own style, for example:

 <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) */ } 

This should work fine if you are nested somewhere in the .container boot block.

Answer 6

add class class content

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

Answer 7

@ZuhaibAli code works for me, but I changed it a bit:

I created a new class in css

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

then the div will become

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

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

Answer 8

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

Use .center-block

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