How to Center a Div with Bootstrap2

How to center a div with Bootstrap2?

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)

Center two divs in a bootstrap 2.3.2 row

jsfiddle: https://jsfiddle.net/v7oucy63/1/

I would use display: inline-block on the elements, and then add a text-align: center on the parent container. Keep in mind that text-align: center will affect all the children node, so add another text-align: left to the element.

vertical-align: middle with Bootstrap 2

Try this:

.row > .span3 {
    display: inline-block !important;
    vertical-align: middle !important;
}

Edit:

Fiddle: http://jsfiddle.net/EexYE/

You may need to add Diego's float: none !important; also if span3 is floating and it interferes.

Edit:

Fiddle: http://jsfiddle.net/D8McR/

In response to Alberto: if you fix the height of the row div, then to continue the vertical center alignment you'll need to set the line-height of the row to be the same as the pixel height of the row (ie. both to 300px in your case). If you'll do that you will notice that the child elements inherit the line-height, which is a problem in this case, so you will then need to set your line height for the span3s to whatever it should actually be (1.5 is the example value in the fiddle, or 1.5 x the font-size, which we did not change when we changed the line-height).

Bootstrap 2.3 center div content

Styles baby:

I updated the html/css on your jfiddle: http://jsfiddle.net/utxnmr1h/7/

css:

.container {
text-aling:center;
width:100%;
}
.row-fluid {
width:80%;
margin:auto;
}

html: I added a div outside the ones you provided and named it container.

Centering Text In a Div: Bootstrap

In 2013, you should consider using the absolute centering method.

Add to your CSS:

.hv-center-wrap {
  position: relative;
}

.hv-center {
  position: absolute;
  overflow: auto;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 500px; /* height must be set to work, percentages will work */
}

Add class .hv-center to any element that you want both horizontal and vertical centering. Then wrap the element around an outer div .hv-center-wrap.

(vertical-align: middle will not center the text vertically. That only works for specific elements, not divs.)

How do I center a Bootstrap div with a 'spanX' class?

Twitter's bootstrap .span classes are floated to the left so they won't center by usual means. So, if you want it to center your span simply add float:none to your #main rule.

CSS

#main {
 margin:0 auto;
 float:none;
}

Center table with Twitter Bootstrap 2

Create a new style -

.center-table
{
  margin: 0 auto !important;
  float: none !important;
}

and apply it to the table -

<table class="span5 center-table">
  <tr>
    <td>This is a centered table</td>
  </tr>
</table>

Align two divs horizontally side by side center to the page using bootstrap css

This should do the trick:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

Have a read of the grid system section of the Bootstrap docs to familiarise yourself with how Bootstrap's grids work:

http://getbootstrap.com/css/#grid

---

Related Topics