Step by step learning the Grid System of the Twitter Bootstrap

        By Carmel Schvartzman

In this tutorial we'll learn the Grid System of the Twitter Bootstrap. The Bootstrap includes a responsive grid system that scales up to 12 <div>s columns, and adapts itself to the device when size decreases.
Bootstrap is the more widely used and more popular CSS3 framework for developing responsive web apps,  making front-end web design very fast and easy.

In just 5 minutes we'll build a responsive web page using the Grid System of the Twitter Bootstrap with a form and a NavBar  with no effort at all:

The Twitter Bootstrap can be reached & downloaded from the Bootstrap official site : Bootstrap :

We'll une the NuGet Manager to install the Bootstrap:

Search for "Bootstrap":

The manager will add CSS & JS files to your project :

In order to use the Bootstrap in every web page, we'll modify the standard _Layout file at MVC Shared folder :

Having added both CSS and JS links, we modify the RouteConfig to browse to our test web page:

Now we add a new Action method & a View to test the Bootstrap :

At the _Layout, we'll first add a NavBar, so go to the Bootstrap web site:

Copy the entire <nav>, & return to the _Layout file:

At the _Layout, take aside the Menu, because we'll use it afterwards:

Then delete the whole <header> :

And paste the NavBar in place of that <Header>, updating the dropdown-menu with our Menu :  :

Now find the "body" of the file:

And replace the class for the "container" class :

Rebuild & browse to the web page :

We have already a NavBar. Now copy - paste the Grid System of the Bootstrap to your page, to have a wider idea of how the System works:

 Copy the entire <div> :

As you see, the class "col-md-X" tells Bootstrap how much columns you intend the div to spread. The Grid System divides the screen in 12 sections that looks like this:



After you paste the html inside your page, and replace the texts with some pictures, you can realize how the system works :

After you played a bit with the system, changing background colors or inserting images as you can see in the snapshot, let's now divide the layout in TWO 6-6 columns, and add the Jumbotron component from the Bootstrap site at the right side, and a form at the left side :

Just paste this code to your View:

<div class="jumbotron">  <h1>Hello, world!</h1>  <p>...</p>  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p></div>

The complete HTML pasted inside the web page will be the following :

 <div class="row">            <div class="col-md-6">                <form role="form">                    <div class="form-group">                        <label for="exampleInputEmail1">Email address</label>                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">                    </div>                    <div class="form-group">                        <label for="exampleInputPassword1">Password</label>                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">                    </div>                    <div class="form-group">                        <label for="exampleInputFile">File input</label>                        <input type="file" id="exampleInputFile">                                             </div>                    <div class="checkbox">                        <label>                            <input type="checkbox">                            Check me out                        </label>                    </div>                    <button type="submit" class="btn btn-default">Submit</button>                </form>            </div>            <div class="col-md-6">                <div class="jumbotron">                                        <div class="container-flow">                        <img class="img-circle" src="~/Images/Phalaenopsis_amboinensis.jpg" />                    </div>                    <div class="container-flow">                        <p><a class="btn btn-success btn-lg" href="http://getbootstrap.com/" role="button">Learn more at  Bootstrap.com</a></p>                    </div>                </div>
            </div>        </div>

And when you browse you can see the 6-6 division of the page as it results :

That's all!!  In this tutorial we've learned the Grid System of the Twitter Bootstrap in  Asp.Net MVC in 5 minutes.

Happy programming.....

כתב: כרמל שוורצמן