Not able to apply bootstrap5 css in angular application

Question

Hi I have been using sync fusion for our latest project but all the controls are applying material CSS by default I want to apply bootstrap5 CSS.

I also imported bootstrap5 nodemodules in styles.css file still styles not applying

Sujith Kumar Rajkumar · Answer

Hi Chethan, 
 
Greetings from Syncfusion support. 
 
We were unable to reproduce the reported problem from our end as the local imported bootstrap5 styles were properly applied for the EJ2 Grid. Please check the below sample for reference, 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridApp663702713 
 
We suspect that you might be facing problem due to using older Syncfusion packages since the bootstrap5 styles were implemented in the recent package version. So please follow the steps provided below to remove duplicate packages(if any) and install the latest packages, 
 

Delete package.lock.json file from your application.   
Remove the @syncfusion package folder from the node_modules.
Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.   
Then install the NPM packages.
 
Once installed, clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 
 
Alternatively you can also directly refer the online CDN link theme file for the EJ2 Grid as demonstrated below, 
 




@import 'https://cdn.syncfusion.com/ej2/bootstrap5.css'; 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R