Creating An MVC Application Using Bootstrap

In this article, we will discuss how to create an MVC application using Bootstrap.

What is Bootstrap?

Bootstrap is an open source library that contains the HTML, CSS, and JavaScript combined together for creating a web application with more responsive and mobile first type of applications.

Bootstrap was mainly introduced for building applications with more attractive user interfaces. It was introduced in 2011 and named Twitter Blueprint, developed by Mark Otto and Jacob Thornton.

Why we need it?

• Rapid Development speed
• Responsive

Introduced for Grid concepts for arranging the columns in the display.

col-md-12
col-md-6			col-md-6
col-md-4		col-md-4		col-md-4
col-md-3	col-md-3		col-md-3		col-md-3

• Consistency
• Customizable

Features

• The main feature of Bootstrap is that it is browser compatible to almost all type of browsers, including Google Chrome, Internet Explorer, Firefox, Safari, Opera etc.
• Creates responsive applications
• Employs mobile-first approach

In ASP.NET applications, we need to add the bootstrap JS and CSS files manually but in Visual Studio 2015, it was added as inbuilt functionality with the web applications. In this sample application, we will see how to use bootstrap library for forms and controls.

First, create a Web application using Visual Studio.

• Go to File -> New -> Project -> ASP.NET Web Application.
  
  
  
  
• Select MVC.
  
  
  

Add bundle references by using "Bundle Config" or "webopt" for adding JS and CSS files from directory.

By BundleConfig.cs in App_start Folder.

Bundle reference in MVC Layout form is in the Shared folder.

Designing a form in Web form, like the following.



And finally, run the application. The output screen will look like the following.

 

When you see the source of your form in browser, the rendered html will look like,

In this source file, we can see the rendered scripts and CSS files in the browser source.