If my view templates use some standard html components (links, buttons etc), how can I get them to look like the kendo components if im using the bootstrap theme?
In angular.json, Im using
"styles": [
"node_modules/@progress/kendo-theme-bootstrap/dist/all.css"
],
So If I want to use bootstrap for html elements that are NOT kendo components, I suppose I would need to include the generic bootstrap module as well, so this?
"styles": [
//"src/styles.css"
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@progress/kendo-theme-bootstrap/dist/all.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
1 Answer, 1 is accepted
Indeed, this is the recommended approach for adding both Bootstrap and Kendo CSS to the application. Alternatively, you can import both Kendo and Bootstrap stylesheets in the styles.css file.
Please note that if you will be using Bootstrap components too, the Bootstrap scripts rely on both jQuery and popper.js so these libraries should be installed and added to the application too (in a similar manner, outlined in the following article):
https://www.techiediaries.com/angular-bootstrap/
If you are not going to use Bootstrap components, you do not need to import the Bootstrap-related JavaScript and libraries - just the CSS.
You can then proceed styling HTML elements using the Bootstrap library as if Kendo components are not used at all - meaning that our styling and components do not interfere with other elements of the page in any way.
You can also install HTML elements with built-in Kendo styling by adding the respective classes, for example a regular button with the k-button and k-primary classes will look like a Kendo UI button:
https://plnkr.co/edit/y7KVyrCBk5kfSQ6Ekkwp?p=preview
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik