• support@answerspoint.com

How to center a div with Bootstrap2?

2357

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

2Answer


0

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)

  • answered 8 years ago
  • Gul Hafiz

0

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.

  • answered 8 years ago
  • Sunny Solu

Your Answer

    Facebook Share        
       
  • asked 8 years ago
  • viewed 2357 times
  • active 8 years ago

Best Rated Questions