Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mdbootstrap/mdb-ui-kit

Bootstrap 5 & Material Design UI KIT
https://github.com/mdbootstrap/mdb-ui-kit

bootstrap bootstrap-material bootstrap-template bootstrap-theme bootstrap-themes bootstrap5 css framework html javascript material material-design uikit

Last synced: about 1 month ago
JSON representation

Bootstrap 5 & Material Design UI KIT

Lists

README 

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



MDB is a collection of free 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   

 Downloads

License



YouTube Video Views



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



  

    

      

      

      

      

      

      

      

      

      

      

      

      

      

    

   



  

    

      

          

          		

          

      

      

        
    

            
  • 700+ UI components
    •           

             
  • Free templates
    • 

             
  • 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/)**



**[>> Bootstrap 5 Tutorial](https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/)**



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



  

    

      

         

          		

          

      

      

          

          		

          

      

    

     

        

          
Start learning from Basics


          

          		

          

         

        

          
Learn Bootstrap 5 | Crash Course for Beginners in 1.5H


          

          		

          

         

      

   



___



# 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.





  


    

  





### Buttons



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





  


    

  







  


    

  







  


    

  







  


    

  





### Spinners



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





  


    

  







  


    

  





### 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.





  


    

  





### Validation



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





  


    

  


 

 

   


    

  


 

 

   


    

  





### Forms



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



 

   


    

  


 

 

   


    

  





### Footer



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





  


    

  





### Modal



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





  


    

  





### 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.





  


    

  







  


    

  





### Tabs 



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





  


    

  







  


    

  





### Notes



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





  


    

  





### ScrollSpy



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





  


    

  





Also check out our standalone project Perfect Scrollbar 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.



  

    

      

        

          

        

        
Ecommerce


      

        

          

        

        
Carousel Full Cover


    

   



  

    

      

        

          

        

        
Image Full Cover


      

        

          

        

        
Portfolio


    

   



  

    

      

        

          

        

        
Post


      

        

          

        

        
Pricing


    

   



  

    

      

        

          

        

        
Video Full Cover


      

        

          

        

        
Carousel Half Cover


    

   



  

    

      

        

          

        

        
Video Half Cover


      

        

          

        

        
Login


    

   



  

    

      

        

          

        

        
Magazine


      

        

          

        

        
Checkout


    

   



  

    

      

        

                    

        

          
Blog


      

        

          

        

        
Product


    

   



  

    

      

        

                    

        

          
Category


      

        

          

        

        
Landing Page


    

   



  

    

      

        

          

        

        
Admin


      

        

          

        

        
Coming Soon


    

   



  

    

      

        

          

        

        
Classic Jumbotron


      

        

          

        

        
One Column


    

   



  

    

      

        

          

        

        
Two Columns


      

        

          

        

        
Three Columns


  

   



___



# Extended documentation