Sunday, July 13, 2014

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="" role="button">Learn more at</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.....

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