Twitter Bootstrap
The Kendo UI components can be used seamlessly alongside Twitter Bootstrap, as demonstrated in this live demo having its source on GitHub.
Getting Started
To replicate the look and feel of Bootstrap in Kendo UI, follow the steps below:
- Use the
kendo.common-bootstrap.min.cssinstead ofkendo.common.css. This ensures that the dimensions of Kendo UI are going to match match the ones in Bootstrap. - Use the
kendo.bootstrap.min.csstheme which applies the Bootstrap colors to the Kendo UI components.
The following example demonstrates the necessary link to these stylesheets.
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.3.0/bootstrap/bootstrap-main.css" /
While these files ensure that Kendo UI looks a lot like Bootstrap, it is not mandatory to use them. The default Kendo UI common.css and any other theme are going to style the components differently, but they will continue to function properly.
Note that the kendo.bootstrap.min.css theme styles Kendo UI to match the default Bootstrap look and feel. Other Bootstrap themes should (or can) be used with any other Kendo UI theme, or with a custom Kendo UI theme, such as themes created with the Kendo UI ThemeBuilder.
Using Bootstrap Responsive Features
Using the responsive features of Bootstrap does not differ from other responsive sites.
Using Custom Bootstrap Themes
If you have customized the Bootstrap color scheme and need Kendo UI to match it, follow the steps of any of the two options below:
Option One
- Customize the Bootstrap theme of Kendo UI through the Kendo UI ThemeBuilder.
- Compile a custom version of the Kendo UI Bootstrap theme by using the Bootstrap Less file and an auxiliary file that Kendo UI provides, which maps Bootstrap Less variables to Kendo UI variables.
This second option assumes that you are familiar with the process of generating CSS files from Less files.
Option Two
- Locate the
kendo.bootstrap.lessfile in the Kendo UI installation folder. The Less file is placed insrc/styles/web/. Check the Less Structure documentation section. -
Open the
kendo.bootstrap.lessfile and uncomment the two@importstatements at the bottom:/*@import "bootstrap-variables.less";*/ /*@import "bootstrap-mapper.less";*/ Make sure that the two files, which the above two
@importsreference, exist at the specified locations.bootstrap-variables.lessis a file that you need to take from the Bootstrap source code.bootstrap-mapper.lessexists in the same folder askendo.bootstrap.less.- Compile your custom Kendo UI Bootstrap theme and use it together with
kendo.common-bootstrap.min.css. - There is no straightforward relationship between all Bootstrap Less variables and all Kendo UI Less variables. The variable mappings inside
bootstrap-mapper.lesshave been created to achieve a decent level of compatibility and follow common sense logic. It is possible to change a specific mapping to change the logic by which the custom Kendo UI theme is generated.
For any suggestion how to improve the bootstrap-mapper.less file you are willing to share, feel free to send your pull request to the Kendo UI Core repository.
Nesting Components and Bootstrap Grid Layout
Kendo UI uses the default content-box box model (box-sizing CSS property), while Bootstrap uses the non-default border-box model and applies it to all elements on the page, including the ones that are unrelated to Bootstrap. This breaks the layout of the Kendo UI components, which are placed inside a Bootstrap grid layout, leading to the overriding of the Bootstrap CSS and reapplying the content-box box model to the components. As a result, a Bootstrap grid layout, placed inside a Kendo UI widget, is not going to work as expected. In general, the multiple-level nesting of the two products is bound to break the one that is on the inside, unless an additional CSS rule is used for each new level of nesting.
A possible easy workaround is to override the Bootstrap CSS, apply the content-box box model to all elements on the page and use a border-box box model only to the Bootstrap elements which need it. These are all .col-... classes, .row, .container, .container-fluid and form-control.
You can add the following CSS rules after the Bootstrap and Kendo UI stylesheets.
/* reset everything to the default box model */
*, :before, :after
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* set a border-box model only to elements that need it */
.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
a.dropdown-item,
.col-1, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xxl-1,
.col-2, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xxl-2,
.col-3, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xxl-3,
.col-4, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xxl-4,
.col-5, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xxl-5,
.col-6, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xxl-6,
.col-7, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xxl-7,
.col-8, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xxl-8,
.col-9, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xxl-9,
.col-10, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xxl-10,
.col-11, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xxl-11,
.col-12, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 .col-xl-12, .col-xxl-12
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Using FontAwesome Icons
You can use FontAwesome icons alongside the Kendo UI components by adjusting the font-size of the generated content, as demonstrated in the example below.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.fa.k-sprite,
.fa.k-sprite::before {
font-size: 12px;
line-height: 12px;
}
</style>
// use spriteCssClass: "fa fa-some-great-icon"
Using form-control Bootstrap CSS Class
The form-control Bootstrap CSS class is normally added to textboxes to apply borders, padding, background, and font styles. However, some Kendo UI components copy the custom CSS classes of their originating <input> elements to the widget wrapper element. This results in an incorrect padding style applied to a widget element that is not intended to have such. Also, .form-control defines a 100% width style, which the components may override. Finally, the .form-control class applies height, border and other styles that may interfere with the Kendo UI styling.
Solution One Place the Bootstrap stylesheet before the Kendo UI stylesheet, so that same-specificity Kendo UI selectors can take precedence.
Solution Two Use custom CSS to fix any other outstanding issues.
.form-control.k-widget
{
padding: 0;
width: 100%;
height: auto;
}
.form-control.k-widget:not(.k-autocomplete)
{
border-width: 0;
}
Known Limitations
- Bootstrap modal dialogs prevent access to Kendo UI popups, which are opened by components placed inside the modal dialog. In such cases, use non-modal Bootstrap dialogs or modal Kendo UI Windows.
- The latest version of the Bootstrap library introduces code in the
bootstrap.jsfile that prevents the input in elements withdata-role=filter. This causes trouble with data input in filter menu input elements.