Creating Fluid Layout with Bootstrap

In Bootstrap Framework, there are two types of layouts are available- Fixed layout and Fluid Layout. One can choose any of these two types of container to use and design your responsive layout for a website. These both types of layouts are responsive but in different ways. Fluid layout is (.container-fluid) and for fixed layout (.container). The .container has a specific pixel width values which can be changed with the help of media queries. Fluid layout (.container-fluid) has 100% width functionality.

Fluid (.container-fluid) can be resized as you can change the width of your window or browser by any value of amount, therefore leaving no value of empty space on the sides unlike the fixed layout (.container). Fluid layout (.container-fluid) can be resized to the width of your browser which gives you an added flexibility while designing websites for mobile, desktop, laptop or tablet devices of flexible screen size and width.

Instead of using pixels for column widths, Fluid grid system uses percent's. The responsive capabilities of Fluid grid system are similar as fixed grid system while it also ensures that same proportions for screen resolutions for various type of devices.

In version 3.2 onwards for Bootstrap framework, one can make use of class .container-fluid in order to create various fluid layouts as it also utilizes the 100% width of the viewport. The class .container-fluid is used to apply the horizontal margin on element with value of left and right padding of around value of 15 pixels. It offsets the value of left and right margin of -15x (i.e. margin: 0-15 px;) can be used for .row. The code generated with Fluid layout can be used to cover 100% of width of the screen.

Basic type of Fluid Grid HTML

One can make any row with the name fluid by changing the .row parameter to .row-fluid. The column classes can be used to stay the same value which makes it easier to flip between the fluid grids and fixed. Example of code is given below:


		    <div class="row-fluid"> 

    <div class="span4"> ...</div> 

    <div class="span8"> ...</div> 

    </div>

    

How to use Fluid offsetting

Even one can used to operate fluid grid system with that of fixed grid system by adding an additional parameter of .offset to any column value to offset by that number of columns. Example of such code includes.


   <div class="row-fluid"> 

  <div class="span4"> ...</div> 

  <div class="span4 offset2"> ...</div> 

  </div> 


Fluid nesting

Fluid grid utilizes the nesting in a different manner all together in which one can next number of columns up to the value of 12. This is because of the reason that Fluid Grid works with percentages and not with the pixel values for setting the value of column widths

Fluid Layout for Twitter Bootstrap

If you are looking to create a layout which is not fixed and want to be flexible, then you need to use percentages. Example code includes the following


		

		     <div class="container-fluid">   

      <div class="row-fluid">   

        <div class="span2">   

          <!--Sidebar content-->   

        </div>   

        <div class="span10">   

          <!--Body content-->   

        </div>   

      </div>   

    </div>   

		

Explanation of the code

Purpose of the fluid layout is to create percentage layout with width value. Fluid Styles for creating the main container to create a fluid layout is available in CSS layout. Purpose of the fluid Layout is to create a percentage based (e.g. width=20%) layout.

Fluid Design vs Responsive design

Fluid design means that different sections of the site are defined in a relative manner. It does not matter whether you are using any type of device like a smartphone, a tablet, desktop, the website will look in the same proportion and the value of the element takes up only half of the screen. This is mainly because in the CSS, each and everything is defined in terms of a percentage element or metric which can be scaled very easily from range of devices. On the other hand, fixed size of pixels might just make an element which takes up value of the screen on the desktop and whole screen could be bigger than the value of screen or smartphone. On the other hand when we are talking about responsive design in terms of programming side, where one can detect the user's browser or the size of the screen. It more or less shows a different view based on the size of the device. For example, you could be thinking about using a three column layout for the desktop, two layout columns for tablet devices and a single column layout for a smartphone. The view of any device can be different because you are actually changing the value of view for the devices.