# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Metronicfully utilizes the Bootstrap Utility API in `src/sass/components/_utilities.scss`to generate additional utility classes to cover its own design system. The customized utility SASS variables are defined in `src/sass/components/_variables.scss`and in `src/sass/components/_variables.custom.scss`you can override any variable for your needs.

# Theme Colors

Metronic extends Bootstrap Colors system with extra variants to cover its own design system build on top of the Boostrap Standards. The extended theme color SASS variables are defined in `src/sass/components/_variables.scss`:

    // Theme colors
    $theme-colors: (
        "white":      $white,  // custom color type
        "primary":    $primary,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $warning,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
    ) !default;

    // Active and hover states colors
    $theme-active-colors: (
        "white":      $white-active,   // custom color type
        "primary":    $primary-active,
        "secondary":  $secondary-active,
        "success":    $success-active,
        "info":       $info-active,
        "warning":    $warning-active,
        "danger":     $danger-active,
        "light":      $light-active,
        "dark":       $dark-active
    ) !default;  // Custom variable

    // Inverse colors
    $theme-inverse-colors: (
        "white":      $white-inverse,
        "primary":    $primary-inverse,
        "secondary":  $secondary-inverse,
        "success":    $success-inverse,
        "info":       $info-inverse,
        "warning":    $warning-inverse,
        "danger":     $danger-inverse,
        "light":      $light-inverse,
        "dark":       $dark-inverse
    ) !default;  // Custom variable

    // Light colors
    $theme-light-colors: (
        "white":      $white-light,
        "primary":    $primary-light,
        "secondary":  $secondary-light,
        "success":    $success-light,
        "info":       $info-light,
        "warning":    $warning-light,
        "danger":     $danger-light,
        "light":      $light-light,
        "dark":       $dark-light
    ) !default;  // Custom variable

    // Text colors
    $theme-text-colors: (
        "white":      $white,
        "primary":    $primary,
        "secondary":  $dark,
        "success":    $success,
        "info":       $info,
        "warning":    $warning,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark,
        "muted":      $text-muted,
        "gray-100":   $gray-100,
        "gray-200":   $gray-200,
        "gray-300":   $gray-300,
        "gray-400":   $gray-400,
        "gray-500":   $gray-500,
        "gray-600":   $gray-600,
        "gray-700":   $gray-700,
        "gray-800":   $gray-800,
        "gray-900":   $gray-900
    ) !default;  // Custom variable

Custom variables that used to customize Bootstrap components are marked with `Custom variable`comment in `_variables.scss` file.

# Spacing

Metronic extends Bootstrap Spacing Classes to provide additonal spacing options by overidding the default spacing SASS variable as shown below:

    $spacers: (
        0: 0,
        1: ($spacer * .25),
        2: ($spacer * .5),
        3: ($spacer * .75),
        4: ($spacer * 1),
        5: ($spacer * 1.25),
        6: ($spacer * 1.5),
        7: ($spacer * 1.75),
        8: ($spacer * 2),
        9: ($spacer * 2.25),
        10: ($spacer * 2.5),
        11: ($spacer * 2.75),
        12: ($spacer * 3),
        13: ($spacer * 3.25),
        14: ($spacer * 3.5),
        15: ($spacer * 3.75),
        16: ($spacer * 4),
        17: ($spacer * 4.25),
        18: ($spacer * 4.5),
        19: ($spacer * 4.75),
        20: ($spacer * 5)
    );

# Font Sizes

Metronic extends Bootstrap Font Size Classes to provide additonal sizing options by overidding the default font size SASS variable as shown below:

    $font-sizes: (
        1: $h1-font-size,   // 22.75px
        2: $h2-font-size,   // 19.50px
        3: $h3-font-size,   // 17.55px
        4: $h4-font-size,   // 16.25px
        5: $h5-font-size,   // 14.95px
        6: $h6-font-size,   // 13.95px

        7: $font-size-base * 0.95,  // 12.35px
        8: $font-size-base * 0.85,  // 11.05px
        9: $font-size-base * 0.75,  // 9.75px
        10: $font-size-base * 0.5,  // 6.50px

        base: $font-size-base, // 13px
        fluid: 100%, // 100%

        2x: $font-size-base * 2,        // 26px
        2qx: $font-size-base * 2.25,    // 29.25px
        2hx: $font-size-base * 2.5,     // 32.5px
        2tx: $font-size-base * 2.75,    // 35.75px

        3x: $font-size-base * 3,        // 39px
        3qx: $font-size-base * 3.25,    // 42.25px
        3hx: $font-size-base * 3.5,     // 45.5px
        3tx: $font-size-base * 3.75,    // 48.75px

        4x: $font-size-base * 4,        // 52px
        4qx: $font-size-base * 4.25,    // 55.25px
        4hx: $font-size-base * 4.5,     // 58.5px
        4tx: $font-size-base * 4.75,    // 61.75px

        5x: $font-size-base * 5,        // 65px
        5qx: $font-size-base * 5.25,    // 68.25px
        5hx: $font-size-base * 5.5,     // 71.5px
        5tx: $font-size-base * 5.75     // 74.75px
    ) !default;

