Step by step how to use the Twitter Bootstrap Components in MVC

        By Carmel Schvartzman

In this tutorial we'll learn how to use most of the Components of the Twitter Bootstrap. The Bootstrap includes many components for you to import to your web page with a minimal effort and with maximal responsiveness and well design, which can be displayed on 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 open source framework for developing responsive web apps,  making front-end web design very fast and easy.

We suppose here that you have already installed the Twitter Bootstrap in your MVC app. If you don't, learn  in this tutorial how to install it in just 2 minutes.

In just 15 minutes we'll build a responsive web page using the Grid System of the Twitter Bootstrap, including  buttons & button groups, alerts, panels, wells, input groups, and even glyphicons, with no effort at all:

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

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

Now we'll keep COPYING-PASTING HTML markup from the Bootstrap official web site, in order :
1) to learn the most important Bootstrap components
2) to design a web page using that components

We'll start with a header:

TWITTER BOOTSTRAP HEADER

Go to the Bootstrap and copy the Header markup : 

Then paste it inside your MVC View:

Save & refresh the web page :

TWITTER BOOTSTRAP WELLS

Go to the Bootstrap and copy the Wells markup :

Save & refresh the web page :

TWITTER BOOTSTRAP PANEL

Go to the Bootstrap and copy the Panel markup :

Save & refresh the web page :

TWITTER BOOTSTRAP LIST GROUP

Go to the Bootstrap and copy the List Group markup :

Then paste it inside your MVC View:

Save & refresh the web page :

TWITTER BOOTSTRAP LABELS

Go to the Bootstrap and copy the Labels markup :

Then paste it inside your MVC View:

Save & refresh the web page :

TWITTER BOOTSTRAP INPUT GROUPS

Go to the Bootstrap and copy the Input Groups markup :

Then paste it inside your MVC View:

Save & refresh the web page :

TWITTER BOOTSTRAP BUTTON GROUPS

Go to the Bootstrap and copy the Button Groups markup :

Then paste it inside your MVC View:

Save & refresh the web page :

TWITTER BOOTSTRAP ALERTS

Go to the Bootstrap and copy the Dismissible Alerts markup :

Then paste it inside your MVC View:

Save & refresh the web page :

TWITTER BOOTSTRAP JUMBOTRON

Go to the Bootstrap and copy the Jumbotron markup :

TWITTER BOOTSTRAP GLYPHICONS

Also, copy the Glyphicons markup:

Then paste it inside your MVC View:

Save & refresh the web page :

Also, in case of a portable device, Bootstrap shows a complete responsive behavior :

That's all!!  In this tutorial we've learned how to use most of the Components of the Twitter Bootstrap. There are more components, and there will be many more in the future. This tutorial does not intends to survey all components, but give you the tools for you to continue exploring them on your own.

Happy programming.....

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