Add Bootstrap to your MVC Applications

Bootstrap is a free CSS library that makes it very easy to create layouts and apply styles to your web application. The library provides many pre-defined CSS classes which let you create rich and interactive user interfaces to simple HTML elements such as divs, tables and unordered lists. Please note that this blog post refers to Boostrap in the context of an ASP.NET MVC application.

Bootstrap is automatically included when you create a new ASP.NET MVC Web Application in Visual Studio, provided that you don’t’ select the Empty template. However, in this example I will select the Empty template and see how we can include the Bootstrap dependencies via NuGet.

clip_image002

My Solution Explorer shows a completely empty web project.

clip_image003

I can simply right-click on the project, click on Manage NuGet Packages and search for “Bootstrap”.

clip_image005

Click on Install. This will add a new Content and Scripts folder to your web application. You will also notice that JQuery libraries are also included in the application.

clip_image006

Now that you have Bootstrap and it’s dependencies installed, you can reference them in your MVC Views (or HTML files) and start building rich user interfaces.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s