Bootstrap is based on a 12-column grid system which includes a powerful responsive structure and a mobile-first fluid grid system that allows us to scaffold our web app with very few elements. In Bootstrap, we have a predefined series of classes to compose rows and columns, so before we start, we need to include the <div> tag with the container class to wrap our rows and columns. Otherwise, the framework won't respond as expected because Bootstrap has written CSS which is dependent on it and we need to add it below our navbar:

<div class="container"><div> 

This will make your web app the center of the page as well as control the rows and columns to work as expected in response.

There are four class prefixes which help to define the behavior of the columns. All the classes are related to different device screen sizes and react in familiar ways. The following table from http://getbootstrap.com/ defines the variations between all four classes:

In our application, we need to create a two column layout for the main content area and sidebar. As we know, Bootstrap has a 12 column grid layout so divide your content in a way which covers the whole area.

We'll divide the 12 columns into two parts: one is nine columns for the main content and the other is three columns for the sidebar. Sounds perfect. So, here's how we implement that.

First we need to include the <div> tag inside our container and add the class as "row". We can have as many div tags with the row class as per the design needs, which can each house upto 12 columns.

<div class="container"> 
    <div class="row"> 
    </div> 
<div> 

As we all know, if we want our columns to stack on mobile devices, we should use col-sm- prefixes. Creating a column is as simple as taking the desired prefix and appending the number of columns you wish to add to it.

Let's take a quick look at how we can create a two column layout:

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            Column Size 3 for smaller devices
        </div>
        <div class="col-sm-9">
            Column Size 9 for smaller devices
        </div>
    </div>
</div>

If we want our columns to stack not only for smaller devices, use the extra small and medium grid classes by adding col-md-* and col-xs-* to your columns:

<div class="container"> 
    <div class="row"> 
<div class="col-xs-12 col-md-4"> 

In mobile view, this column will be full width and in tablet view, it will be four medium grid width.

</div> 
<div class="col-xs-12 col-md-8"> 
In mobile view, this column will be full width and in tablet view, it will be eight medium grid width.</div> 
</div> 
</div> 

So when it displays on a larger screen than a mobile device, Bootstrap will automatically add 30 px gutter spacing (the space between two elements) between each column (15 px on either side). If we want to add additional spaces between the columns, Bootstrap will provide a way to do this by just adding the additional class to the column:

<div class="container"> 
<div class="row"> 
<div class="col-xs-12 col-md-7 col-md-offset-1"> 

Columns in a mobile are one full width and the other half width with more space from the left:

        </div> 
    </div> 
</div> 

So this time we have used the offset keyword. The number at the end of that class name is to control the number of columns you want to offset.

Now, let's create some complex layout with nested additional rows and columns:

<div class="row">
    <div class="col-sm-9">
        Level 1 - Lorem ipsum...
        <div class="row">
            <div class="col-xs-8 col-sm-4">
                Level 2 - Lorem ipsum...   
            </div>
            <div class="col-xs-4 col-sm-4">
                Level 2 - Lorem ipsum...
            </div>
        </div>
    </div>
</div>

If you open it up in your browser, you will see that this will create two columns within our main content container, col-sm-9, which we created earlier. However, as our grid is nested, we can create a new row and have a single column or two columns, whatever your layout requires. I have added some dummy text to demonstrate the nested columns.

Bootstrap will also provide the option to change the ordering of the columns in the grid system by using the col-md-push-* and col-md-pull-* classes.

<div class="row">
    <div class="col-sm-9">
        Level 1 - Lorem ipsum...
        <div class="row">
            <div class="col-xs-8 col-sm-4 col-sm-push-4">
                Level 2 - col-xs-8 col-sm-4 col-sm-push-4   
            </div>
            <div class="col-xs-4 col-sm-4 col-sm-pull-4">
                Level 2 - col-xs-8 col-sm-4 col-sm-pull4      
            </div>
        </div>
    </div>
</div>

Observe the following screenshot:

Bootstrap also includes some predefined classes to enable elements to be shown or hidden at specific screen sizes. The classes use the same predefined sizes as Bootstrap's grid.

For example, the following will hide an element at a specific screen size:

<div class="hidden-md"></div> 

This will hide the element on medium devices but it will still be visible on mobiles, tablets, and large desktops. To hide an element on multiple devices, we need to use multiple classes:

<div class="hidden-md hidden-lg"></div> 

Likewise, the same with the visible classes, which work in reverse, showing elements at specific sizes.

However, unlike the hidden classes, they also require us to set the display value. This can be block, inline, or inline-block:

<div class="visible-md-block"></div> 
<div class="visible-md-inline"></div> 
<div class="visible-md-inline-block"></div> 

Of course, we can use various classes in one element. If, for example, we wanted a block level element on a smaller screen, but have it become an inline-block later, we would use the following code:

<div class="visible-sm-block visible-md-inline-block"></div> 

If you can't remember the various class sizes, be sure to take another look at the Getting to Bootstrap's grid section to learn the screen sizes.