We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

recreate bootstrap5.css (and then customise it)


For a large webapp, I am looking to apply changes to the standard bootstrap5 theme. I am trying to replicate the bootstrap5.css file referenced in the _Host.cshtml <head> element in my Blazor server app, in order to customise and replace it:

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />

I followed the instructions in https://blazor.syncfusion.com/documentation/common/how-to/customize-font-size-and-color and managed to get the Webcompiler going. However, I'm not sure exactly what files to @import in order to recreate the entire bootstrap5.css file as found in the NuGet package.

1 Reply

BH BharatRam Harikrishnan Syncfusion Team April 27, 2023 02:25 PM UTC

Hi Martin,

We would like to inform you that the following UG is outdated, so please follow the Solution 1 and 2 for customizing the default themes: https://blazor.syncfusion.com/documentation/common/how-to/customize-font-size-and-color.

Solution #1:

The Blazor Themes NPM package contains SCSS files for all themes supported by Syncfusion Blazor components. So, you can import bootstrap5.scss file in order to recreate the entire bootstrap5.css file as found in the NuGet package.

Please refer to our NPM package reference UG for instructions on how to customize the default themes:


For example in your case, you can customize bootstrap5.scss and then add reference to the bootstrap5.css  in _Host.cshtml of your project.

In the following code, the primary theme variable color is changed in bootstrap5.scss.

For all components:




/* @import 'blazor-themes/SCSS-Themes/<Theme name>.scss'; */

@import 'blazor-themes/SCSS-Themes/bootstrap5.scss';

For the Calendar (individual) component:




/* @import 'blazor-themes/SCSS-Themes/<Package name>/<Control name>/<Theme name>.scss'; */


Then, you can compile the custom.scss file using a web compiler, as we have explained in our UG.

Solution #2:

You can utilize our Theme Studio tool to modify the default appearance of all our built-in themes.

Please find the UG of Theme Studio for more information: https://blazor.syncfusion.com/documentation/appearance/theme-studio


Bharat Ram H

Live Chat Icon For mobile
Up arrow icon