Migrating to v3

Material Style 3 is a major rewrite of the entire project. The most notable changes are summarized below.

Follows Bootstrap v5 migration guide.

Utilities

Colors

• Breaking To avoid increased file sizes, v3 uses only a subset of the v2 color palette. It uses Bootstrap’s default theme colors + pink, purple, indigo, teal, orange, white & black.
• Breaking Color shades (Example: red-50, blue-500, pink-a100) have been removed to reduce file size.

Ripple

• v3 uses the official Material Design Ripple package @material/ripple for the ripple effects.
• Breaking Unlike v2, where the ripple effect is directly applied to components, in v3, we need to add an element <span class="ripple-surface"></span> to the desired component like a Button and activate the effect on the ripple-surface.

Shadows

• Breaking Classes raised-*dp have been renamed to shadow-*dp
• Breaking Class unelevated has been replaced with shadow-none

Components

Buttons

• Breaking Classes btn-text-[color] have been dropped. btn-outline-[color] border-0 can be used for Text Buttons.
• Breaking File inputs now use Bootstrap’s default styling. Classes m-file-input and btn-file have been dropped.

Floating Action Buttons

Breaking Class extended-fab has been dropped. rounded-pill can be used.

Cards

• Breaking Classes card-outline-[color] have been dropped. border border-[color] can be used for Cards with border.
• Breaking Classes card-actions, card-buttons & card-icons have been dropped as well.

Drawer / Sidebar

Breaking v3 uses Bootstrap 5’s Offcanvas component for Drawers.

Progress bars

• Breaking Class m-progress has been renamed to progress-bar-indeterminate.
• Breaking Class m-rainbow has been renamed to progress-bar-rainbow.

Spinners

• Breaking Class m-spinner has been renamed to spinner-material.
• Breaking Classes spinner-[color] have been dropped. text-[color] can be used for colored spinners.

Forms

Text Fields

• Breaking v3 uses Bootstrap 5’s .form-floating for Text and Select fields.
• Introduced .form-floating-with-icon to support icons and spinners on Text and Select fields.
• Breaking Classes m-text-field, m-text-field-outline, static-label & floating-label have been removed.
• Breaking Color class primary-[color] has been replaced with base-[color].
• Breaking Color class accent-[color] has been replaced with primary-[color].

Select Fields

• Breaking v3 uses Bootstrap’s dropdown component for the Select options.
• Breaking v3 uses Bootstrap 5’s .form-floating for Text and Select fields.
• Introduced .form-floating-with-icon to support icons and spinners on Text and Select fields.
• Breaking Classes m-select, m-select-outline, static-label & floating-label have been removed.
• Breaking Color class primary-[color] has been replaced with base-[color].
• Breaking Color class accent-[color] has been replaced with primary-[color].

Input groups

v3 supports .input-group on Text and Select fields.

Form validation

v3 supports form validation.

Checkbox, Radio & Switch

Breaking Color classes input-[color] have been dropped.