Bootstrap 5 UI KIT - 700+ components, plain JavaScript, MIT license, simple installation.

MDB is a collection of free for personal & commercial use Bootstrap templates, themes, design tools & resources.

---

# Get started

### [>> Get Started in 1 minute](https://mdbootstrap.com/docs/standard/getting-started/installation/)
Simple installation via .zip, npm or cdnjs.

### [>> Install with Webpack](https://mdbootstrap.com/docs/standard/getting-started/installation/#section-webpack)
This option is useful for experienced developers it enables bundling, unit testing code formatting, linting, saas support & more.
 
### [>> Install with MDBGO](https://mdbgo.com/) 
 Free Hosting, WordPress support, custom domains, SSL support, free database, frontend & backend templates, webpack starter included, git repostiory, FTP & jenkins support.
 
### [>> Install with MDBGO + e-commerce shop integration](https://mdbgo.com/wordpress-shop/)
One click setup! MDB GO allows you to create a WordPress page with a single click.
Regardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page.


## About Material Design for Bootstrap 5 & Vanilla JavaScript

Created by [](https://mdbootstrap.com)  
[ ](https://npmcharts.com/compare/mdbootstrap?minimal=true)
[](https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf)
[](https://x.com/intent/post?text=Thanks+%40mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+5+UI+KIT+https%3A%2F%2Fmdbootstrap.com%2Fdocs%2Fjquery%2F&hashtags=javascript%2Ccode%2Cwebdesign%2Cbootstrap)
<a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/">
  
</a>


Trusted by **3 000 000+** developers & designers. Used by companies & institutions like


|  |  |  |  |
| --- | --- | --- | --- |





|  | **[700+ UI components](https://mdbootstrap.com/docs/standard/)**          
         **[Free templates](https://mdbootstrap.com/freebies/)**
         Super simple, 1 minute installation
         Detailed docs & practical examples
         Lots of tutorials
         **Plain JavaScript (but works also with jQuery)**
         Huge and active community
         **MIT license - free for personal & commercial use** |
| --- | --- |



___

# Bootstrap 5 tutorial

**[>> Learn more about Bootstrap 5](https://mdbootstrap.com/docs/standard/)**

**[>> Bootstrap 5 Tutorial](https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/)**

**[>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials](https://www.youtube.com/c/Mdbootstrap)**



|  |  |
| --- | --- |
|  |  |



___

# Demo
#### Simplicity and ease of use are key features of MDB 5 UI Kit. You need only one minute to install and run it.

### Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

<a href="https://mdbootstrap.com/docs/standard/components/carousel/" alt="Bootstrap 5" rel="dofollow">
  
</a>

### Buttons

Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

<a href="https://mdbootstrap.com/docs/standard/components/buttons/" alt="Bootstrap 5" rel="dofollow">
  
</a>

<a href="https://mdbootstrap.com/docs/standard/components/buttons/" alt="Bootstrap 5" rel="dofollow">
  
</a>

<a href="https://mdbootstrap.com/docs/standard/components/buttons/" alt="Bootstrap 5" rel="dofollow">
  
</a>

<a href="https://mdbootstrap.com/docs/standard/components/buttons/" alt="Bootstrap 5" rel="dofollow">
  
</a>


### Spinners

Indicate the loading state of a component or page with MDB spinners, built entirely with HTML, CSS, and no JavaScript.

<a href="https://mdbootstrap.com/docs/standard/components/spinners/" alt="Bootstrap 5" rel="dofollow">
  
</a>

<a href="https://mdbootstrap.com/docs/standard/components/spinners/" alt="Bootstrap 5" rel="dofollow">
  
</a>

### Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

<a href="https://mdbootstrap.com/docs/standard/components/cards/" alt="Bootstrap 5" rel="dofollow">
  
</a>

### Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

<a href="https://mdbootstrap.com/docs/standard/forms/validation/" alt="Bootstrap 5" rel="dofollow">
  
 </a>
 <a href="https://mdbootstrap.com/docs/standard/forms/validation/" alt="Bootstrap 5" rel="dofollow">
   
 </a>
 <a href="https://mdbootstrap.com/docs/standard/forms/validation/" alt="Bootstrap 5" rel="dofollow">
   
</a>

### Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

 <a href="https://mdbootstrap.com/docs/standard/forms/overview/" alt="Bootstrap 5" rel="dofollow">
   
 </a>
 <a href="https://mdbootstrap.com/docs/standard/forms/overview/" alt="Bootstrap 5" rel="dofollow">
   
</a>


### Footer

A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.

<a href="https://mdbootstrap.com/docs/standard/navigation/footer/" alt="Bootstrap 5" rel="dofollow">
  
</a>

### Modal

Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

<a href="https://mdbootstrap.com/docs/standard/components/modal/" alt="Bootstrap 5" rel="dofollow">
  
</a>

### Hover

MDB hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.

<a href="https://mdbootstrap.com/docs/standard/content-styles/hover-effects/" alt="Bootstrap 5" rel="dofollow">
  
</a>

<a href="https://mdbootstrap.com/docs/standard/content-styles/hover-effects/" alt="Bootstrap 5" rel="dofollow">
  
</a>

### Tabs 

Tabs are quasi-navigation components which can highly improve website clarity and increase user experience.

<a href="https://mdbootstrap.com/docs/standard/navigation/tabs/" alt="Bootstrap 5" rel="dofollow">
  
</a>

<a href="https://mdbootstrap.com/docs/standard/navigation/tabs/" alt="Bootstrap 5" rel="dofollow">
  
</a>

### Notes

Notes are small components very helpful in inserting an additional piece of information.

<a href="https://mdbootstrap.com/docs/standard/content-styles/typography/" alt="Bootstrap 5" rel="dofollow">
  
</a>

### ScrollSpy

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

<a href="https://mdbootstrap.com/docs/standard/navigation/scrollspy/" alt="Bootstrap 5" rel="dofollow">
  
</a>

Also check out our standalone project [Perfect Scrollbar](https://perfectscrollbar.com/) which is included in MDB.

-----------------------------

# Free Bootstrap 5 templates

All of the templates were created with MDB 5 UI KIT (Material Design for Bootstrap 5).

MDB is a free (MIT license) library, that provides extra features and significantly extends Bootstrap's capabilities.



___

# Extended documentation


<li>[Bootstrap Address Form](https://mdbootstrap.com/docs/standard/extended/bootstrap-address-form/)</li>
<li>[Bootstrap Avatar](https://mdbootstrap.com/docs/standard/extended/avatar/)</li>
<li>[Bootstrap Back To Top Button](https://mdbootstrap.com/docs/standard/extended/back-to-top/)</li>
<li>[Bootstrap Carousel Slider with Thumbnails](https://mdbootstrap.com/docs/standard/extended/carousel-with-thumbnails/)</li>
<li>[Bootstrap Chat](https://mdbootstrap.com/docs/standard/extended/chat/)</li>
<li>[Bootstrap Code Blocks](https://mdbootstrap.com/docs/standard/extended/code/)</li>
<li>[Bootstrap Comments](https://mdbootstrap.com/docs/standard/extended/comments/)</li>
<li>[Bootstrap Comparison Table](https://mdbootstrap.com/docs/standard/extended/bootstrap-comparison-table/)</li>
<li>[Bootstrap Credit Card Form](https://mdbootstrap.com/docs/standard/extended/credit-card/)</li>
<li>[Bootstrap Drawer](https://mdbootstrap.com/docs/standard/extended/drawer/)</li>
<li>[Bootstrap Nested Dropdown](https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/)</li>
<li>[Bootstrap FAQ component / section](https://mdbootstrap.com/docs/standard/extended/faq/)</li>
<li>[Bootstrap Gallery](https://mdbootstrap.com/docs/standard/extended/gallery/)</li>
<li>[Bootstrap Hamburger Menu](https://mdbootstrap.com/docs/standard/extended/hamburger-menu/)</li>
<li>[Bootstrap Invoice](https://mdbootstrap.com/docs/standard/extended/bootstrap-invoice/)</li>
<li>[Bootstrap Jumbotron](https://mdbootstrap.com/docs/standard/extended/jumbotron/)</li>
<li>[Bootstrap Login Form](https://mdbootstrap.com/docs/standard/extended/login/)</li>
<li>[Bootstrap Maps](https://mdbootstrap.com/docs/standard/extended/maps/)</li>
<li>[Bootstrap Media Object](https://mdbootstrap.com/docs/standard/extended/media-object/)</li>
<li>[Bootstrap Mega Menu](https://mdbootstrap.com/docs/standard/extended/mega-menu/)</li> 
<li>[Bootstrap Multiselect](https://mdbootstrap.com/docs/standard/extended/multiselect/)</li> 
<li>[Bootstrap News Feed](https://mdbootstrap.com/docs/standard/extended/news-feed/)</li> 
<li>[Bootstrap Offcanvas](https://mdbootstrap.com/docs/standard/extended/offcanvas/)</li> 
<li>[Bootstrap Order Details](https://mdbootstrap.com/docs/standard/extended/order-details/)</li> 
<li>[Bootstrap Page Transitions](https://mdbootstrap.com/docs/standard/extended/page-transitions/)</li> 
<li>[Bootstrap Payment Forms](https://mdbootstrap.com/docs/standard/extended/payment-forms/)</li> 
<li>[Bootstrap Product Cards](https://mdbootstrap.com/docs/standard/extended/product-cards/)</li> 
<li>[Bootstrap Profiles](https://mdbootstrap.com/docs/standard/extended/profiles/)</li>  
<li>[Bootstrap Quotes](https://mdbootstrap.com/docs/standard/extended/quotes/)</li> 
<li>[Bootstrap Registration Form](https://mdbootstrap.com/docs/standard/extended/registration/)</li> 
<li>[Bootstrap Expanding Search Bar](https://mdbootstrap.com/docs/standard/extended/search-expanding/)</li> 
<li>[Bootstrap Shopping Carts](https://mdbootstrap.com/docs/standard/extended/shopping-carts/)</li> 
<li>[Bootstrap Side Navbar](https://mdbootstrap.com/docs/standard/extended/side-navbar/)</li>  
<li>[Bootstrap Sidebar](https://mdbootstrap.com/docs/standard/extended/sidebar/)</li>  
<li>[Bootstrap Social Media Icons & Buttons](https://mdbootstrap.com/docs/standard/extended/social-media/)</li>  
<li>[Bootstrap Square Buttons](https://mdbootstrap.com/docs/standard/extended/square-buttons/)</li>  
<li>[Bootstrap Survey Form](https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/)</li>  
<li>[Bootstrap Testimonial Slider](https://mdbootstrap.com/docs/standard/extended/testimonial-slider/)</li>  
<li>[Bootstrap Testimonials](https://mdbootstrap.com/docs/standard/extended/testimonials/)</li>  
<li>[Bootstrap Textarea](https://mdbootstrap.com/docs/standard/extended/textarea/)</li>  
<li>[Bootstrap Timeline](https://mdbootstrap.com/docs/standard/extended/timeline/)</li>  
<li>[Bootstrap To Do List](https://mdbootstrap.com/docs/standard/extended/to-do-list/)</li>  
<li>[Bootstrap Video Carousel / Gallery](https://mdbootstrap.com/docs/standard/extended/video-carousel/)</li>  
<li>[Bootstrap Weather](https://mdbootstrap.com/docs/standard/extended/weather/)</li>  
<li>[Bootstrap Dark Mode](https://mdbootstrap.com/docs/standard/extended/dark-mode/)</li> 
<li>[Bootstrap Padding](https://mdbootstrap.com/docs/standard/extended/padding/)</li> 
<li>[Bootstrap Modal Size](https://mdbootstrap.com/docs/standard/extended/modal-size/)</li> 
<li>[Bootstrap Modal Show, Close, Hide & Toggle](https://mdbootstrap.com/docs/standard/extended/modal-methods/)</li> 
<li>[Bootstrap Backdrop](https://mdbootstrap.com/docs/standard/extended/modal-backdrop/)</li> 
<li>[Bootstrap Card Deck](https://mdbootstrap.com/docs/standard/extended/card-deck/)</li> 
<li>[Bootstrap Table Filter](https://mdbootstrap.com/docs/standard/extended/table-filter/)</li> 
<li>[Bootstrap Slider](https://mdbootstrap.com/docs/standard/extended/slider/)</li> 
<li>[Bootstrap Logo](https://mdbootstrap.com/docs/standard/extended/logo/)</li> 
<li>[Bootstrap Popup](https://mdbootstrap.com/docs/standard/extended/popup/)</li> 
<li>[Bootstrap Max Width](https://mdbootstrap.com/docs/standard/extended/max-width/)</li>
<li>[Bootstrap Hero](https://mdbootstrap.com/docs/standard/extended/hero/)</li>
<li>[Bootstrap Select Dropdown](https://mdbootstrap.com/docs/standard/extended/select-dropdown/)</li>
<li>[Bootstrap Labels](https://mdbootstrap.com/docs/standard/extended/labels/)</li>
<li>[Bootstrap Dialog](https://mdbootstrap.com/docs/standard/extended/dialog/)</li>
<li>[Bootstrap Screen Sizes](https://mdbootstrap.com/docs/standard/extended/screen-sizes/)</li>
<li>[Bootstrap Dropdown Button](https://mdbootstrap.com/docs/standard/extended/dropdown-button/)</li>
<li>[Bootstrap Side Menu](https://mdbootstrap.com/docs/standard/extended/side-menu/)</li>
<li>[Bootstrap Table Fixed Header](https://mdbootstrap.com/docs/standard/extended/table-fixed-header/)</li>
<li>[Bootstrap Border Radius](https://mdbootstrap.com/docs/standard/extended/border-radius/)</li>
<li>[Bootstrap Popover On Hover](https://mdbootstrap.com/docs/standard/extended/popover-on-hover/)</li>
<li>[Bootstrap Overlay](https://mdbootstrap.com/docs/standard/extended/overlay/)</li>
<li>[Bootstrap Height](https://mdbootstrap.com/docs/standard/extended/height/)</li>
<li>[Bootstrap Widgets](https://mdbootstrap.com/docs/standard/extended/widgets/)</li>