Bootstrap

Customization of the Bootstrap Theme

The Telerik and Kendo UI Bootstrap theme is a versatile theme that you can tailor to match your application design. The theme utilizes numerous variables that allow you to customize and fit the theme to your specific needs.

After installing the Telerik and Kendo UI Bootstrap theme, you can customize the theme variables directly in your application. For example, you can change the base background of the Button with the following lines:

// Use the theme with the modified base background of the Button.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as * with (
  $kendo-button-bg: #ff69b4
);

You can also customize individual components by overriding their variables:

// Use the theme with the modified component variables.
@use '@progress/kendo-theme-bootstrap/scss/index.scss' as * with (
  $kendo-button-bg: #ff69b4,
  $kendo-panelbar-bg: #1bb822
);

// Include only Button and PanelBar styles.
@include kendo-button--styles();
@include kendo-panelbar--styles();

Color

To learn how the Telerik and Kendo UI Bootstrap theme implements colors through its color system, see the Color Overview article. Each color variable in the theme belongs to a variable group that has a predefined meaning and purpose.

To customize the color system in the Telerik and Kendo UI Bootstrap theme, use either of the options below:

• Use the predefined color variables.
• Modify the color CSS variables.
• Modify the color Sass variables.

Predefined Color Variables

You can use the $kendo-colors map as is or customize it to fit your specific design needs. The predefined values in the Bootstrap theme are based on the Bootstrap Design color palette and are available in the $kendo-colors Sass map.

To use the predefined values, the recommended approach is to utilize the k-color() function, which takes a color name from the $kendo-colors map as a parameter and returns a CSS variable (custom property) with the actual color as a fallback:

// Import the Bootstrap theme.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as *;

.my-element {
  background-color: k-color(primary); // Apply the primary color as a background color to .my-element.
}

The k-color() function utilized above returns the following CSS code:

.my-element {
  background-color: var(--kendo-color-primary, #ff6358);
}

Color CSS Variables

Another way to customize the color system of the Bootstrap theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level:

:root {
  --kendo-color-primary-subtle: #ffeceb;
  --kendo-color-primary-subtle-hover: #ffdedb;
  --kendo-color-primary-subtle-active: #ffc8c4;
  --kendo-color-primary: #ff6358;
  --kendo-color-primary-hover: #ea5a51;
  --kendo-color-primary-active: #d45349;
  --kendo-color-primary-emphasis: #ff9d97;
  --kendo-color-primary-on-subtle: #5c201c;
  --kendo-color-on-primary: #ffffff;
  --kendo-color-primary-on-surface: #ff6358;
  // Configure more swatch colors
  // ...
}

Using the CSS variables allows for greater flexibility and easier customization when applying colors to various elements. For example, here is how you can apply these custom properties in your code:

.my-element {
  background-color: var(--kendo-color-primary); // Apply the primary color to .my-element.
}

Color Sass Variables

You can modify either all values in the $kendo-colors Sass map or only those that belong to a specific variable group, for example, main and primary:

// Use the theme with the modified $kendo-colors map.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as * with (
  $kendo-colors: (
    app-surface: #f8f8f8,
    on-app-surface: #111111,
    primary-subtle: #ffeceb,
    primary-subtle-hover: #ffdedb,
    primary-subtle-active: #ffc8c4,
    primary: #ff6358,
    primary-hover: #ea5a51,
    primary-active: #d45349,
    primary-emphasis: #ff9d97,
    primary-on-subtle: #5c201c,
    on-primary: #ffffff,
    primary-on-surface: #ff6358
  )
);

To speed up the color customization process, you can use the k-generate-color-variations(name, color, theme) function that is part of the @progress/kendo-theme-core package. The function will generate all needed shades of a given color by lightening or darkening it. Providing values for all shades of a given color is required because the Telerik and Kendo UI Color System is based on variable groups, which need a value for each variable in the variable group where the customized color belongs.

The k-generate-color-variations() function accepts three parameters:

• name—the name of the variable group for which you need to generate colors. This is a string value.
• color—the color value. The color can be a HEX or RBGA value.
• theme—the name of the theme for which you need to generate colors. For example bootstrap.

For example, this is how the main, primary and secondary variable groups are customized using the function:

@use 'sass:map';
@use '@progress/kendo-theme-bootstrap/scss/index.scss' as *;

