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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Bootstrap

Thread ID:

Created:

Updated:

Platform:

Replies:

148727 Oct 31,2019 11:24 PM UTC Nov 6,2019 09:22 AM UTC Blazor 5
loading
Tags: General
Armando Costa
Asked On October 31, 2019 11:24 PM UTC

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 [Syncfusion]
Replied On November 1, 2019 11:33 AM UTC

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
Replied On November 1, 2019 05:45 PM UTC

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 [Syncfusion]
Replied On November 5, 2019 12:58 PM UTC

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. 


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
Replied On November 5, 2019 08:55 PM UTC

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. 


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 [Syncfusion]
Replied On November 6, 2019 09:22 AM UTC

Hi Armando, 

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


Please let us know if you have any concerns. 

Regards, 
Sridurgha U 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon