Search code examples
htmlcsstwitter-bootstrapalignment

Centering a span12 div in a container in Bootstrap

I have been through a number of similar questions, and tried to adapt the solutions to my case, but haven't had success in doing so.

I am trying to implement something of a reader, so I have a reading pane which I want to center on my page. I want to limit the size of the pane so that the user is no reading lines spanning the full width of a large browser window, but I also want to have that pane centered in the window. Above the pane I have a header which spans the full width of the page.

Originally I tried to use "span8 offset2" for the reading pane, but as the size of the window is reduced, I want the margins to disappear before the pane shrinks, and using this setup, the reading pane shrinks unnecessarily, squeezing content, as the window is made thinner.

I get the correct behavior just using "span12" with "max-width: 700px" set, in terms of the reading pane shrinking as I want it to, but I cannot get the div to center on the page.

Here is what I have that I'm working with:

<body>
  <div class="container">
    <div class="row-fluid">
      <div class="span12 reading-pane">
        <div class="row-fluid">
          <div class="nav">
            <div class="span6 offset3">
              Main Navigation
            </div>
            <div class="span2 offset1">
              Nav2
            </div>
          </div>
        </div>
        <div class="row-fluid">
          <div class="span12">
            <div class="body-text">
              Text Area
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

The style for the reading-pane is as follows:

.reading-pane {
  border: solid;
  border-color: #ccc;
  border-width: 3px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  min-height: 40px;
  line-height: 40px;
  max-width: 700px;
}

I have tried adding the following to the .reading-pane style (individually):

float: none;
margin-left: auto;
margin-right: auto;

 

margin: 0 auto;

 

float: none;
margin: 0 auto;

I've also tried centering text in the container which centers my header text, but not the reading-pane.

So how do I get the span12 div to center on the page?

Solution

  • I'm assuming since you're using row-fluid that you're using bootstrap 2.0. Bootstrap 3.0 handles responsive grids a bit more cleanly, so if you can I'd recommend using 3.0.

    Then move your max-width to the container: 

    .container {
    max-width: 700px;
}

    Note that 700 includes the gutters so you may want to use 730.

    Or better than using max-width, you can customize (http://getbootstrap.com/customize/) your twitter bootstrap download and define your own widths there if 700 is critical to you. And you can then also remove the larger @media queries then.

    There's a few other tweaks to how grids are done on 3.0, which I included in this fiddle: http://jsfiddle.net/PQM34/2/