One of the major benefits of using Bootstrap is the wide variety of resources available on the Internet. The web development community has embraced Bootstrap, and you'll find tons of valuable templates, snippets, and advice on using Bootstrap online.
By combining a predesigned Bootstrap template and ASP.NET MVC, you can save a lot of time without having to worry about site layout or design.
In this chapter, we will cover the following topics:
- Why we use prebuilt HTML templates and how they will save time
- Building the master layout
- Adding specific page views
- Including charts in your views
It is a well-known fact that most developers are not necessarily good designers. We prefer to work on the backend, building great performing and intelligent software, and sometimes, we tend to think of the user interface as an afterthought.
By using a predesigned HTML Bootstrap template, we can give our users an intuitive and well-designed user interface that was designed by a professional designer. If the design was based on Bootstrap, the developer is already familiar with most of the CSS class names, components, and plugins, and does not have to relearn anything.
The Web offers an assortment of free and premium Bootstrap templates. Themeforest (www.themeforest.net) provides a mind-boggling array of different premium site styles and designs.
With Bootstrap 4, the Bootstrap team also offers official themes, which you can purchase. Each theme provides a full set of tools and examples and can be used as a good starting point for your project.
Note
The Bootstrap themes can be used to build dashboard, marketing pages, and a variety of web apps. They are competitively priced and are available from http://themes.getbootstrap.com.
For our example in this chapter, we'll use the free Bootstrap 4 Admin Dashboard template available from Bootstrap Zero (www.bootstrapzero.com/bootstrap-template/bootstrap-4-admin-dashboard). The Bootstrap 4 Admin Dashboard template is a basic admin theme that uses Bootstrap 4 and is ideal for a backend administration or a more complex style web application. The theme looks like the following screenshot:
Before we can build an ASP.NET MVC site with the template, we need to download the source files by completing the following steps:
- Navigate to http://www.bootstrapzero.com/bootstrap-template/bootstrap-4-admin-dashboard and click on the Download button to download a zip archive containing all the necessary HTML, CSS, and JavaScript files.
- Extract the files to a folder on your local hard drive; you'll notice that the archive contains the following folders :
cssjs
- The archive also contains an
index.htmlHTML file that illustrates various page and component layouts of the template, which you'll use as the starting point for designing your project layout.