Use Bootstrap Templates
All Visual Studio web projects are generated with Bootstrap CSS libraries and jQuery included. This makes it easy to add new Bootstrap templates to change the look and feel of your application without having to change the majority of the HTML/CSS in the views, other than to get the custom design you want.
Companies and individuals all over the world create and post Bootstrap design templates for developers like you and me to purchase and use in applications. One of my favorite places to find these is wrapbootstrap.com. There are hundreds of templates to choose from, and you can narrow your choices by category (multipurpose, business, admin, single page, etc.), by Bootstrap version (3.x, 4.x, all), or by popularity, price, and other criteria. You can also perform a general search if you have a good idea of what you want.
For this demonstration, I purchased a template called Mazel for $10. You don’t need to use the same one - in fact, you don’t need to use one at all to make the app work. I just want to show you how templates such as this can dress up your applications.
When you download one of these templates, it comes as a ZIP file, which you must extract. When I extract Mazel, there are two primary folders: Documentation and Mazel-html-template. The instructions specific to the template are in the documentation. It’s a good idea to read through them before integrating a template with your project.
There are three template options beneath the Mazel-html-template folder, and the one I’m going to use is the multipurpose option, shown below:
While it’s not difficult, it can be tedious to incorporate your new template with your project, so I’ll walk you through this process as you follow along with the screencast below.
Understand .NET MVC Layouts
I’ve incorporated the assets from the template into the Watchlist project, so the next thing to do is set up a layout page so it can be applied to all the other pages in the project, and then set up a sample page so you can see the template in action.
Let's Recap!
This chapter was all about dressing up your application with Bootstrap CSS templates:
You learned how to locate and download templates from wrapbootstrap.com, an excellent source for affordable design templates.
You also learned how to incorporate a template into your MVC project, and how to update your layout page and other content pages to take advantage of the template design.
Now it’s time to practice what you’ve learned by applying a template to your project and readying it for online publication.
