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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[twitter-bootstrap] Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

Examples related to twitter-bootstrap

Examples related to responsive-design

Examples related to fluid-layout

Examples related to fixed-width