ASP.NET MVC 5 Bootstrap Step by Step

Introduction

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

The new feature which was added in MVC 5 most people were adding this designing framework to project manually.

This framework helps to design application faster and responsive.

After we have created an application in MVC 5 let's have look on the Content folder, wow all style and script related to bootstrap are already available we know more required to add bootstrap manually that's great.

Fig 1. Project structure

After having a look on style and script now let's have look at the design of application how it looks.

Login.cshtml view in Visual studio IDE

For seeing bootstrap design we are going Open Login.cshtml View which is located in Views ➜ Accounts folder in visual studio IDE and this View is completely designed in bootstrap.

Now after we have gone through mark let's access this View in the browser and view it in desktop mode how the design looks like.

Snapshot of Login View in desktop mode

Fig 3. Login View in browser [Desktop]

Now, same Login View if we try to see this in Mobile then it will adjust accordingly.

The menu which was horizontal in desktop view is turned into vertical in mobile view as shown below snapshot.

Snapshot of Login View in Mobile mode

Fig 4. Login View in browser [Mobile]

Now after having look on the responsive design now let's view mechanism behind this.

We are going to open Layout [_Layout.cshtml] View on this View there is a reference of bootstrap js and CSS which make this View responsive.

Fig 5. Rendering style and script bundles on _Layout.cshtml

After we saw how this scripts and CSS are rendered on view now let's look at this bundle this bundle are located in BundleConfig.cs and this BundleConfig.cs is located in App_Start folder.

Fig 6. Location of BundleConfig.cs file

Just click on BundleConfig.cs class it will open in Visual studio IDE as shown below.

All scripts and style bundles are written in this file and you can see it in below snapshot.

[“~/bundles/bootstrap”, "~/Content/css"] bundle.

Fig 7. Style and script bundles of bootstrap in BundleConfig.cs

+91-22-66752917
+91 9967590707
questpond@questpond.com / questpond@yahoo.com