Restyle Bootstrap with Material Style - A Material Design UI Library based on Bootstrap.
MIT License
Bot releases are hidden (Show)
Based on Bootstrap v5.3.2
Added documentation for Layout, Utilities & Helpers
Text and Select Fields now use the global border-width
& border-radius
We have created Theme builder, a tool for customizing Material Style. With this tool, you can effortlessly select your theme color, set the global border-width
, and adjust border-radius
. The tool offers real-time previews on components, making it easy to visualize your design choices. Additionally, it automatically generates CSS variables based on your theme color selection.
Published by nkdas91 over 1 year ago
Based on Bootstrap v5.3.0-alpha3
Theme colors can be customized using CSS variables. And the components are updated to use theme colors from the CSS variables. It allows for custom theming using CSS variables. Helpful for CDN users. See theming to learn more.
.base-[color]
& .primary-[color]
are depricated from Selects, Text fields & Tabs.Published by nkdas91 about 2 years ago
red-50
, blue-500
, pink-a100
) have been removed to reduce file size.<span class="ripple-surface"></span>
to the desired component like a Button and activate the effect on the ripple-surface
.raised-*dp
have been renamed to shadow-*dp
unelevated
has been replaced with shadow-none
btn-text-[color]
have been dropped. btn-outline-[color] border-0
can be used for Text Buttons.m-file-input
and btn-file
have been dropped.🔺 BREAKING: Class extended-fab
has been dropped. rounded-pill
can be used.
card-outline-[color]
have been dropped. border border-[color]
can be used for Cards with border.card-actions
, card-buttons
& card-icons
have been dropped as well.🔺 BREAKING: v3 uses Bootstrap 5’s Offcanvas component for Drawers.
m-progress
has been renamed to progress-bar-indeterminate
.m-rainbow
has been renamed to progress-bar-rainbow
.m-spinner
has been renamed to spinner-material
.spinner-[color]
have been dropped. text-[color]
can be used for colored spinners..form-floating
for Text and Select fields..form-floating-with-icon
to support icons and spinners on Text and Select fields.m-text-field
, m-text-field-outline
, static-label
& floating-label
have been removed.primary-[color]
has been replaced with base-[color]
.accent-[color]
has been replaced with primary-[color]
..form-floating
for Text and Select fields..form-floating-with-icon
to support icons and spinners on Text and Select fields.m-select
, m-select-outline
, static-label
& floating-label
have been removed.primary-[color]
has been replaced with base-[color]
.accent-[color]
has been replaced with primary-[color]
.v3 supports .input-group
on Text and Select fields.
v3 supports form validation.
🔺 BREAKING: Color classes input-[color]
have been dropped.