Html – Setting max width for body using Bootstrap

csshtmltwitter-bootstrap

I'm building my first site with Twitter Bootstrap and experimenting with fluid layouts. I've set my container to be fluid, now the content inside takes up the full page width and adapts as I resize the browser.

The design I'm working on was created for a maximum width of ~950px.

I've checked variables.less and responsive.less, and the Bootstrap documentation; I can't quite work out how to make this happen.

I also tried adding the following to my style.css:

body {
    max-width: 950px;
}

Best Answer

You don't have to modify bootstrap-responsive by removing @media (max-width:1200px) ...

My application has a max-width of 1600px. Here's how it worked for me:

Create bootstrap-custom.css - As much as possible, I don't want to override my original bootstrap css.
Inside bootstrap-custom.css, override the container-fluid by including this code:

Like this:

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

Related Solutions

Css – How to vertically center a “div” element for all browsers using CSS

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

View A Working Example With Dynamic Content

I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.

Html – How to get centered content using Twitter Bootstrap

This is for Text Centering (which is what the question was about)

For other types of content, see Flavien's answer.

Update: Bootstrap 2.3.0+ Answer

The original answer was for an early version of bootstrap. As of bootstrap 2.3.0, you can simply give the div the class .text-center.

Original Answer (pre 2.3.0)

You need to define one of the two classes, row or span12 with a text-align: center. See http://jsfiddle.net/xKSUH/ or http://jsfiddle.net/xKSUH/1/

Best Answer

Related Solutions

Css – How to vertically center a “div” element for all browsers using CSS

Html – How to get centered content using Twitter Bootstrap

This is for Text Centering (which is what the question was about)

Related Topic