405

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?

Jason Sundram
  • 12,225
  • 19
  • 71
  • 86
jrochkind
  • 22,799
  • 12
  • 59
  • 74

5 Answers5

444

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:

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.

Zackline
  • 804
  • 1
  • 9
  • 28
eterps
  • 14,198
  • 4
  • 35
  • 46
  • 1
    hmm, okay, the docs seemed to me to suggest you could mix and match fluid and fixed, but I guess that's advanced usage I'm not ready for. :) I still don't understand how `responsive` changes both fixed and fluid respectively -- you can use responsive (or not) with both fixed and fluid, right? Can you explain how responsive effects them each? – jrochkind Mar 27 '12 at 22:29
  • 8
    the confusing thing to me remain that the 'proper fixed width' example DOES change sizes of columns as browser window changes (beause it's responsive?) And so does the proper fluid width example. But I guess the fluid width example does it continuously, and the fixed width responsive example does it in discrete jumps, as well as reaching a maximum size? Is that it? How about fluid responsive vs not responsive? – jrochkind Mar 27 '12 at 22:36
  • 16
    You've got it. In the fixed width layout, the columns change when the browser window reaches a width defined in a media query. So when you have your window greater than 960px wide, it will stay at it's maximum width. Then when you shrink your browser to 959px, it will snap to a new layout based on a media query that has a maximum width of 768px. So because you are viewing a fixed-width layout, the columns *will not* change when your browser width is between 768 and 960. – eterps Mar 28 '12 at 01:51
  • 3
    And when you are viewing a fluid-width layout, the column sizes will *always* change to match your browser's width. The layout itself will also change in accordance to the media queries, as with a fixed-width layout. – eterps Mar 28 '12 at 01:53
  • 12
    The most important thing to remember is that fixed width = pixels, and fluid width = percent. The responsiveness comes from all the fancy CSS rules defined in bootstrap-responsive.css, and those rules apply to both layouts. – eterps Mar 28 '12 at 01:56
  • i can't tell what the difference is between twitter bootstrap fluid responsive vs non-responsive though. maybe I just need to play with it more. The fluid already changes with window size, what's the responsive part when you have fluid responsive? – jrochkind Mar 29 '12 at 04:47
  • 1
    Ok, for fluid-responsive, do this: Open the fluid example and maximize your window. Observe how the navigation menu is a horizontal list. Now slowly reduce the width of your browser. At some point, the navigation bar will change so that a button appears, and when the button is clicked, the menu appears as vertical. So with fluid, the only thing that changes is the *width* of the elements. With a responsive design, you can change *any* css rule based on the width of the browser. See my edited answer for some jsFiddle examples. – eterps Mar 29 '12 at 12:45
  • Did the JSFiddle Examples above help at all? – eterps Apr 19 '12 at 14:34
  • They did to me, any how :) Thanks a lot for this discussion! – Jonatan Littke May 21 '12 at 09:20
  • Btw, why does the fixed width layout not contain a sidebar? It's equally usable there, isn't it? – Jonatan Littke May 21 '12 at 09:21
  • @JonatanLittke The fixed width layout can absolutely include a sidebar. My current project uses one now. Just make sure it is within your `container-fluid` div, and assign it a spanX class. I asked a sidebar related question that might help you here: http://stackoverflow.com/questions/9386441/in-twitter-bootstrap-how-can-i-get-right-columns-to-move-to-the-top-when-shrink – eterps May 21 '12 at 14:11
  • 1
    Yeah, I figured that out when testing. I guess the docs are to blame (again? :0) - it does look like the fluid is the only one that can contain it. Thanks :) – Jonatan Littke May 22 '12 at 07:43
  • 1
    super-helpful question, answer and discussion here, thanks a lot – Nicolas78 Jun 08 '12 at 22:16
  • @eterps - please, can you edit your answer and add all 4 combination with exact description of the design features for each one? Mean: fixed-normal, fixed-responsive, fluid-normal, fluid-responsive? This is an excellent post, but still don't understand fully what is the "fixed-responsive" design. – clt60 Aug 31 '12 at 10:22
  • Hey @jm666, I added a couple more examples. Fixed-responsive is almost exactly the same as fluid-responsive, only it uses pixel values for width instead of %. So in a fixed-normal page, your widths will never change. You can shrink the browser as much as you want and the columns in the example will always remain 130px each. In the fixed-responsive example, You can stretch and shrink your browser window, and the columns will remain the same width until the window becomes less than 300px wide. When that happens, the media query kicks in and applies the new css rules. – eterps Aug 31 '12 at 15:18
  • @eterps Thank you so much! I have a task where I need to lay out images in a grid. Each is about 300px wide. I want to use fluid version of bootstrap. I'm practicing the mobile first philosophy. so for 320px I'll show only 2 images, but as you increase the browser, more images will flow into view. This requires more breakpoints than bootstap uses: there is a break-point for each new image/row. Do you have any idea how to achieve this using bootstap. I've done something but I'd like to hear/see how you'd approach it. I'll probably use a max-width of 1800px after which things are centered. thnx! – berto77 Sep 25 '12 at 18:28
  • Can you not have a fluid-row in a fixed layout? I don't why you can't. – Mohamad Dec 04 '12 at 14:20
  • You absolutely can mix fluid rows into a fixed layout. It's not common though, as having portions of the page behaving differently than others might cause confusion for users. If you need to do it though, just override the pixel widths of the span tags with percentage values, or create your own % based div and style it to fit inside the Bootstrap scaffolding. – eterps Dec 04 '12 at 17:00
  • @eterps, with the examples you provided, are you saying if `px` is used as width unit, then use `fixed`. if `%` is used as width unit, then use `fluid`? – Ray Cheng Dec 18 '12 at 17:20
  • That is the convention used by Bootstrap. YOU pick fixed or fluid. Once you do that BOOTSTRAP will set up px for fixed, and % for fluid. – eterps Dec 18 '12 at 21:45
  • So, a follow-up question on this: Using a fixed layout with a full-size header image behind your big site title a la Bootstrap - which size should I crop my image to? – Henrik Söderlund Jan 31 '13 at 08:17
  • Bootstrap will resize the img tag. So crop to the largest size you want. – eterps Jan 31 '13 at 15:32
  • Is there a way to “lock down” the fixed sizes? For instance, mine looks perfect at 1000px, but looks bad when it shrinks down. (That’s why I was using what I thought was a “fixed” layout.) Can you do that with bootstrap? – Ross R May 18 '13 at 13:58
  • @eterps responded to this question off SO, but i'll put it here for future info: Sounds like you want fixed, but not responsive. Do not use bootstrap-responsive.css (or the equivalent less files). You can test this out very quickly by commenting out the last two lines of bootstrap.min.css. – Ross R May 21 '13 at 04:31
  • Thanks @eterps Please update the link for your answer at "The proper fluid width example is **here**." I get a 404 "There isn't a GitHub Page here." when going to http://twitter.github.io/bootstrap/examples/fluid.html – Love and peace - Joe Codeswell Jul 27 '13 at 17:35
  • Thanks for the heads up. I fixed the links to point to the new location for the Bootstrap 2.3 docs. – eterps Jul 29 '13 at 02:15
  • Although not your point, this is the first time I've been shown the distinction between fluid and responsive. – Shawn Taylor Jun 02 '14 at 20:35
21

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.

Jason Sundram
  • 12,225
  • 19
  • 71
  • 86
Lido
  • 309
  • 2
  • 6
7

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.
Thilanka De Silva
  • 1,088
  • 13
  • 15
6

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;
}
KyleMit
  • 30,350
  • 66
  • 462
  • 664
Ying
  • 2,660
  • 24
  • 23
  • 2
    I don't understand why people keep on saying that 'container-fluid' is not supported in Bootstrap 3, while it is. I've just double checked and in Bootstrap 3.1.0 it's clearly defined. – bart Mar 07 '14 at 05:50
  • 10
    That's because it was removed in 3 [added back in 3.1](https://github.com/twbs/bootstrap/commit/6273604601c58284f49b38ae4e52533b9689437c). – Steve Klösters Mar 28 '14 at 08:28
-2

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.

enthusiast
  • 961
  • 7
  • 10
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/10216606) – piet.t Nov 16 '15 at 08:15
  • I agree .. but this is not a reference to the answer , this is a link to the plugin , where the the files can be downloaded, I guess I cannot attach files with answer here.. – enthusiast Nov 21 '15 at 14:31