Home/MVC/New Feature in MVC 5 – Bootstrap

New Feature in MVC 5 – Bootstrap

From VS2013, Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by Mark Otto and Jacob Thornton.

  • In MVC5 project, Bootstrap is available by default in new MVC5 projects. we can also include in MVC4 by using Nuget.
  • Is it support for all ie Browser’s: It is not recommended for IE7 and below

Why we are using? What is the advantage ?

Now-a-Days, Bootstrap has become an increasingly popular front-end development framework for designing
rich and responsive web pages.The Bootstrap framework provides several benefits for developing rich pages.

Speed of Development

The main/biggest advantages of using Bootstrap it will reduce the developing time of UI.
For example, if you going to start new application with less time, we can use varity of boostrap is available in
the market. It will give more responsive and rich developed code.So making small changes we can achive our goal

Responsiveness

The responsiveness, as a name implies it will have more flexible in all devices like desktop,mobile,tablets…
Boostrap is mainly desined based on the responsive classes.

BootStrap in ASP.NET MVC 5

ASP.NET MVC 5 uses Bootstrap 3 as the CSS Framework in its default ASP.NET Web Application Tempate.
This very nice feature in ASP.NET MVC for developers to make their site more responsive.we can utlize the pleasure of the responsive navigation and website along with all the typography from Bootstrap 3.

Here start with an simple example

STEP 1 :

Create new project using mvc5, bootstrap will also included as default as shown in below (don’t forgot to choose creating mvc application using default template for viewing output)

dotnet-helpers-Bootstrap

STEP 2:

After creating application, run the application to view in the 100% mode as shown below. From the below image, we can see all the menu’s are lined at the top and content also  placed in row manner.

dotnet-helpers-Boostrap-step1

STEP 3:

The main purpose of using bootstrap is to make our website responsive and to make our work much easier.So above pages can adapted to view in any device like mobile,tablet… as shown in below image

dotnet-helpers-Boostrap-step2

In above image, the content are aligned onc by one to adapt the device. And the menu’s are aligned in top most right icon as show in below

dotnet-helpers-Boostrap-step3

Leave A Comment