Bootstrap Theme Overview

The Kendo UI Bootstrap theme is available through the @progress/kendo-theme-bootstrap NPM module.

Installation

  1. Download and install the package of the Bootstrap theme.

    npm install --save @progress/kendo-theme-bootstrap
  2. Import the CSS file from the package.

    import '@progress/kendo-theme-bootstrap/dist/all.css';
  3. Apply the Bootstrap theme options according to the instructions in the article on styling.

    If you include the Bootstrap framework from its source, you have to add kendo-theme-bootstrap and any variable customizations before you import the Bootstrap framework.

    // Set the variables here.
    
     @import "~@progress/kendo-theme-bootstrap/scss/all";
     @import "~bootstrap/scss/bootstrap";

Preview

To apply the Bootstrap theme to any of the examples on this website, use the theme chooser drop-down at the top-right corner of the page. The Material theme styling is loaded by default.

To simultaneously preview multiple components from different packages, to build your own theme, or to customize any of the available Kendo UI ones, use the capabilities of the Kendo UI Theme Builder web application.

In this article