# Line Height

Metronic extends Bootstrap Line Height Classes to provide additonal line height options by overidding the line height SASS variable.
Use `.lh-{value}`class to set an element's line height where `value`is one of:

- `1`- for classes that set line height to `1`
- `sm`- for classes that set line height to `1.25`
- `base`- for classes that set line height to `1.5`
- `lg`- for classes that set line height to `1.75`
- `xl`- for classes that set line height to `2`
- `xxl`- for classes that set line height to `2.25`

Example text
for `.lh-1`
Example text
for `.lh-sm`
Example text
for `.lh-base`
Example text
for `.lh-lg`
Example text
for `.lh-xl`
Example text
for `.lh-xxl`

    <div class="lh-1">Example text for .lh-1</div>
    <div class="lh-sm">Example text for .lh-sm</div>
    <div class="lh-base">Example text for .lh-base</div>
    <div class="lh-lg">Example text for .lh-lg</div>
    <div class="lh-xl">Example text for .lh-xl</div>
    <div class="lh-xxl">Example text for .lh-xxl</div>

# Letter Spacing

Use `.ls-{value}`class to set an element's letter spacing where `value`is one of:

- `1`- for classes that set letter spacing to `0.1rem`
- `2`- for classes that set letter spacing to `0.115rem`
- `3`- for classes that set letter spacing to `0.125rem`
- `4`- for classes that set letter spacing to `0.25rem`
- `5`- for classes that set letter spacing to `0.5rem`
- `n1`- for classes that set letter spacing to `-0.1rem`
- `n2`- for classes that set letter spacing to `-0.115rem`
- `n3`- for classes that set letter spacing to `-0.125rem`
- `n4`- for classes that set letter spacing to `-0.25rem`
- `n5`- for classes that set letter spacing to `-0.5rem`

Example text for `.ls-1`
Example text for `.ls-2`
Example text for `.ls-3`
Example text for `.ls-4`
Example text for `.ls-5`
Example text for `.ls-n1`
Example text for `.ls-n2`
Example text for `.ls-n3`
Example text for `.ls-n4`
Example text for `.ls-n5`

    <div class="ls-1">Example text for .ls-1</div>
    <div class="ls-2">Example text for .ls-2</div>
    <div class="ls-3">Example text for .ls-3</div>
    <div class="ls-4">Example text for .ls-4</div>
    <div class="ls-5">Example text for .ls-5</div>
    <div class="ls-n1">Example text for .ls-n1</div>
    <div class="ls-n2">Example text for .ls-n2</div>
    <div class="ls-n3">Example text for .ls-n3</div>
    <div class="ls-n4">Example text for .ls-n4</div>
    <div class="ls-n5">Example text for .ls-n5</div>

# Width & Height

Assign responsive-friendly `height`, `min-height`, `max-height`, `width`, `min-with`and `max-width`values to an element with shorthand classes. The classes are named using the format `{property}-{size}`for `xs`and `{property}-{breakpoint}-{size}`for `sm`, `md`, `lg`, `xl`, and `xxl`.
Where `property`is one of:

- `h`- for classes that set height
- `mh`- for classes that set max height
- `min-h`- for classes that set min height
- `w`- for classes that set width
- `mw`- for classes that set max width
- `min-w`- for classes that set min width

Where `size`defined with `$custom-sizes`variable in `sass/_variables.scss`is one of-

