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

SCSS Bootstrap 4 customization via standard Bootstrap 4 variables

Thread ID:

Created:

Updated:

Platform:

Replies:

145177 Jun 11,2019 11:39 AM UTC Jun 17,2019 10:39 AM UTC Angular - EJ 2 5
loading
Tags: General
Tom
Asked On June 11, 2019 11:39 AM UTC

Hello,

I'm setting up Angular - Bootstrap 4 project with SCSS support and thinking about use Syncfusion Angular components as main UI framework for new web app. There are some problems/questions with that approach.

I have standard Bootstrap 4 custom theme setup in my styles.scss file:

$enable-validation-icons: true;
$enable-pointer-cursor-for-buttons: true;
$body-bg: white;
$font-family-sans-serif: 'Roboto Condensed';
$font-family-monospace: 'Roboto Mono';
$font-size-base: 0.8rem;

$theme-colors: (
primary: #DD2E44,
secondary: #f0f0f0,
info: #7EBCFA,
success: #28A745,
warning: #FFC107,
danger: #DC3545);
$input-btn-focus-width: 2px;
$badge-font-size: 9px;

@import '~bootstrap/scss/bootstrap';

@import '~@syncfusion/ej2-angular-dropdowns/styles/bootstrap4.scss'; // Syncfusion part

I thought that Syncfusion components are using these standard Bootstrap 4 variables to setup components theme but then I found in your repos _bootstrap4-definition.scss files which containing absolute values of your own variables used by other Syncfusion scss files.

Is there any way to setup your framework to use standard Bootstrap 4 variables?

Regards,
Tom


Jesus Arockia Sankaran S [Syncfusion]
Replied On June 13, 2019 12:12 PM UTC

Hi Tom, 

Greetings from Syncfusion. 

We can override the Syncfusion component styles using standard Bootstrap 4 variables as shown in the snippet and reference image below where we have changed the primary variable color of Bootstrap to "Red" and it is applied in our Syncfusion component that you can get the sample form the link below.  

Code Snippet 1: (order of importing scss files for calendar component) 

@import '../node_modules/bootstrap/scss/bootstrap.scss'; 
@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap4.scss'; 
@import '../node_modules/@syncfusion/ej2-angular-buttons/styles/bootstrap4.scss'; 
@import '../node_modules/@syncfusion/ej2-angular-calendars/styles/bootstrap4.scss'; 

Code Snippet 2: (changing primary variable color) 

$primary:       red !default; 

Reference Image

 


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

Regards, 
Jesus Arockia Sankaran S 
 


Tom
Replied On June 13, 2019 12:30 PM UTC

Hi,

Thanks for the answer but setting up colors is simple case. 

How about using other Bootstrap 4 variables in Syncfusion SCSS files? There are a lot of customization that is possible in Bootstrap 4 custom theme - https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss

Is there any way to use those variables without spying at every Syncfusion SCSS _bootstrap4-definition.scss file and overriding one variable after another for each component?

Regards,
Tom

Jesus Arockia Sankaran S [Syncfusion]
Replied On June 14, 2019 01:46 PM UTC

Hi Tom, 

Sorry for the inconvenience. 

Question 
Answer 
How about using other Bootstrap 4 variables in Syncfusion SCSS files? 
We developed our Bootstrap 4 theme with its specifications, but we only provided support to override the color variables. 
Is there any way to use those variables without spying at every Syncfusion SCSS _bootstrap4-definition.scss file and overriding one variable after another for each component? 
We currently need to override the specific component variables in order to customize it. 

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

Regards, 
Jesus Arockia Sankaran S 


Tom
Replied On June 14, 2019 05:31 PM UTC

Ok. Thanks.

Regards,
Tom

Jesus Arockia Sankaran S [Syncfusion]
Replied On June 17, 2019 10:39 AM UTC

Hi Tom, 
  
Thanks for your update. 

Regards, 
Jesus Arockia Sankaran S 


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