Material Design
for Bootstrap 5 & Vue 3

  1. 700+ UI components & templates
  2. Super simple, 1 minute installation
  3. Free hosting
  4. MIT license - free for personal & commercial use
Get started Demo npm i mdb-vue-ui-kit
MDB Vue quick start video

Trusted by 2,000,000+ developers and designers

Nasa - logo
Amazon - logo
Nike - logo
Ikea - logo
KPMG - logo
Sony - logo
Unity - logo
Samsung - logo
Airbus - logo
Yahoo - logo
Deloitte - logo
GE - logo

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.

Balloon over the water
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
Trendy shoes and jeans
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

Buttons

Docs & more examples

Progress

Docs & more examples
25%
25%

Spinners

Docs & more examples




Badges

Docs & more examples

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
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)

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)

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?

Button group

Docs & more examples






















Collapse

Docs & more examples
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.

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.

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.

Headers

Docs & more examples

Heading

Subheading

Call to action

Heading

Subheading

Call to action

Footer

Docs & more examples
Footer Content

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam voluptatem veniam, est atque cumque eum delectus sint!

Links
Links
© 2020 Copyright: MDBootstrap.com

Sign up for our newsletter

© 2020 Copyright: MDBootstrap.com

Breadcrumbs

Docs & more examples

Pagination

Docs & more examples

Tables

Docs & more examples
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover effects

Docs & more examples

Hover the images to see the effects

Masks

Docs & more examples

Without mask

Louvre

Can you see me?

With mask

Louvre

Can you see me?

rgba(18, 102, 241, 0.4)
rgba(178, 60, 253, 0.4)
rgba(0, 183, 74, 0.4)
rgba(249, 49, 84, 0.4)
rgba(251, 251, 251, 0.4)
rgba(57, 192, 237, 0.4)

Shadows

Docs & more examples