Bootstrap

[Armando Costa]

I would be nice if your objects would receive "at least some" of the colors, fonts and some general looks from bootstrap template css!

It isn't the most important thing but if applying a new theme also reflected on your objects would be so much better for us...

Please consider it, or some tool that could connect the most important thing like colors, etc... to the bootstrap css.

Loving your Blazor suite, the most advanced on the market!

[Sridurgha Uthayakumaran]

Hi Armando,

 

Greetings from Syncfusion.

 

We suggest you to use the Theme Studio for customizing styles of Blazor components. Please refer the below link for further details on Theme Studio for Syncfusion Blazor components.

 

Theme Studio: https://ej2.syncfusion.com/blazor/documentation/appearance/theme-studio/

 

For your convenience, we have created a sample referring customized styles created from theme studio and the same can be found from the below link.

 

Sample: https://www.syncfusion.com/downloads/support/forum/148727/ze/bootstrapTheme1930215781.zip

 

Please let us know if you require any further assistance on this.

 

Regards,

Sridurgha U

[Armando Costa]

If I want to apply a different color theme from bootstrap all app change except Syncfusion objects. 

No advantage here, just double the work...

But if you receive some of the attributes from the current bootstrap theme you would at least reflect some of the appearance automatically.

Or for instance on theme generator, you could ask for a bootstrap.css you want to use and try to adapt the best way possible to your suite.

[Sridurgha Uthayakumaran]

Hi Armando, 

We would like to let you know that the bootstrap classes are used in bootstrap.css file and  it is not possible to customize the style for Syncfusion components from bootstrap classes. Instead we can customize the styles by using bootstrap SCSS variable. Here the required bootstrap scss variable can be overridden. Please add the below code snippet in custom.scss file along with the SCSS variable which is to be overridden. 

@import "@syncfusion/bootstrap/scss/functions.scss"; 

@import "@syncfusion/bootstrap/scss/variables.scss"; 

 

/* make changes to the !default Bootstrap variables */ 

$btn-font-size: $btn-font-size-lg; 

 

/* finally, import Bootstrap to set the changes! */ 

@import "bootstrap/scss/bootstrap"; 

@import 'ej2-base/styles/bootstrap.scss'; 

@import 'ej2-buttons/styles/button/bootstrap.scss'; 

For your convenience, we have created a sample where we have overridden the color and size of button component and the same can be referred from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/148727/ze/scssbootstrap1251897530.zip  

However, we will document this in our blazor documentation and this will be published in one business day[11/06/19]. 

Please get back to us if you require any further assistance on this. 

Regards, 

Sridurgha U 

[Armando Costa]

Hi Armando, 

We would like to let you know that the bootstrap classes are used in bootstrap.css file and  it is not possible to customize the style for Syncfusion components from bootstrap classes. Instead we can customize the styles by using bootstrap SCSS variable. Here the required bootstrap scss variable can be overridden. Please add the below code snippet in custom.scss file along with the SCSS variable which is to be overridden. 

@import "@syncfusion/bootstrap/scss/functions.scss"; 

@import "@syncfusion/bootstrap/scss/variables.scss"; 

 

/* make changes to the !default Bootstrap variables */ 

$btn-font-size: $btn-font-size-lg; 

 

/* finally, import Bootstrap to set the changes! */ 

@import "bootstrap/scss/bootstrap"; 

@import 'ej2-base/styles/bootstrap.scss'; 

@import 'ej2-buttons/styles/button/bootstrap.scss'; 

For your convenience, we have created a sample where we have overridden the color and size of button component and the same can be referred from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/148727/ze/scssbootstrap1251897530.zip  

However, we will document this in our blazor documentation and this will be published in one business day[11/06/19]. 

Please get back to us if you require any further assistance on this. 

Regards, 

Sridurgha U 

Thank you,

 ill test that and wait for Blazor doc. update

[Sridurgha Uthayakumaran]

Hi Armando, 

We have published the documentation for customizing the Blazor components and the same can be referred from the below link. 

Documentation: https://ej2.syncfusion.com/blazor/documentation/common/how-to/customize-font-size-and-color/ 

Please let us know if you have any concerns. 

Regards, 

Sridurgha U