Bootstrap is a front-end framework which is freely available but developed by Twitter. Using Bootstrap custom themes, we can change the look and feel of our applications very easily. It provides you the Grid System which is very powerful when it comes to the front-end development. It makes your web application responsive, means that application can adjust to work with any screen smoothly. Also Bootstrap can save lots of time on front-end development and easy to integrate into web applications.
Lets see how we can start with Bootstrap custom themes. First create a MVC web application. When you run the newly created project, it will open up the web application which is with the default MVC theme. Then we need to find a good theme for our web application. For this we can go to Bootswatch and download a nice theme.
Then find the below codes inside Bundle.config file.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
We need to change the highlighted line to our newly added CSS file.
"~/Content/bootstrap-custom.css",
This is the place we are setting the bootstrap css for our application.
If we run the application, we can see the new theme applied and the new look and feel of our application. Please make sure to clear the browser cache to load the new theme properly.
Like this we can change our applications look and feel with new Bootstrap custom themes.
Above is a sample bootstrap site available on web