Step by step how to add the Twitter Bootstrap to your web site in 5 minutes

        By Carmel Schvartzman

In this tutorial we'll learn how to add the Twitter Bootstrap to your  Asp.Net MVC in 5 minutes.
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 with a form and a NavBar using the Twitter Bootstrap 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. Let's now add the Jumbotron from the Bootstrap site :

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>

Let's browse to the page:

Nice ?  Now we add an entire form in 30 secs :

Again copy-paste it to your View :

<h2>BootstrapInAction</h2><div class="jumbotron">  <h1>Hello, world!</h1>  <p>...</p>  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p></div><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">    <p class="help-block">Example block-level help text here.</p>  </div>  <div class="checkbox">    <label>      <input type="checkbox"> Check me out    </label>  </div>  <button type="submit" class="btn btn-default">Submit</button></form>

And we have now :

Our web page is responsive, and can be displayed in mobile also :

The NavBar has collapsed and can be seen again clicking the top-right button :

That's all!!  In this tutorial we've learned how to add the Twitter Bootstrap to your  Asp.Net MVC in 5 minutes.

Happy programming.....

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