$kendo-colors: map.merge(
  $kendo-colors,
  (
    app-surface: #f8f8f8,
    on-app-surface: #111111
  )
);
// Use the 'k-generate-color-variations' function to generate
// all shades of the 'primary', 'secondary' and the 'base' color.
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations("primary", #9c27b0, "bootstrap"));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations("secondary", #e51a5f, "bootstrap"));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations("base", #eaeaea, "bootstrap"));

@include kendo-theme--styles();

Spacing

To learn how the Telerik and Kendo UI Bootstrap theme implements spacing see the Spacing Overview article.

To customize the spacing system in the Telerik and Kendo UI Bootstrap theme, use either of the following approaches:

• Use the predefined spacing variables.
• Modify the spacing CSS variables.
• Modify the spacing Sass variables.

Predefined Spacing Variables

You can use the $kendo-spacing map as is or customize it to fit your specific design needs. The predefined spacing values in the Bootstrap theme are available in the $kendo-spacing Sass map.

To use the predefined values, the recommended approach is to utilize the k-spacing() function, which takes a spacing step from the $kendo-spacing map as a parameter and returns a CSS variable (custom property) with the actual spacing as a fallback:

// Import the Bootstrap theme.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as *;

.my-element {
  padding: k-spacing(4); // Apply level 4 spacing to .my-element.
}

The k-spacing() function utilized above returns the following CSS code:

.my-element {
  padding: var(--kendo-spacing-4, 1rem);
}

Spacing CSS Variables

Another way to customize the spacing system of the Bootstrap theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level:

:root {
  --kendo-spacing-2: 6px;
  --kendo-spacing-4: 8px;
  // Configure more spacing steps
}

Spacing SASS Variables

You can modify either all values in the $kendo-spacing Sass map or only specific spacing steps, for example, level 6:

// Use the theme with the modified $kendo-spacing map.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as * with (
  $kendo-spacing: (
    2: 8px,
    6: 12px
  )
);

Typography

To learn how the Telerik and Kendo UI Bootstrap theme implements typography see the Typography Overview article.

By defaults, the Bootstrap theme does not enable the typography system. To enable it, set the .k-body class to the page <body> element. This class is required for the typography system to work properly on the document level and apply the predefined typography values to the page:

<body class="k-body">
  <!-- Your content here -->
</body>

In addition, you need to enable the typography system when using the theme:

// Use the theme with the enabled typography system.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as * with (
  $kendo-enable-typography: true
);

After enabling the typography system, you can use the predefined typography values in the Bootstrap theme which are available in the the $kendo-font-families, $kendo-font-sizes, $kendo-line-heights and $kendo-font-weights sass maps. You can use them as is or customize them to fit your specific design needs.

Border Radius

To learn how the Telerik and Kendo UI Bootstrap theme implements border radii see the Border Radius Overview article.

To customize the border radii system in the Telerik and Kendo UI Bootstrap theme, use either of the following approaches:

• Use the predefined border radii variables.
• Modify the border radii CSS variables.
• Modify the border radii Sass variables.

Predefined Border Radii Variables

You can use the $kendo-border-radii map as is or customize it to fit your specific design needs. The predefined border radii values in the Bootstrap theme are available in the $kendo-border-radii Sass map.

To use the predefined values, the recommended approach is to utilize the k-border-radius() function, which takes a spacing step from the $kendo-border-radii map as a parameter and returns a CSS variable (custom property) with the actual spacing as a fallback:

// Import the Bootstrap theme.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as *;

.my-element {
  border-radius: k-border-radius(md); // Apply md border radius to .my-element.
}

The k-border-radius() function utilized above returns the following CSS code:

.my-element {
  border-radius: var(--kendo-border-radius-md, 0.25rem);
}

Border Radii CSS Variables

Another way to customize the spacing system of the Bootstrap theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level:

:root {
  --kendo-border-radius-md: 0.5rem;
  // Configure more border radii steps
}

Border Radii SASS Variables

You can modify either all values in the $kendo-border-radii Sass map or only specific border radii steps, for example:

// Use the theme with the modified $kendo-border-radii map.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as * with (
  $kendo-border-radii: (
    md: 0.5rem,
    lg: 1rem
  )
);

Elevation

To learn how the Telerik and Kendo UI Bootstrap theme implements elevation see the Elevation Overview article.

To customize the elevation system in the Telerik and Kendo UI Bootstrap theme, use either of the following approaches:

• Use the predefined elevation variables.
• Modify the elevation CSS variables.
• Modify the elevation Sass variables.

Predefined Elevation Variables

You can use the $kendo-elevation map as is or customize it to fit your specific design needs. The predefined elevation values in the Bootstrap theme are available in the $kendo-elevation Sass map.

To use the predefined values, the recommended approach is to utilize the k-elevation() function, which takes an elevation step from the $kendo-elevation map as a parameter and returns a CSS variable (custom property) with the actual elevation as a fallback:

// Import the Bootstrap theme.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as *;

.my-element {
  box-shadow: k-elevation(3); // Apply default level 3 shadow to .my-element.
}

The k-elevation() function utilized above returns the following CSS code:

.my-element {
  box-shadow: var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12));
}

Elevation CSS Variables

Another way to customize the elevation system of the Bootstrap theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level:

:root {
  --kendo-elevation-1: 0px 14px 20px rgba(0, 0, 0, 0.2);
  --kendo-elevation-2: 0px 11px 48px rgba(0, 0, 0, 0.12);
  // Configure more elevation levels
}

Elevation SASS Variables

You can modify either all values in the $kendo-elevation Sass map or only specific elevation levels, for example, level 6:

// Use the theme with the modified $kendo-elevation map.
@use '@progress/kendo-theme-bootstrap/scss/all.scss' as * with (
  $kendo-elevation: (
    6: (
      0px 5px 7px 0px rgba(0, 0, 0, 0.2),
      0px 3px 14px 0px rgba(0, 0, 0, 0.12),
      0px 8px 10px 0px rgba(0, 0, 0, 0.14)
    )
  )
);