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 make even 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, by 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 configured number 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 HARDCODE theme number in the release build and disable that config option. Just, I think 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. 6 References [1] https://bootswatch.com/ 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. 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. 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 make even the admin choose the theme for the app, from several themes I offer preinstalled . So, I decided to make a proof-of-concept application . the admin choose the theme for the app, from several themes I offer preinstalled a proof-of-concept application 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, by the configuration option in appsettings.json. appsettings.json. 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 . _Layout.cshtml From there, I passed the info to the partial view _LoadingLayoutJsAndCss.cshtml . _LoadingLayoutJsAndCss.cshtml In that partial view _LoadingLayoutJsAndCss.cshtml , I decide which Bootstrap theme to load, based on the configured number in appsettings.json. _LoadingLayoutJsAndCss.cshtml 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. Theme 0 is the default Bootstrap 5 Theme 0 is the default Bootstrap 5 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. Bootstrap Theme border thickness, button shape (rounded, square, etc.), spacing between elements, test every dialog/form for each Bootstrap Theme 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. test “every form for every theme” test “every form for every theme” 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. work on CSS components CSS color definitions in their own CSS, they will not follow the theme If the project team/QA team wants to focus on only one theme, you can HARDCODE theme number in the release build and disable that config option. Just, I think 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. development in the Bootstrap default theme (0), development in the Bootstrap default theme (0), Still, it is amazing how many quality free resources one can find for the Bootstrap UI framework. 6 References [1] https://bootswatch.com/ https://bootswatch.com/

Custom Bootstrap 5 Breadcrumbs - Ver 2: What You Need to Know

ASP.NET8 – Configuring the Use of 5 Bootstrap Themes

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

AI is Still a Long Way From Directly Replacing Programmers

A Starter Guide to Middleware in ASP.NET Core

Implement a Singleton DBManager in ASP.NET Core and C#

30-Day .NET Challenge - Day 26: Loop Unrolling

How To Implement API Key Authentication Middleware in ASP NET Core

Autofac ComponentRegistryBuilder in ASP.NET Core

AI is Still a Long Way From Directly Replacing Programmers

A Starter Guide to Middleware in ASP.NET Core

Implement a Singleton DBManager in ASP.NET Core and C#

30-Day .NET Challenge - Day 26: Loop Unrolling

How To Implement API Key Authentication Middleware in ASP NET Core

Autofac ComponentRegistryBuilder in ASP.NET Core

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps