Chapter 8. Beautifying ASP.NET MVC Applications with Bootstrap
You might have created an application with all the required functionalities. It may even work perfectly without any issues in all scenarios. But the success of your application depends on how well your users can access it. Your application should look good (if not great) and be user-friendly in order for it to be a success.
In this chapter, you are going to learn about the following topics:
Role of HTML and CSS in the ASP.NET Core application
Characteristics of front-end frameworks and different frameworks available
Bootstrap and its grid system along its features
CSS classes available in Bootstrap for form elements such as input and select elements
CSS classes for different types of HTML elements such as table
Using Bootstrap in your ASP.NET Core application
Before discussing how to make our application look good, let us take a step back and discuss the roles that HTML and CSS play in your application.
As mentioned earlier, all browsers can only understand HTML, CSS, and JavaScript. So, the applications that you build should produce output as HTML, CSS, and JavaScript. This holds true for web applications built using other technologies such as Java or Ruby on Rails. Having said that, we will only discuss HTML and CSS.
HTML (Hyper Text Markup Language) is used to structure the content in your web pages. For example, you can add content in a title tag so that it will be available in a browser's tab or window. Let us see an example.
Open any text editor (you can even use Notepad), type the following HTML content and the save file as Bootstrap.html. Please note the extension .html:
<!DOCTYPE html>
<html>
<head>
<title> Beautify your ASP.NET MVC applications using Bootstrap </title>
</head>
<body>
<h1> Bootstrap </h1>
<p>
Bootstrap is the most popular...
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web and you can access it at
http://getbootstrap.com/
.
Bootstrap has many features that meet the various needs of a web application. It has different CSS classes for each of the HTML elements so that you can use it without touching any CSS code. However, if you wish to override it, you can do so.
Let us look at each of the features of Bootstrap in brief.
The grid system in Bootstrap helps you to create a responsive layout for your application. This feature makes your application look great in all devices of different shapes including mobile devices.
Bootstrap provides a fluid grid system, which scales up to twelve columns as the device or viewport size increases. You can think of grid system as being like columns in an Excel sheet (like the one in the following screenshot):
We can combine multiple columns to create a wider column. In the second...
Using Bootstrap in your ASP.NET MVC application
There are different ways to get Bootstrap for your application:
Of these options, the easiest option is the first one.
Open the layout file (_Layout.cshtml) in the application that we created earlier. Include the CSS files at the top (within the head tag) and the scripts at the bottom (at the end of the body tag):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<...
Right click on the Project menu and select the Manage Bower Packages option from the context menu:
Once you select Manage Bower Packages, you will be able to install or uninstall the Bower package just as you installed or uninstalled the NuGet package.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of HTML 5 doctype. By default, the view that you create in ASP.NET Core will have HTML 5 doctype only. So, we do not need to do anything regarding this.
<!DOCTYPE html>
<html lang="en">
...
</html>
Let us make the following changes to our screen to make use of Bootstrap:
Apply the CSS class form-horizontal to the form.
For the label, input, and validation error spans use the CSS col-sm-2, col-sm-4, and col-sm-3 classes respectively
For labels, apply the CSS class control-label
For input HTML elements, the form-control CSS class is applied
For each of the form groups (containing the HTML elements such as label and input), apply the CSS class form-group
For all validation error messages, apply the text-danger CSS class so that they will be shown in red
Apply the table, table-bordered CSS class to style the table
The following is the complete updated...
In this chapter, we have learned about the role of HTML and CSS in any web application including the ASP.NET Core application. We have analyzed the needs of a frontend framework and discussed the features of Bootstrap—the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. We have discussed CSS and components available in Bootstrap for different types of HTML elements with examples. Finally, we have discussed how to incorporate Bootstrap in our ASP.NET Core application.
