Bootstrap Theme

Apply the perfect look and feel to your apps with the styles supported by the Telerik and Kendo UI Bootstrap theme.

Variables

The Telerik and Kendo UI Bootstrap theme employs multiple variables that you can use to customize the theme.

Variables by Scope

When it comes to the effect that a specific change in a variable's value causes, variables are not equal. Changing some values will have a much wider impact on the theme than changing others.

Depending on the extent of the styles that each variable controls, the variables fall into three main groups:

  • Global variables—They control globally used theme colors and metrics like $kendo-colors$kendo-spacing, $kendo-border-radii$kendo-elevation.
  • Variables affecting individual UI components—For example, $kendo-grid-bg$kendo-tabstrip-font-size.

Most component-level variables link to generic variables that are higher in the hierarchy. For instance, you can customize the background of the Grid component both through the $kendo-colors map and the $kendo-grid-bg variables. In this case, consider that the $kendo-grid-bg variable references a value from the $kendo-colors map.

List of Variables

The following tables represent the variables in the Telerik and Kendo UI Bootstrap theme by the type of styles that they control.

Color Variables

The following table represents the $kendo-colors Sass map of the Telerik and Kendo UI Bootstrap theme:

KeyValue
Variable: kendo-colors
app-surface #ffffff
on-app-surface #212529
subtle #596169
surface #f8f9fa
surface-alt #ffffff
border rgba(33, 37, 41, 0.13)
border-alt rgba(33, 37, 41, 0.2)
base-subtle #e9ecef
base-subtle-hover #dee2e6
base-subtle-active #ced4da
base #dee2e6
base-hover #ced4da
base-active #bdc4cb
base-emphasis rgba(33, 37, 41, 0.34)
base-on-subtle #212529
on-base #212529
base-on-surface #212529
primary-subtle #cfe2ff
primary-subtle-hover #b6d4fe
primary-subtle-active #9ec5fe
primary #0d6efd
primary-hover #0c64e4
primary-active #0a58ca
primary-emphasis rgba(13, 110, 253, 0.4)
primary-on-subtle #052c65
on-primary #ffffff
primary-on-surface #0d6efd
secondary-subtle #dee2e6
secondary-subtle-hover #ced4da
secondary-subtle-active #bdc4cb
secondary #6c757d
secondary-hover #596169
secondary-active #495057
secondary-emphasis rgba(108, 117, 125, 0.4)
secondary-on-subtle #2B2F32
on-secondary #ffffff
secondary-on-surface #6c757d
tertiary-subtle #e2d9f3
tertiary-subtle-hover #d3c5ec
tertiary-subtle-active #c5b3e6
tertiary #6f42c1
tertiary-hover #59359a
tertiary-active #4e2f89
tertiary-emphasis rgba(111, 66, 193, 0.4)
tertiary-on-subtle #432874
on-tertiary #ffffff
tertiary-on-surface #6f42c1
info-subtle #cff4fc
info-subtle-hover #b7eefa
info-subtle-active #9eeaf9
info #0dcaf0
info-hover #3dd5f3
info-active #6edff6
info-emphasis rgba(13, 202, 240, 0.4)
info-on-subtle #055160
on-info #000000
info-on-surface #0dcaf0
success-subtle #d1e7dd
success-subtle-hover #badbcc
success-subtle-active #a3cfbb
success #198754
success-hover #146C43
success-active #0F5132
success-emphasis rgba(25, 135, 84, 0.4)
success-on-subtle #0A3622
on-success #ffffff
success-on-surface #198754
warning-subtle #fff3cd
warning-subtle-hover #ffecb5
warning-subtle-active #ffe69c
warning #ffc107
warning-hover #ffcd39
warning-active #ffda6a
warning-emphasis rgba(255, 193, 7, 0.4)
warning-on-subtle #664d03
on-warning #000000
warning-on-surface #ffc107
error-subtle #f8d7da
error-subtle-hover #f5c2c7
error-subtle-active #f1aeb5
error #dc3545
error-hover #b02a37
error-active #9a2530
error-emphasis rgba(220, 53, 69, 0.4)
error-on-subtle #58151c
on-error #ffffff
error-on-surface #dc3545
light-subtle #ffffff
light-subtle-hover #f8f9fa
light-subtle-active #e9ecef
light #f8f9fa
light-hover #e9ecef
light-active #dee2e6
light-emphasis rgba(33, 37, 41, 0.1)
light-on-subtle #495057
on-light #000000
light-on-surface #f8f9fa
dark-subtle #495057
dark-subtle-hover #596169
dark-subtle-active #6c757d
dark #212529
dark-hover #343a40
dark-active #495057
dark-emphasis rgba(33, 37, 41, 0.4)
dark-on-subtle #ffffff
on-dark #ffffff
dark-on-surface #212529
inverse-subtle #495057
inverse-subtle-hover #596169
inverse-subtle-active #6c757d
inverse #212529
inverse-hover #343a40
inverse-active #495057
inverse-emphasis rgba(33, 37, 41, 0.4)
inverse-on-subtle #ffffff
on-inverse #ffffff
inverse-on-surface #212529
series-a #0c64e4
series-a-bold #084298
series-a-bolder #052c65
series-a-subtle #3d8bfd
series-a-subtler #86b6fe
series-b #6f42c1
series-b-bold #4e2f89
series-b-bolder #36215f
series-b-subtle #8c68cd
series-b-subtler #b9a3e1
series-c #20c997
series-c-bold #13795b
series-c-bolder #0d503c
series-c-subtle #79dfc1
series-c-subtler #c1f0e2
series-d #198754
series-d-bold #0F5132
series-d-bolder #0A3622
series-d-subtle #479F76
series-d-subtler #8cc3aa
series-e #dc3545
series-e-bold #9a2530
series-e-bolder #6e1b23
series-e-subtle #e35d6a
series-e-subtler #f1aeb5
series-f #ffc107
series-f-bold #b38705
series-f-bolder #806104
series-f-subtle #ffcd39
series-f-subtler #ffe083
Description: The global default Colors map.

