Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

Question

I'm getting confused about the various options in the twitter bootstrap grid, and how they go together.

To begin with, you can have an ordinary fixed container, or a container-fluid.

Then either one can include either an ordinary row, or a fluid row, row-fluid. That is, you can have a fixed container with a fluid row, or a container-fluid... with a fixed row?

Then on top of that, you can include the 'responsive' media queries, or not.

I am getting confused as to how these things interact. But let's start with one obvious example.

On the examples page itself, there's what's presented as an example of both a fixed grid and a fluid grid

However, in my browser, on that example page itself -- both grids behave identically. Perhaps because the example page uses the optional responsive media queries? In both grid examples, if I start gradually narrowing my browser window, the grid elements do not get gradually narrower -- once a certain (responsive) boundary width is reached, they snap to a smaller size, and again at further boundary widths. But both the ordinary 'fixed' example AND the 'fluid' example behave exactly the same here -- so what the heck is the difference?

Answer 1

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.

The proper fixed width example is here. The proper fluid width example is here.

When observing the fixed width example, you should not see the content changing sizes when your browser is greater than 960px wide. This is the maximum (fixed) width of the page. Media queries in a fixed-width design will designate the minimum widths for particular styles. You will see this in action when you shrink your browser window and see the layout snap to a different size.

Conversely, the fluid-width layout will always stretch to fit your browser window, no matter how wide it gets. The media queries indicate when the styles change, but the width of containers are always a percentage of your browser window (rather than a fixed number of pixels).

The 'responsive' media queries are all ready to go. You just need to decide if you want to use a fixed width or fluid width layout for your page.

Previously, in bootstrap 2, you had to use row-fluid inside a fluid container and row inside a fixed container. With the introduction of bootstrap 3, row-fluid was removed, do no longer use it.

EDIT: As per the comments, some jsFiddles for:

• fluid non-responsive layout,
• fluid responsive layout,
• fixed non-responsive layout,
• fixed responsive layout.

These fiddles are completely Bootstrap-free, based on pure CSS media queries, which makes them a good starting point, for anyone willing to craft similar solution without using Twitter Bootstrap.

Answer 2

Interesting discussion. I was asking myself this question too. The main difference between fluid and fixed is simply that the fixed layout has a fixed width in terms of the whole layout of the website (viewport). If you have a 960px width viewport each colum has a fixed width which will never change.

The fluid layout behaves different. Imagine you have set the width of your main layout to 100% width. Now each column will only be calculated to it's relative size (i.e. 25%) and streches as the browser will be resized. So based on your layout purpose you can select how your layout behaves.

Here is a good article about fluid vs. flex.

Answer 3

Source - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Pros

• Fixed-width layouts are much easier to use and easier to customize in terms of design.
• Widths are the same for every browser, so there is less hassle with images, forms, video and other content that are fixed-width.
• There is no need for min-width or max-width, which isn’t supported by every browser anyway.
• Even if a website is designed to be compatible with the smallest screen resolution, 800×600, the content will still be wide enough at a larger resolution to be easily legible.

Cons

• A fixed-width layout may create excessive white space for users with larger screen resolutions, thus upsetting “divine proportion,” the “Rule of Thirds,” overall balance and other design principles.
• Smaller screen resolutions may require a horizontal scroll bar, depending the fixed layout’s width.
• Seamless textures, patterns and image continuation are needed to accommodate those with larger resolutions.
• Fixed-width layouts generally have a lower overall score when it comes to usability.

Answer 4

Fluid layout in Bootstrap 3.

Unlike Boostrap 2, Bootstrap 3 doesn't have a .container-fluid mixin to make a fluid container. The .container is a fixed width responsive grid layout. In a large screen, there are excessive white spaces in both sides of one's Web page content.

container-fluid is added back in Bootstrap 3.1

A fluid grid layout uses all screen width and works better in large screen. It turns out that it is easy to create a fluid grid layout using Bootstrap 3 mixins. The following line makes a fluid responsive grid layout:

.container-fixed;

The .container-fixed mixin sets the content to the center of the screen and add paddings. It doesn't specifies a fixed page width.

Another approach is to use Eric Flowers' CSS style

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

Answer 5

you may use this - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. have a look.. I found this one really very useful. Good performance, very light weight, all important browser friendly and fluid in itself, so you don't really need bootstrap for the grid.