How to use Bootstrap with ASP.NET MVC

Beginner

2019-04-12

Using Bootstrap 4 with APS.NET MVC 5

Bootstrap is a very powerful library to write style-rich HTML content. It’s developed by Twitter in 2011.

Twitter Bootstrap is a free and open-source front-end framework (library) for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide a uniform, modern appearance for formatting text, tables and form elements.

Introduction

In this tutorial we will integrate bootstrap framework with our ContactUs form we created earlier. If you haven’t following along check the ContactUs tutorials : ASP.NET MVC Contact Us Data-Entry Application and ASP.NET MVC Model Binding Data Entry Application part-2 .

With bootstrap you can create rich stylish buttons, menus and all kinds of content like the following image

bootstrap-examples

Getting Bootstrap 4

The current Bootstrap version no is bootstrap -v 4.1.3 . We will use the compiled version of bootstrap through BootstrapCDN.

What is CDN

When loading an online CSS or Javascript library, the major issue is latency.

A content delivery network (CDN) is a system of distributed servers (network) that deliver pages and other Web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server.

So, CDN solves the problem of latency by providing a very fast and near server that you can import the library from.

we will use https://getbootstrap.com/ official CDN in this tutorial.

 

Import Bootstrap in ASP.NET MVC Project

ASP.NET MVC projects import Bootstrap by default in the installed packages. So let’s make sure we don’t want this option.

Right click on project name then choose Manage NuGet Packages

asp-net-mvc-nuget-packages

In the installed menu search for “Bootstrap”. If you find a result then click on it and click uninstall.

If you don’t get any result then bootstrap isn’t installed in your project.

asp-net-mvc-nuget-uninstall-package

ASP.NET MVC Layout View

CSS and javascript files normally get imported in the global _Layout.cshtml.

Let’s First understand how the layout system works in ASP.NET MVC

In a typical website design good practice, It’s not good to write duplicated HTML Tags and CSS. Instead, It’s better to write common used UI elements like footers and headers in separate files and include those files when needed.

With this we don’t have to edit each section where HTML Tags exist only to change one class name or variable.

ASP.NET MVC Introduced a Layout view which contains these common UI parts, so that we don’t have to write the same code in every page.

ASP.NET MVC Layout View Location

The most common way to setup a Layout page is by using _ViewStart.cshtml which is a Razor page created automatically inside Views folder when you create a new asp.net mvc project.

asp-net-mvc-viewstart-page

Open the _ViewStart.cshtml code


the Layout variable contains the global layout page which acts as a master page for all the layouts. It’s located Inside Shared folder in the Views folder.

asp-net-mvc-shared-layout

Open the Shared _Layout.cshtml page


You can see the page contains the global Header and footer sections to be rendered across all the site pages.

the part of the code that renders the Body content is

@RenderBody()

 

the RenderBody tells Razor view system to render the body of the page you are in.

 

Add Bootstrap 4 Import Code

Inside the Head tag of _Layout.cshtml insert the Bootstrap CSS reference link and JS libraries needed for bootstrap.


Now to have the master layout page applied to the index.cshtml page make sure you specify the layout at start of the page.

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

 

this tells Razor engine to apply the _Layout.cshtml view to our page. The Full code for the page is :


clearly you can see the difference, Following is our contact us page without before using Bootstrap.

asp-net-mvc-bootstrap-missing

and following is the same page after using Bootstrap

asp-net-mvc-bootstrap-style

Modify the Contact Us page Style

Now that we got bootstrap up and working for our project. It’s time to rework the design we did in the previous tutorial : ASP.NET MVC Contact Us Data-Entry Application

In index.cshtml add the Layout section and remove unnecessary code :

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

 

you can find index page style has changed from :

asp-net-mvc-bootstrap-is-missing

and after using bootstrap you can see the style change and also input validation got prettier

asp-net-mvc-bootstrap-validation

Summary

In This tutorial we have seen how to import Twitter Bootstrap framework to our project and enhance our design. we understood how ASP.NET MVC Views system works and how it renders the master Layout page along with sub pages body sections.

 

References

1- https://getbootstrap.com/

2- https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-2.1