Spacing Variables

The following table represents the $kendo-spacing Sass map of the Telerik and Kendo UI Bootstrap theme:

StepValueExample
00px
1px1px
0.50.125rem
10.25rem
1.50.375rem
20.5rem
2.50.625rem
30.75rem
3.50.875rem
41rem
4.51.125rem
51.25rem
5.51.375rem
61.5rem
6.51.625rem
71.75rem
7.51.875rem
82rem
92.25rem
102.5rem
112.75rem
123rem
133.25rem
143.5rem
153.75rem
164rem
174.25rem
184.5rem
194.75rem
205rem
215.25rem
225.5rem
235.75rem
246rem
257rem
268rem
279rem
2810rem
2911rem
3012rem

Typography Variables

The following table represents the typography Sass variables of the Telerik and Kendo UI Bootstrap theme:

VariableDefault ValueComputed ValueValue
kendo-font-size$font-size-base1remDefault: $font-size-baseComputed: 1rem
Description: The base font size across all components.
kendo-font-size-xs( $kendo-font-size * .75 )0.75remDefault: ( $kendo-font-size * .75 )Computed: 0.75rem
Description: The extra small font size across all components.
kendo-font-size-sm$font-size-sm0.875remDefault: $font-size-smComputed: 0.875rem
Description: The small font size across all components.
kendo-font-size-md$kendo-font-size1remDefault: $kendo-font-sizeComputed: 1rem
Description: The medium font size across all components.
kendo-font-size-lg$font-size-lg1.25remDefault: $font-size-lgComputed: 1.25rem
Description: The large font size across all components.
kendo-font-size-xl( $kendo-font-size-md * 1.5 )1.5remDefault: ( $kendo-font-size-md * 1.5 )Computed: 1.5rem
Description: The extra large font size across all components.
kendo-line-height$line-height-base1.5Default: $line-height-baseComputed: 1.5
Description: The base line height across all components.
kendo-line-height-xs11Default: 1Computed: 1
Description: The extra small line height across all components.
kendo-line-height-sm$line-height-sm1.25Default: $line-height-smComputed: 1.25
Description: The small line height across all components.
kendo-line-height-md$kendo-line-height1.5Default: $kendo-line-heightComputed: 1.5
Description: The medium line height across all components.
kendo-line-height-lg$line-height-lg2Default: $line-height-lgComputed: 2
Description: The large line height across all components.
kendo-line-height-emcalc( #{$kendo-line-height} * 1em )calc(1.5 * 1em)Default: calc( #{$kendo-line-height} * 1em )Computed: calc(1.5 * 1em)
Description: The base line height in ems across all components.
kendo-font-weight-light$font-weight-light300Default: $font-weight-lightComputed: 300
Description: The light font weight across all components.
kendo-font-weight-normal$font-weight-normal400Default: $font-weight-normalComputed: 400
Description: The base font weight across all components.
kendo-font-weight-medium500500Default: 500Computed: 500
Description: The medium font weight across all components.
kendo-font-weight-semibold600600Default: 600Computed: 600
Description: The semibold font weight across all components.
kendo-font-weight-bold$font-weight-bold700Default: $font-weight-boldComputed: 700
Description: The bold font weight across all components.
kendo-font-family-sans-serif$font-family-sans-serifsystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"Default: $font-family-sans-serifComputed: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description: The sans-serif font family across all components.
kendo-font-family-monospace$font-family-monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospaceDefault: $font-family-monospaceComputed: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
Description: The monospace font family across all components.
kendo-font-family$kendo-font-family-sans-serifsystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"Default: $kendo-font-family-sans-serifComputed: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description: The base font family across all components.
kendo-font-sizes$_default-font-sizes(xs: 0.75rem, sm: 0.875rem, md: 1rem, lg: 1.25rem, xl: 1.5rem)Default: $_default-font-sizesComputed: (xs: 0.75rem, sm: 0.875rem, md: 1rem, lg: 1.25rem, xl: 1.5rem)
Description: The font sizes map
kendo-line-heights$_default-line-heights(xs: 1, sm: 1.25, md: 1.5, lg: 2)Default: $_default-line-heightsComputed: (xs: 1, sm: 1.25, md: 1.5, lg: 2)
Description: The line heights map
kendo-font-weights$_default-font-weights(light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)Default: $_default-font-weightsComputed: (light: 300, normal: 400, medium: 500, semibold: 600, bold: 700)
Description: The font weights map
kendo-font-families$_default-font-families(sans-serif: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace))Default: $_default-font-familiesComputed: (sans-serif: (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace))
Description: The font families map
kendo-h1-font-size$h1-font-size2.5remDefault: $h1-font-sizeComputed: 2.5rem
Description: The font size of the highest level heading.
kendo-h2-font-size$h2-font-size2remDefault: $h2-font-sizeComputed: 2rem
Description: The font size of the second highest level heading.
kendo-h3-font-size$h3-font-size1.75remDefault: $h3-font-sizeComputed: 1.75rem
Description: The font size of the third highest level heading.
kendo-h4-font-size$h4-font-size1.5remDefault: $h4-font-sizeComputed: 1.5rem
Description: The font size of the fourth highest level heading.
kendo-h5-font-size$h5-font-size1.25remDefault: $h5-font-sizeComputed: 1.25rem
Description: The font size of the fifth highest level heading.
kendo-h6-font-size$h6-font-size1remDefault: $h6-font-sizeComputed: 1rem
Description: The font size of the sixth highest level heading.
kendo-h1-font-family$headings-font-familynullDefault: $headings-font-familyComputed: null
Description: The font family of the highest level heading.
kendo-h2-font-family$headings-font-familynullDefault: $headings-font-familyComputed: null
Description: The font family of the second highest level heading.
kendo-h3-font-family$headings-font-familynullDefault: $headings-font-familyComputed: null
Description: The font family of the third highest level heading.
kendo-h4-font-family$headings-font-familynullDefault: $headings-font-familyComputed: null
Description: The font family of the fourth highest level heading.
kendo-h5-font-family$headings-font-familynullDefault: $headings-font-familyComputed: null
Description: The font family of the fifth highest level heading.
kendo-h6-font-family$headings-font-familynullDefault: $headings-font-familyComputed: null
Description: The font family of the sixth highest level heading.
kendo-h1-line-height$headings-line-height1.2Default: $headings-line-heightComputed: 1.2
Description: The line height of the highest level heading.
kendo-h2-line-height$headings-line-height1.2Default: $headings-line-heightComputed: 1.2
Description: The line height of the second highest level heading.
kendo-h3-line-height$headings-line-height1.2Default: $headings-line-heightComputed: 1.2
Description: The line height of the third highest level heading.
kendo-h4-line-height$headings-line-height1.2Default: $headings-line-heightComputed: 1.2
Description: The line height of the fourth highest level heading.
kendo-h5-line-height$headings-line-height1.2Default: $headings-line-heightComputed: 1.2
Description: The line height of the fifth highest level heading.
kendo-h6-line-height$headings-line-height1.2Default: $headings-line-heightComputed: 1.2
Description: The line height of the sixth highest level heading.
kendo-h1-font-weight$headings-font-weight500Default: $headings-font-weightComputed: 500
Description: The font weight of the highest level heading.
kendo-h2-font-weight$headings-font-weight500Default: $headings-font-weightComputed: 500
Description: The font weight of the second highest level heading.
kendo-h3-font-weight$headings-font-weight500Default: $headings-font-weightComputed: 500
Description: The font weight of the third highest level heading.
kendo-h4-font-weight$headings-font-weight500Default: $headings-font-weightComputed: 500
Description: The font weight of the fourth highest level heading.
kendo-h5-font-weight$headings-font-weight500Default: $headings-font-weightComputed: 500
Description: The font weight of the fifth highest level heading.
kendo-h6-font-weight$headings-font-weight500Default: $headings-font-weightComputed: 500
Description: The font weight of the sixth highest level heading.
kendo-h1-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the highest level heading.
kendo-h2-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the second highest level heading.
kendo-h3-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the third highest level heading.
kendo-h4-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the fourth highest level heading.
kendo-h5-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the fifth highest level heading.
kendo-h6-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the sixth highest level heading.
kendo-h1-margin0 0 $headings-margin-bottom0 0 0.5remDefault: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem
Description: The margin of the highest level heading.
kendo-h2-margin0 0 $headings-margin-bottom0 0 0.5remDefault: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem
Description: The margin of the second highest level heading.
kendo-h3-margin0 0 $headings-margin-bottom0 0 0.5remDefault: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem
Description: The margin of the third highest level heading.
kendo-h4-margin0 0 $headings-margin-bottom0 0 0.5remDefault: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem
Description: The margin of the fourth highest level heading.
kendo-h5-margin0 0 $headings-margin-bottom0 0 0.5remDefault: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem
Description: The margin of the fifth highest level heading.
kendo-h6-margin0 0 $headings-margin-bottom0 0 0.5remDefault: 0 0 $headings-margin-bottomComputed: 0 0 0.5rem
Description: The margin of the sixth highest level heading.
kendo-headings( h1: ( font-size: $kendo-h1-font-size, font-family: $kendo-h1-font-family, line-height: $kendo-h1-line-height, font-weight: $kendo-h1-font-weight, letter-spacing: $kendo-h1-letter-spacing, margin: $kendo-h1-margin ), h2: ( font-size: $kendo-h2-font-size, font-family: $kendo-h2-font-family, line-height: $kendo-h2-line-height, font-weight: $kendo-h2-font-weight, letter-spacing: $kendo-h2-letter-spacing, margin: $kendo-h2-margin ), h3: ( font-size: $kendo-h3-font-size, font-family: $kendo-h3-font-family, line-height: $kendo-h3-line-height, font-weight: $kendo-h3-font-weight, letter-spacing: $kendo-h3-letter-spacing, margin: $kendo-h3-margin ), h4: ( font-size: $kendo-h4-font-size, font-family: $kendo-h4-font-family, line-height: $kendo-h4-line-height, font-weight: $kendo-h4-font-weight, letter-spacing: $kendo-h4-letter-spacing, margin: $kendo-h4-margin ), h5: ( font-size: $kendo-h5-font-size, font-family: $kendo-h5-font-family, line-height: $kendo-h5-line-height, font-weight: $kendo-h5-font-weight, letter-spacing: $kendo-h5-letter-spacing, margin: $kendo-h5-margin ), h6: ( font-size: $kendo-h6-font-size, font-family: $kendo-h6-font-family, line-height: $kendo-h6-line-height, font-weight: $kendo-h6-font-weight, letter-spacing: $kendo-h6-letter-spacing, margin: $kendo-h6-margin ), )(h1: (font-size: 2.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h2: (font-size: 2rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h3: (font-size: 1.75rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h4: (font-size: 1.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h5: (font-size: 1.25rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h6: (font-size: 1rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem))Default: ( h1: ( font-size: $kendo-h1-font-size, font-family: $kendo-h1-font-family, line-height: $kendo-h1-line-height, font-weight: $kendo-h1-font-weight, letter-spacing: $kendo-h1-letter-spacing, margin: $kendo-h1-margin ), h2: ( font-size: $kendo-h2-font-size, font-family: $kendo-h2-font-family, line-height: $kendo-h2-line-height, font-weight: $kendo-h2-font-weight, letter-spacing: $kendo-h2-letter-spacing, margin: $kendo-h2-margin ), h3: ( font-size: $kendo-h3-font-size, font-family: $kendo-h3-font-family, line-height: $kendo-h3-line-height, font-weight: $kendo-h3-font-weight, letter-spacing: $kendo-h3-letter-spacing, margin: $kendo-h3-margin ), h4: ( font-size: $kendo-h4-font-size, font-family: $kendo-h4-font-family, line-height: $kendo-h4-line-height, font-weight: $kendo-h4-font-weight, letter-spacing: $kendo-h4-letter-spacing, margin: $kendo-h4-margin ), h5: ( font-size: $kendo-h5-font-size, font-family: $kendo-h5-font-family, line-height: $kendo-h5-line-height, font-weight: $kendo-h5-font-weight, letter-spacing: $kendo-h5-letter-spacing, margin: $kendo-h5-margin ), h6: ( font-size: $kendo-h6-font-size, font-family: $kendo-h6-font-family, line-height: $kendo-h6-line-height, font-weight: $kendo-h6-font-weight, letter-spacing: $kendo-h6-letter-spacing, margin: $kendo-h6-margin ), )Computed: (h1: (font-size: 2.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h2: (font-size: 2rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h3: (font-size: 1.75rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h4: (font-size: 1.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h5: (font-size: 1.25rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem), h6: (font-size: 1rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 0.5rem))
Description: The headings Map.
kendo-paragraph-margin0 0 $paragraph-margin-bottom0 0 1remDefault: 0 0 $paragraph-margin-bottomComputed: 0 0 1rem
Description: The margin of the paragraph.
kendo-paragraph-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the paragraph.
kendo-paragraph-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the paragraph.
kendo-paragraph-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the paragraph.
kendo-paragraph-font-weightvar( --kendo-font-weight-normal, normal )var(--kendo-font-weight-normal, normal)Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal)
Description: The font weight of the paragraph.
kendo-paragraph-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the paragraph.
kendo-code-font-sizevar( --kendo-font-size-sm, inherit )!defaultvar(--kendo-font-size-sm, inherit)Default: var( --kendo-font-size-sm, inherit )!defaultComputed: var(--kendo-font-size-sm, inherit)
Description: The font size of the code tag.
kendo-code-font-familyvar( --kendo-font-family-monospace, normal )var(--kendo-font-family-monospace, normal)Default: var( --kendo-font-family-monospace, normal )Computed: var(--kendo-font-family-monospace, normal)
Description: The font family of the code tag.
kendo-code-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the code tag.
kendo-code-font-weightvar( --kendo-font-weight-normal, normal )var(--kendo-font-weight-normal, normal)Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal)
Description: The font weight of the code tag.
kendo-code-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the code tag.
kendo-code-padding-xk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The horizontal padding of the code tag.
kendo-code-padding-yk-spacing(0)var(--kendo-spacing-0, 0px)Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px)
Description: The vertical padding of the code tag.
kendo-pre-padding-xk-spacing(6)var(--kendo-spacing-6, 1.5rem)Default: k-spacing(6)Computed: var(--kendo-spacing-6, 1.5rem)
Description: The horizontal padding of the preformatted text.
kendo-pre-padding-yk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The vertical padding of the preformatted text.
kendo-code-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border of the code tag.
kendo-code-bg$kendo-base-bgvar(--kendo-color-surface, #f8f9fa)Default: $kendo-base-bgComputed: var(--kendo-color-surface, #f8f9fa)
Description: The background color of the code tag.
kendo-code-text$kendo-component-textvar(--kendo-color-on-app-surface, #212529)Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #212529)
Description: The text color of the code tag.
kendo-code-border$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description: The border color of the code tag.
kendo-display1-font-sizek-map-get( $display-font-sizes, 1)5remDefault: k-map-get( $display-font-sizes, 1)Computed: 5rem
Description: The font size of the largest display text.
kendo-display2-font-sizek-map-get( $display-font-sizes, 2)4.5remDefault: k-map-get( $display-font-sizes, 2)Computed: 4.5rem
Description: The font size of the second largest display text.
kendo-display3-font-sizek-map-get( $display-font-sizes, 3)4remDefault: k-map-get( $display-font-sizes, 3)Computed: 4rem
Description: The font size of the third largest display text.
kendo-display4-font-sizek-map-get( $display-font-sizes, 4)3.5remDefault: k-map-get( $display-font-sizes, 4)Computed: 3.5rem
Description: The font size of the fourth largest display text.
kendo-display1-font-familynullnullDefault: nullComputed: null
Description: The font family of the largest display text.
kendo-display2-font-familynullnullDefault: nullComputed: null
Description: The font family of the second largest display text.
kendo-display3-font-familynullnullDefault: nullComputed: null
Description: The font family of the third largest display text.
kendo-display4-font-familynullnullDefault: nullComputed: null
Description: The font family of the fourth largest display text.
kendo-display1-line-height$display-line-height1.2Default: $display-line-heightComputed: 1.2
Description: The line height of the largest display text.
kendo-display2-line-height$display-line-height1.2Default: $display-line-heightComputed: 1.2
Description: The line height of the second largest display text.
kendo-display3-line-height$display-line-height1.2Default: $display-line-heightComputed: 1.2
Description: The line height of the third largest display text.
kendo-display4-line-height$display-line-height1.2Default: $display-line-heightComputed: 1.2
Description: The line height of the fourth largest display text.
kendo-display1-font-weight$display-font-weight300Default: $display-font-weightComputed: 300
Description: The font weight of the largest display text.
kendo-display2-font-weight$display-font-weight300Default: $display-font-weightComputed: 300
Description: The font weight of the second largest display text.
kendo-display3-font-weight$display-font-weight300Default: $display-font-weightComputed: 300
Description: The font weight of the third largest display text.
kendo-display4-font-weight$display-font-weight300Default: $display-font-weightComputed: 300
Description: The font weight of the fourth largest display text.
kendo-display1-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the largest display text.
kendo-display2-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the second largest display text.
kendo-display3-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the third largest display text.
kendo-display4-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the fourth largest display text.
kendo-font-size-xxs0.5rem0.5remDefault: 0.5remComputed: 0.5rem
Description: The extra extra small font size across all components.
kendo-font-weight400400Default: 400Computed: 400
Description: The base font weight across all components.
kendo-font-weight-thin100100Default: 100Computed: 100
Description: The thin font weight across all components.
kendo-font-weight-extra-light200200Default: 200Computed: 200
Description: The extra light font weight across all components.
kendo-font-weight-extra-bold800800Default: 800Computed: 800
Description: The extra bold font weight across all components.
kendo-font-weight-black900900Default: 900Computed: 900
Description: The most pronounced font weight across all components.
kendo-letter-spacingnullnullDefault: nullComputed: null
Description: The base letter spacing across all components.
kendo-letter-spacing-tightest-.15px-0.15pxDefault: -.15pxComputed: -0.15px
Description: The tightest letter spacing across all components.
kendo-letter-spacing-tighter-.10px-0.1pxDefault: -.10pxComputed: -0.1px
Description: Slightly looser than the tighter letter spacing across all components.
kendo-letter-spacing-tight-.5px-0.5pxDefault: -.5pxComputed: -0.5px
Description: Moderately tight letter spacing across all components.
kendo-letter-spacing-normal0px0pxDefault: 0pxComputed: 0px
Description: The normal letter spacing across all components.
kendo-letter-spacing-wide.5px0.5pxDefault: .5pxComputed: 0.5px
Description: Wide letter spacing across all components.
kendo-letter-spacing-wider.10px0.1pxDefault: .10pxComputed: 0.1px
Description: Slightly wider than the wide letter spacing across all components.
kendo-letter-spacing-widest.15px0.15pxDefault: .15pxComputed: 0.15px
Description: The widest letter spacing across all components.
kendo-font-family-sansArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansArial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansDefault: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill SansComputed: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans
Description: The sans font family across all components.
kendo-font-family-serif"Times New Roman", Georgia, Garamond, Palatino, Baskerville"Times New Roman", Georgia, Garamond, Palatino, BaskervilleDefault: "Times New Roman", Georgia, Garamond, Palatino, BaskervilleComputed: "Times New Roman", Georgia, Garamond, Palatino, Baskerville
Description: The serif font family across all components.
kendo-letter-spacingsk-map-merge( $_default-letter-spacings, $kendo-letter-spacings )(tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px)Default: k-map-merge( $_default-letter-spacings, $kendo-letter-spacings )Computed: (tightest: -0.15px, tighter: -0.1px, tight: -0.5px, normal: 0px, wide: 0.5px, wider: 0.1px, widest: 0.15px)
Description: The letter spacings map

Border Radii Variables

The following table represents the $kendo-border-radii Sass map of the Telerik and Kendo UI Bootstrap theme:

StepValueExample
none0px
xs0.125rem
sm0.25rem
md0.375rem
lg0.5rem
xl0.75rem
xxl1rem
xxxl2rem
full50rem

Elevation Variables

The following table represents the $kendo-elevation Sass map of the Telerik and Kendo UI Bootstrap theme:

KeyValue
Variable: kendo-elevation
1((0px 1px 2px rgba(0, 0, 0, 0.038),))
2((0px 2px 7px rgba(0, 0, 0, 0.075),))
3((0px 4px 10px rgba(0, 0, 0, 0.1),))
4((0px 6px 13px rgba(0, 0, 0, 0.125),))
5((0px 8px 16px 0px rgba(0, 0, 0, 0.15),))
6((0px 11px 24px 0px rgba(0, 0, 0, 0.159),))
7((0px 14px 36px 0px rgba(0, 0, 0, 0.168),))
8((0px 16px 48px 0px rgba(0, 0, 0, 0.176),))
9((0px 18px 60px 0px rgba(0, 0, 0, 0.185),))
Description: The global default Elevation map.