ASP.NET 8 – Using Bootstrap 5 Themes

Abstract: We show how to configure the usage of multiple Bootstrap 5 Themes in ASP.NET8 MVC application. Many free Bootstrap 5 themes are available on the internet and can make web apps look better.

1. The need for a more professional UI look

ASP.NET8 MVC project is set by default with Bootstrap 5 CSS UI framework. But, somehow, the default Bootstrap 5 color palette does not look that good for the Bank application I was working on. So, I needed to look for some better Bootstrap 5 Themes.

1.1. Free Bootstrap 5 themes

There are many free Bootstrap themes on the Internet. I liked the site Bootswatch [1]. Themes there are FREE, with an MIT license. I decided to use those free themes for my project.

I realized, theoretically, I can even make the admin choose the theme for the app from several themes I offer preinstalled. So, I decided to make a proof-of-concept application.

2. Installing multiple Bootstrap 5 Themes
 

2.1. Configuration in appsetting.json

I decided to enable the web application admin to select the theme he/she prefers using the configuration option in appsettings.json.

2.2. Installing multiple themes

I downloaded several themes I liked and installed in the app.

2.3. Passing theme number to the Partial view

I defined my model and passed the info to _Layout.cshtml.

From there, I passed the info to the partial view _LoadingLayoutJsAndCss.cshtml.

In that partial view _LoadingLayoutJsAndCss.cshtml, I decide which Bootstrap theme to load based on the number configured in appsettings.json.

3. Final result

I will just show here what some themes look like in my prototype ASP.NET8 app. Please note that Theme 0 is the default Bootstrap 5 theme. It is pretty impressive how a good theme can change an app's look.

The problem is that Bootstrap Theme sometimes changes not just colors but border thickness, button shape (rounded, square, etc), spacing between elements, etc. Theoretically, you need to test every dialog/form for each Bootstrap Theme you offer to users.

4. Concerns and Conclusion

The problem is that each theme not only changes colors but also button sizes and spacing, so theoretically, one would need to test “every form for every theme” to make sure it renders properly before delivering the product.

I needed to do some work on CSS to support Themes. I needed to make sure components CSS like Breadcrumb and DataTables inherit colors from the theme. The problem is if they have color definitions in their own CSS, they will not follow the theme. You might need to do some work there.

If the project team/QA team wants to focus on only one theme, you can use the HARDCODE theme number in the release build and disable that config option.

Just, I think the developers-team would need to do development in the Bootstrap default theme (0), to make sure they do not fall for some bug in the theme itself. Those themes themselves can have bugs/issues.

Still, it is amazing how many quality free resources one can find for the Bootstrap UI framework.

5. References

[1] https://bootswatch.com/