How to center a div with Bootstrap2?

Answer 1

@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.

Answer 2

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)

Answer 3

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.

Answer 4

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

Use .center-block

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

Answer 5

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>

Answer 6

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.