- `25`- for 25%
- `50`- for 50%
- `75`- for 75%
- `100`- for 100%
- `auto`- for auto
- `1px`
- `2px`
- `3px`
- `4px`
- `5px`
- `6px`
- `7px`
- `8px`
- `9px`
- `10px`
- `15px`
- `20px`
- `25px`
- `30px`
- `35px`
- `40px`
- `45px`
- `50px`
- `55px`
- `60px`
- `65px`
- `70px`
- `75px`
- `80px`
- `85px`
- `90px`
- `95px`
- `100px`
- `125px`
- `150px`
- `175px`
- `200px`
- `225px`
- `250px`
- `275px`
- `300px`
- `325px`
- `350px`
- `375px`
- `400px`
- `425px`
- `450px`
- `475px`
- `500px`
- `550px`
- `600px`
- `650px`
- `700px`
- `750px`
- `800px`
- `850px`
- `900px`
- `950px`
- `1000px`

w-100px
h-100px
w-150px
h-150px
w-200px
h-200px
w-250px
h-250px
min-w-100px
min-h-100px
mw-100px
mh-100px
min-w-150px
min-h-150px
mw-150px
mh-150px
min-w-200px
min-h-200px
mw-200px
mh-200px
min-w-250px
min-h-250px
mw-250px
mh-250px

    <div class="w-100px h-100px"></div>
    <div class="w-150px h-150px"></div>
    <div class="w-200px h-200px"></div>
    <div class="w-250px h-250px"></div>
    <div class="min-w-100px min-h-100px mw-100px mh-100px"></div>
    <div class="min-w-150px min-h-150px mw-150px mh-150px"></div>
    <div class="min-w-200px min-h-200px mw-200px mh-200px"></div>
    <div class="min-w-250px min-h-250px mw-250px mh-250px"></div>

# Z-Index

Use `.z-index-{value}`class to set an element's z-index:
Where `value`is one of:

- `n1`- for classes that set z-index `n1`
- `n2`- for classes that set z-index `n2`
- `0`- for classes that set z-index `0`
- `1`- for classes that set z-index `1`
- `2`- for classes that set z-index `2`
- `3`- for classes that set z-index `3`

    <div class="z-index-n1"></div>
    <div class="z-index-n2"></div>
    <div class="z-index-0"></div>
    <div class="z-index-1"></div>
    <div class="z-index-2"></div>
    <div class="z-index-3"></div>

# Access CSS variables in Javascript

There are a variety Bootstrap CSS variables available. To access these variables in Javascript(Charts, etc), we have provided a simple Javascript function to grab it through CSS variables easily and quickly. Here's the list of CSS variables available for you:

- `--bs-light-primary`- Light version of primary color hex value.
- `--bs-active-primary`- Active version of primary color hex value.
- `--bs-light-success`- Light version of success color hex value.
- `--bs-active-success`- Active version of success color hex value.
- `--bs-light-info`- Light version of info color hex value.
- `--bs-active-info`- Active version of info color hex value.
- `--bs-light-warning`- Light version of warning color hex value.
- `--bs-active-warning`- Active version of warning color hex value.
- `--bs-light-danger`- Light version of danger color hex value.
- `--bs-active-danger`- Active version of danger color hex value.
- `--bs-light-dark`- Light version of dark color hex value.
- `--bs-active-dark`- Active version of dark color hex value.
- `--bs-gray-100`- Gray 100 color hex value.
- `--bs-gray-200`- Gray 200 color hex value.
- `--bs-gray-300`- Gray 300 color hex value.
- `--bs-gray-400`- Gray 400 color hex value.
- `--bs-gray-500`- Gray 500 color hex value.
- `--bs-gray-600`- Gray 600 color hex value.
- `--bs-gray-700`- Gray 700 color hex value.
- `--bs-gray-800`- Gray 800 color hex value.
- `--bs-gray-900`- Gray 900 color hex value.
- `--bs-xs`- Extra small breakpoint width value - 0.
- `--bs-sm`- Extra small breakpoint width value - 576px.
- `--bs-md`- Medium small breakpoint width value - 768px.
- `--bs-lg`- Large small breakpoint width value - 992px.
- `--bs-xl`- Extra large small breakpoint width value - 1200px.
- `--bs-xxl`- Double extra large breakpoint width value - 1400px.
- `--bs-font-sans-serif`- Main font family. E.g: `"Roboto", sans-serif`.

To access these variables, simply call it with this function `KTUtil.getCssVariableValue('css variable name')`.
For example to access the primary color, CSS responsive breakpoint value or the theme font family you can use the below code:

    var primaryColor = KTUtil.getCssVariableValue("--bs-primary");
    var breakpointLg = KTUtil.getCssVariableValue("--bs-lg");
    var fontFamily = KTUtil.getCssVariableValue("--bs-font-sans-serif");

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now