Material Style Logo

Restyle Bootstrap with Material Style

A Material Design UI Library based on Bootstrap

Bootstrap + Material Design = Material Style

Versatile Components for Every Color Mode

Discover our collection of beautifully crafted components, thoughtfully designed to seamlessly adapt to both light and dark color modes.

Light Mode

Content One
Content Two

Dark Mode

Content One
Content Two

Elevate Your Brand with Custom Theming

Introducing Material Style Theme Builder - Your Path to Unique Material Style


:root, [data-bs-theme="light"] {
  --bs-primary: #5f3dc4;
  --bs-primary-hover: #5134a7;
  --bs-primary-active: #4c319d;
  --bs-primary-subtle: #dfd8f3;
  --bs-primary-subtle-hover: #c7bbea;
  --bs-primary-subtle-active: #bfb1e7;
  --bs-primary-emphasis: #392576;
  --bs-primary-emphasis-hover: #2b1b58;
  --bs-primary-border-subtle: #bfb1e7;
  --bs-primary-rgb: 95, 61, 196;
  --bs-text-on-primary: #fff;
  --bs-border-radius: 2rem;
  --bs-border-width: 2px;

[data-bs-theme="dark"] {
  --bs-primary: #9781d9;
  --bs-primary-hover: #ac9ae1;
  --bs-primary-active: #b6a7e4;
  --bs-primary-subtle: #26184e;
  --bs-primary-subtle-hover: #2b1b58;
  --bs-primary-subtle-active: #392576;
  --bs-primary-emphasis: #b7a8e4;
  --bs-primary-emphasis-hover: #af9ee2;
  --bs-primary-border-subtle: #392576;
  --bs-primary-rgb: 151, 129, 217;
  --bs-text-on-primary: #000;

Light Mode

Primary background
Primary border
Primary link

Dark Mode

Primary background
Primary border
Primary link
  1. Streamlined Customization: Create custom themes effortlessly with our intuitive Theme Builder.
  2. Choose Your Palette: Select a theme color, border width, and border radius with ease.
  3. Real-time Preview: Visualize your choices instantly with live component previews.
  4. Automatic CSS Generation: The Theme builder automatically generates CSS and SASS for you.
  5. Enhanced Branding: Personalize Material Style to align perfectly with your brand identity.
  6. Seamless Integration: Easily integrate your custom theme into your project for a cohesive look.

A Big Thanks

Supporting Material Style's Journey

Bootstrap Bootstrap

Material Style is built using Bootstrap.

BrowserStack BrowserStack

Browser testing is powered by BrowserStack.

Netlify Netlify

Netlify provides us with Deploy Previews.

Algolia Algolia

Doc search is powered by Algolia.

GitHub Pages GitHub Pages GitHub Pages

Material Style is hosted on GitHub Pages.

Can I use it in my commercial projects?

Of course. Material Style is MIT licensed project. You can learn more on the license page.

How do I install and use it?

Installation is as simple as adding CSS and JS to your markup as described on the installation page. There's a code sample for each Material Style Component which can be copied and used.