Kendo UI material theme and bootstrap messing up the styles when used together

Question

I am using kendo UI material theme for my application. I also want to use bootstrap styles in it. When I add the material and bootstrap styles it does not display the controls as material theme. The Kendo controls are messed up. I am using kendo tabstrip and kendo grid controls. Could you please help on this?

Answer 1

It is unclear if you are using two Kendo UI themes (Material + Bootstrap), or registering one Kendo UI theme and the Bootstrap stylesheet. The former is not possible, as only one Kendo UI theme can be used at a time.

For using correct common Kendo UI CSS files with their corresponding themes, check:

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#common-css-files

For using the Kendo UI Bootstrap theme, check:

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap

In any case, see the following article, which explains how to achieve proper styling with Kendo UI themes and Bootstrap CSS, which can mess up due to different box model usage:

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout

Answer 2

The second css being load will override the first one because the class names are the same. It´s no possible to mix the 2 themes and get the result you would like.

The solution is to build your own theme using telerik theme builder https://themebuilder.telerik.com/kendo-ui

Then you download the css file and put in your project. You can even choose a base for starting the theme (based on bootstrap or material)