How do I center Twitter Boostrap pages?

There is a super easy answer to this question if you know CSS but as I was building a page I wasted time customizing it with code like this:

(I erroneously added this to my custom.css file)
[prettify]
.container-fluid {
margin: 0 auto;
width: 960px;
}
[/prettify]

And when that didn’t work I found this online and here is the simple solution that is built into the bootstrap.css file:

(add to your html page)
[prettify]

stuff inside div


[/prettify]

In case you are wondering what the heck is inside the pagination-centered class, you won’t be surprised (see below):
(bootstrap.css)
[prettify]
.pagination-centered {
text-align: center;
}
[/prettify]

But the saga continues

I found that my solution above is not what I wanted. It centers all the text and I just wanted my container centered. This was a silly mistake on my part. I found this article online that pointed out that Twitter Bootstrap has both fixed and responsive layouts built in. You just have to choose one.

As stated in the post:

When you decide between fixed width and fluid width you need to think in terms of your ENTIRE page. Generally, you want to pick one or the other, but not both. The examples you listed in your question are, in-fact, in the same fixed-width page. In other words, the Scaffolding page is using a fixed-width layout. The fixed grid and fluid grid on the Scaffolding page are not meant to be examples, but rather the documentation for implementing fixed and fluid width layouts.

So the solution I wanted to center my browser in a 940px wide fixed width, I would use the following HTML:
[prettify]

content that will be centered in browser but will never stretch beyond the 940px fixed width


[/prettify]

Now, how easy was that!

Leave a Reply

Your email address will not be published. Required fields are marked *