Bootstrap with Kendo UI - Is it integrated?

Question

Does KendoUI implement or provides Twitter Bootstrap features ? I see a css - kendo.bootstrap.min.css in the Kendo. Any lights to throw on this ?

Solution 1

Actually, Kendo now provides a special version of their styles if you are using Bootstrap. It allows a better blending of Kendo UI widgets and Bootstrap components. You should now include these files:

kendo.common-bootstrap.min.css and your desired theme file - again the Bootstrap one will be obviously the best choice: kendo.bootstrap.min.css.

Ref: Kendo UI Docs - Using Kendo with Twitter Bootstrap

(example - see the page head in HTML)

If you want to modify the selected theme, you should use their Theme Builder, but it's sometimes a bit buggy (to this date).

Don't forget that Kendo UI and Bootstrap are in fact completely separate products and this all concerns just the "looks and feels".

Solution 2

Kendo UI isn't based on Twitter Bootstrap. It provides a CSS Theme which is designed to resemble Bootstrap's default theme. This is what the kendo.boostrap.min.css file is. You need to include it after kendo.common.min.css:

  <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.bootstrap.min.css" rel="stylesheet" />

Here is a live demo: http://jsbin.com/uwuJUfE/1/edit

Solution 3

New answer - With the release of Bootstrap 4.0.0 and the Kendo UI 2018 R1 release, the answer is now yes . . . sort of. The SASS files of the special Bootstrap theme share the SASS variables that Bootstrap V4 is using. The class names are all still pure Kendo (k-*). You may need to have a commercial license. Use npm to retrieve the kendo-theme-bootstrap package. It looks like this package includes Bootstrap V4 so you may not really need to install that separately. No support for LESS.

Old Answer - The ONLY part of Bootstrap that Telerik has attempted to implement/coexist with is the Twitter Bootstrap responsive "Grid" layout. That's not to be confused with the Kendo Grid widget. Buried somewhere in their blogs or docs is a comment to the effect that Kendo does not do layout so they have accommodated the Bootstrap layout. There is no support for any of the Bootstrap widgets or CSS classes. The Kendo Bootstrap theme does look similar to Bootstrap but doesn't use any part of Bootstrap i.e. if you restyle your Bootstrap button, you'll have to figure out how to duplicate the change in the Kendo theme too. IMHO their claims of support for Bootstrap was more of a marketing ploy than implementation of any substance. That said, Kendo does have similar alternatives most of the Bootstrap components. I've gone with total Kendo because it's simpler than trying to get them to work together.