Material Design
for Bootstrap 5 & Vanilla JavaScript

Standard Bootstrap version built with plain JS (but works also with jQuery)

700+ UI components & templates
Built with plain, vanilla JavaScript
Super simple, 1 minute installation
Free hosting
Easy customization with Webpack
MIT license - free for personal & commercial use

Get started Demo npm i mdb-ui-kit

Trusted by 2,000,000+ developers and designers

Demo

Cards

Docs & more examples

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Button

2 days ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Carousel

Docs & more examples

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Buttons

Docs & more examples

Input elements

Docs & more examples

Forms

Docs & more examples

Email address

Password

Remember me

Forgot password?

Not a member? Register

or sign up with:

First name

Last name

Email address

Password

Subscribe to our newsletter

or sign up with:

First name

Last name

Company name

Address

Phone

Additional information

Create an account?

Summary

Product 1: $100
Product 2: $50
Product 2: $49

Total amount: $199

Progress

Docs & more examples

25%

Spinners

Docs & more examples

Alerts

Docs & more examples

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Holy guacamole! You should check in on some of those fields below.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Badges

Docs & more examples

Example heading New

1
999+

Primary Secondary Success Danger Warning Info Light Dark

Primary Secondary Success Danger Warning Info Light Dark

Notes & typography

Docs & more examples

Note primary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note secondary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note success: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note danger: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note warning: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note info: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note light: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Main website heading (h1)

Website subheading (h4)

Section heading (h3)

Component heading (h5)

Component subheading

Component alternative subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?

Component heading (h5)

Component subheading

Component alternative subheading (h6)

Component heading (h5)

Component subheading

Component alternative subheading (h6)

Button group

Docs & more examples

Collapse

Docs & more examples

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Dropdowns

Docs & more examples