How do I get a three column layout with Twitter Bootstrap?

Question

I am trying to create a three column layout that is like the following:

http://www.manisheriar.com/holygrail/index.htm

It should be a fixed width

Answer 1

Here you go:

• http://www.bootply.com/aEFO6lrDS8

This solution uses a table layout with 3 columns: left, middle, right. The outerTable has width 100%, the left and right columns have fixed pixel widths, and the middle column scales to fill the remaining space. The middle column has a Bootstrap 3 container with a bunch of sample col-xx-1's in them. Resize your browser width in order to see the standard bootstrap grid sizing process taking place (i.e. the col-lg-1's will change to full width when the browser's width is < 1200 etc...

BTW it's easier to play with browser resizing in bootply's "render" mode:

• http://www.bootply.com/render/aEFO6lrDS8

And some more bootstrappy content:

• http://www.bootply.com/yLotdZd1Ge
• http://www.bootply.com/render/yLotdZd1Ge