511 KiB
511 KiB
Awesome Bootstrap !Awesome (https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) (https://github.com/sindresorhus/awesome) !License: CC BY 4.0
(https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg) (https://creativecommons.org/licenses/by/4.0/)
:sparkles: Awesome - A curated list of amazing Bootstrap templates, plugins, UI Kits, tools and themes.
Contents
- Bootstrap 5 resources (#components)
- Components (#components)
- UI Kits (#ui-kits--libraries)
- Templates (#templates)
- **Single Page Templates** (#single-page-templates)
- **Admin Dashboards** (#admin-dashboards)
- **Popular website clones** (#popular-website-clones)
- Playgrounds (#playgrounds)
- Design Tools (#design-tools)
- Bootstrap 4 resources (#bootstrap-4-resources)
- UI Kits (#ui-kits--libraries-1)
- Templates (#templates-1)
- **Single Page Templates** (#single-page-templates-1)
- **Admin Dashboards** (#admin-dashboards-1)
- **Other themes** (#other-themes)
- Info (#info)
- Contributions (#contributions)
- License (#license)
- Maintainers (#license)
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Bootstrap 5 resources
Resources compatible with the latest Bootstrap v5 (based on vanilla JavaScript).
Components
- :five: Card UX/UI (https://mdbootstrap.com/docs/standard/components/cards/) - Discover 20+ predefined templates or generate your custom card. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg)
(https://opensource.org/licenses/MIT)
- :five: Ultimate Footer (https://mdbootstrap.com/docs/standard/navigation/footer/) - the last but not least. Learn how the bottom of your page should be at the top of your priorities !License: MIT
(https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :five: Tables Generator & Templates (https://mdbootstrap.com/docs/standard/data/tables/) - Use 10+ templates and present your data in a more accessible way or generate your own table
- :five: boostrap-table (https://github.com/wenzhixin/bootstrap-table) - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg)
(https://opensource.org/licenses/MIT)
- :five: perfect-scrollbar (https://perfectscrollbar.com/) - Minimalistic but perfect custom scrollbar plugin. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :five: Tab Collapse (https://github.com/flatlogic/bootstrap-tabcollapse) - MSmall bootstrap plugin that switches bootstrap tabs component to collapse component for small screens.
UI Kits & libraries
These aren't full out-of-the-box themes, rather, they are components you can use in your own creations.
- :five: Material Design for Bootstrap (https://github.com/mdbootstrap/mdb-ui-kit) - 700+ free material UI components & templates. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :five: Material Design for React (https://mdbootstrap.com/docs/react/) - 700+ free material UI components & templates. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :five: Material Design for Angular (https://mdbootstrap.com/docs/angular/) - 700+ free material UI components & templates. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :five: Material Design for Vue (https://mdbootstrap.com/docs/vue/) - 700+ free material UI components & templates. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :five: Bootstrap E-commerce (https://bootstrap-ecommerce.com/) - A powerful html library to develop e-commerce web sites with a huge set of components and templates. (free with code awesome)
- :five: Bootstrap E-commerce Admin (https://bootstrap-ecommerce.com/) - Ready to use simple e-commerce dashboard templates. Admin sales dashboard ui designs with demo includes all necessary files to start project quickly. (free with
code awesome)
- :five: Bootstrap Menu (https://bootstrap-menu.com/) - A collection of templates for different Bootstrap 5 menu & submenu configurations. (free with code awesome)
Templates
IMPORTANT: For items marked with !custom license (https://img.shields.io/badge/License-Custom-red.svg) please visit their site to learn more about their license.
Single Page Templates
│Version│ Name │ Screenshot │Description│ LicenseInUse │
├───────┼────────────────────────────────────────────────────────────────────────┼─────────────────────────────────────────┼───────────┼───────────────────────────────────────────────────────────────────────────────────────────────────┤
│:five: │Jumbtron │!Jumbtron │Responsive │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515510/) │(./screenshots/jumbtron-template.jpg) │jumbotron │(https://opensource.org/licenses/MIT) │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. A │ │
│ │ │ │starter │ │
│ │ │ │template │ │
│ │ │ │with a │ │
│ │ │ │full-width │ │
│ │ │ │centered │ │
│ │ │ │card at the│ │
│ │ │ │top. │ │
│:five: │Blog Categories │!Blog Categories │Categories │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515508/) │(./screenshots/blog-categories.jpg) │page with │(https://opensource.org/licenses/MIT) │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. A │ │
│ │ │ │starter │ │
│ │ │ │template │ │
│ │ │ │for showing│ │
│ │ │ │the │ │
│ │ │ │categories │ │
│ │ │ │of a given │ │
│ │ │ │blog, │ │
│ │ │ │magazine, │ │
│ │ │ │or other │ │
│ │ │ │kinds of │ │
│ │ │ │pages. │ │
│:five: │Pricing (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515552/)│!Pricing (./screenshots/pricing.jpg) │Responsive │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │ │pricing │(https://opensource.org/licenses/MIT) │
│ │ │ │example │ │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. This │ │
│ │ │ │template │ │
│ │ │ │contains │ │
│ │ │ │tiers for │ │
│ │ │ │different │ │
│ │ │ │prices of │ │
│ │ │ │products, │ │
│ │ │ │subscriptio│ │
│ │ │ │ns, or │ │
│ │ │ │saas. │ │
│:five: │Blog (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515504/) │!Blog (./screenshots/blog.jpg) │Responsive │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │ │blog built │(https://opensource.org/licenses/MIT) │
│ │ │ │with the │ │
│ │ │ │latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. Open │ │
│ │ │ │source │ │
│ │ │ │template │ │
│ │ │ │for │ │
│ │ │ │personal or│ │
│ │ │ │commercial │ │
│ │ │ │blog. │ │
│:five: │Coming Soon │!Coming Soon │Responsive │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515515/) │(./screenshots/coming-soon.jpg) │counter │(https://opensource.org/licenses/MIT) │
│ │ │ │template │ │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. It │ │
│ │ │ │counts down│ │
│ │ │ │to the │ │
│ │ │ │given date │ │
│ │ │ │in a │ │
│ │ │ │"coming │ │
│ │ │ │soon" │ │
│ │ │ │style. │ │
│:five: │Fluent Design │!Fluent Design (./screenshots/fluent.jpg)│Components │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://mdbgo.io/marta-szymanska/mdb5-demo-free-fluent/free/components/│ │in the │(https://opensource.org/licenses/MIT) │
│ │full-demo.html) │ │newest │ │
│ │ │ │Bootstrap 5│ │
│ │ │ │and Fluent │ │
│ │ │ │Design. │ │
│ │ │ │Completely │ │
│ │ │ │new design │ │
│ │ │ │using the │ │
│ │ │ │latest │ │
│ │ │ │Bootstrap. │ │
│:five: │Login page │!Login page (./screenshots/login.jpg) │Responsive,│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515540/) │ │login page │(https://opensource.org/licenses/MIT) │
│ │ │ │template │ │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. │ │
│ │ │ │Signup/Regi│ │
│ │ │ │stration │ │
│ │ │ │form │ │
│ │ │ │examples │ │
│ │ │ │with │ │
│ │ │ │validation.│ │
│:five: │Video full-page Cover │!BlogPost │Responsive │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515523/) │(./screenshots/video-full-cover.jpg) │fullscreen │(https://opensource.org/licenses/MIT) │
│ │ │ │video │ │
│ │ │ │template │ │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. This │ │
│ │ │ │full-page │ │
│ │ │ │video │ │
│ │ │ │example │ │
│ │ │ │will take │ │
│ │ │ │up the │ │
│ │ │ │entire │ │
│ │ │ │viewport of│ │
│ │ │ │your user │ │
│ │ │ │screen. │ │
│:five: │Bootstarters (https://www.bootstarters.com/) │!bootstarters │Bootstarter│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │(./screenshots/bootstarters.png) │s - Free │(https://opensource.org/licenses/MIT) │
│ │ │ │templates │ │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap 5│ │
│ │ │ │and styled│ │
│ │ │ │in │ │
│ │ │ │accordance │ │
│ │ │ │with │ │
│ │ │ │Material │ │
│ │ │ │Design 2.0 │ │
│ │ │ │guidelines │ │
│:five: │Dark Theme │!theme-dark │Dark theme │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2922363) │(./screenshots/dark-theme.jpg) │for the │(https://opensource.org/licenses/MIT) │
│ │ │ │components │ │
│ │ │ │of the │ │
│ │ │ │newest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. │ │
│ │ │ │Carefully │ │
│ │ │ │selected │ │
│ │ │ │colors, │ │
│ │ │ │together │ │
│ │ │ │creating a │ │
│ │ │ │beautiful │ │
│ │ │ │dark │ │
│ │ │ │composition│ │
│ │ │ │. │ │
│:five: │Page with Carousel │!Carousel-Page │Responsive,│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515519/) │(./screenshots/page-carousel.jpg) │background-│(https://opensource.org/licenses/MIT) │
│ │ │ │image │ │
│ │ │ │carousel │ │
│ │ │ │template │ │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. Use a │ │
│ │ │ │full-page │ │
│ │ │ │image │ │
│ │ │ │slider as │ │
│ │ │ │the first │ │
│ │ │ │thing the │ │
│ │ │ │user sees │ │
│ │ │ │on your │ │
│ │ │ │website. │ │
│:five: │Image full-page cover │!ImageCoverPage │Responsive,│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515521) │(./screenshots/image-cover.jpg) │background-│(https://opensource.org/licenses/MIT) │
│ │ │ │image │ │
│ │ │ │template │ │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. Use this│ │
│ │ │ │example of │ │
│ │ │ │a full-page│ │
│ │ │ │image as a │ │
│ │ │ │header of │ │
│ │ │ │your page. │ │
│:five: │Blog Post │!BlogPost (./screenshots/blog-post.jpg) │Responsive,│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515550/) │ │blogpost │(https://opensource.org/licenses/MIT) │
│ │ │ │example │ │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. Use this│ │
│ │ │ │starter │ │
│ │ │ │template │ │
│ │ │ │for │ │
│ │ │ │Bootstrap │ │
│ │ │ │blogs, │ │
│ │ │ │articles, │ │
│ │ │ │and posts. │ │
│:five: │Magazine │!Magazine (./screenshots/magazine.jpg) │Responsive │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515545/) │ │magazine │(https://opensource.org/licenses/MIT) │
│ │ │ │template │ │
│ │ │ │built with │ │
│ │ │ │the latest │ │
│ │ │ │Bootstrap │ │
│ │ │ │5. News │ │
│ │ │ │aggregator │ │
│ │ │ │frontpage │ │
│ │ │ │for │ │
│ │ │ │articles, │ │
│ │ │ │blogposts, │ │
│ │ │ │and more. │ │
Admin Dashboards
│Version│ Name │ Screenshot │Des│ LicenseInUse │
│ │ │ │cri│ │
│ │ │ │pti│ │
│ │ │ │on │ │
├───────┼─────────────────────────────────────────────────────┼─────────────────────────────────────────────────────────────────────────────┼───┼──────────────────────────────────────────────────────────────────────────────────────────┤
│:five: │Bootstrap 5 Admin Template │!Bootstrap 5 Admin Template (./screenshots/admin-bootstrap5.jpg) │Res│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://startbootstrap.com/template-overviews/sb-adm│ │pon│(https://opensource.org/licenses/MIT) │
│ │in-2/) │ │siv│ │
│ │ │ │e │ │
│ │ │ │adm│ │
│ │ │ │in │ │
│ │ │ │das│ │
│ │ │ │hbo│ │
│ │ │ │ard│ │
│ │ │ │bui│ │
│ │ │ │lt │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │the│ │
│ │ │ │lat│ │
│ │ │ │est│ │
│ │ │ │Boo│ │
│ │ │ │tst│ │
│ │ │ │rap│ │
│ │ │ │5. │ │
│ │ │ │Con│ │
│ │ │ │tro│ │
│ │ │ │l │ │
│ │ │ │pan│ │
│ │ │ │el │ │
│ │ │ │the│ │
│ │ │ │me │ │
│ │ │ │ide│ │
│ │ │ │al │ │
│ │ │ │for│ │
│ │ │ │adm│ │
│ │ │ │in │ │
│ │ │ │pag│ │
│ │ │ │es,│ │
│ │ │ │ana│ │
│ │ │ │lyt│ │
│ │ │ │ics│ │
│ │ │ │& │ │
│ │ │ │con│ │
│ │ │ │fig│ │
│ │ │ │ura│ │
│ │ │ │tio│ │
│ │ │ │n │ │
│ │ │ │pan│ │
│ │ │ │els│ │
│ │ │ │. │ │
│:five: │Sneat Free Bootstrap 5 Admin Template │!Sneat Free Bootstrap 5 Admin Template │Ope│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://themeselection.com/products/sneat-free-boots│(./screenshots/sneat-free-bootstrap-5-html-admin-template.png) │n-s│(https://opensource.org/licenses/MIT) │
│ │trap-html-admin-template/) │ │our│ │
│ │ │ │ce │ │
│ │ │ │& │ │
│ │ │ │Eas│ │
│ │ │ │y │ │
│ │ │ │to │ │
│ │ │ │use│ │
│ │ │ │Boo│ │
│ │ │ │tst│ │
│ │ │ │rap│ │
│ │ │ │5 │ │
│ │ │ │HTM│ │
│ │ │ │L │ │
│ │ │ │Adm│ │
│ │ │ │in │ │
│ │ │ │Tem│ │
│ │ │ │pla│ │
│ │ │ │te │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │Ele│ │
│ │ │ │gan│ │
│ │ │ │t │ │
│ │ │ │Des│ │
│ │ │ │ign│ │
│ │ │ │& │ │
│ │ │ │Uni│ │
│ │ │ │que│ │
│ │ │ │Lay│ │
│ │ │ │out│ │
│ │ │ │. │ │
│:five: │MaterialPro Bootstrap Lite │!MaterialPro Bootstrap Lite (./screenshots/materialpro-bootstrap-lite-y.jpg) │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://www.wrappixel.com/templates/materialpro-lite│ │Bes│(https://opensource.org/licenses/MIT) │
│ │/) │ │t &│ │
│ │ │ │Fre│ │
│ │ │ │e │ │
│ │ │ │Ope│ │
│ │ │ │n-S│ │
│ │ │ │our│ │
│ │ │ │ce │ │
│ │ │ │Mat│ │
│ │ │ │eri│ │
│ │ │ │alP│ │
│ │ │ │ro │ │
│ │ │ │Boo│ │
│ │ │ │tst│ │
│ │ │ │rap│ │
│ │ │ │Tem│ │
│ │ │ │pla│ │
│ │ │ │tes│ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │Fea│ │
│ │ │ │tur│ │
│ │ │ │es │ │
│ │ │ │and│ │
│ │ │ │Pre│ │
│ │ │ │miu│ │
│ │ │ │m │ │
│ │ │ │Ver│ │
│ │ │ │sio│ │
│ │ │ │n │ │
│ │ │ │Opt│ │
│ │ │ │ion│ │
│:five: │Modernize Free Bootstrap 5 Admin Template │!Modernize Free Bootstrap 5 Admin Template │Fre│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://adminmart.com/product/modernize-free-bootstr│(./screenshots/modenize-free-bootstrap-admin-template.jpg) │e │(https://opensource.org/licenses/MIT) │
│ │ap-5-admin-template/) │ │Ope│ │
│ │ │ │n-S│ │
│ │ │ │our│ │
│ │ │ │ce │ │
│ │ │ │Mod│ │
│ │ │ │ern│ │
│ │ │ │ize│ │
│ │ │ │Boo│ │
│ │ │ │tst│ │
│ │ │ │rap│ │
│ │ │ │Tem│ │
│ │ │ │pla│ │
│ │ │ │tes│ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │Goo│ │
│ │ │ │d │ │
│ │ │ │Fea│ │
│ │ │ │tur│ │
│ │ │ │es │ │
│ │ │ │and│ │
│ │ │ │Pre│ │
│ │ │ │miu│ │
│ │ │ │m │ │
│ │ │ │Ver│ │
│ │ │ │sio│ │
│ │ │ │n │ │
│ │ │ │Opt│ │
│ │ │ │ion│ │
│:five: │Materio Free Bootstrap 5 Admin Template │!Materio Free Bootstrap 5 Admin Template │Ope│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://themeselection.com/item/materio-free-bootstr│(./screenshots/materio-bootstrap-html-admin-template-github.png) │n-s│(https://opensource.org/licenses/MIT) │
│ │ap-html-admin-template/) │ │our│ │
│ │ │ │ce │ │
│ │ │ │& │ │
│ │ │ │Eas│ │
│ │ │ │y │ │
│ │ │ │to │ │
│ │ │ │use│ │
│ │ │ │Boo│ │
│ │ │ │tst│ │
│ │ │ │rap│ │
│ │ │ │5 │ │
│ │ │ │HTM│ │
│ │ │ │L │ │
│ │ │ │Adm│ │
│ │ │ │in │ │
│ │ │ │Tem│ │
│ │ │ │pla│ │
│ │ │ │te │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │Ele│ │
│ │ │ │gan│ │
│ │ │ │t │ │
│ │ │ │Des│ │
│ │ │ │ign│ │
│ │ │ │& │ │
│ │ │ │Uni│ │
│ │ │ │que│ │
│ │ │ │Lay│ │
│ │ │ │out│ │
│ │ │ │. │ │
Popular website clones
│Version│ Name │ Screenshot │Des│ LicenseInUse │
│ │ │ │cri│ │
│ │ │ │pti│ │
│ │ │ │on │ │
├───────┼───────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────────┼───┼──────────────────────────────────────────────────────────────────────────────────────────────────┤
│:five: │Twitter newsfeed │!word (./screenshots/twitter-newsfeed.jpg) │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2867455) │ │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │a │ │
│ │ │ │hom│ │
│ │ │ │e │ │
│ │ │ │pag│ │
│ │ │ │e │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │thr│ │
│ │ │ │ee │ │
│ │ │ │col│ │
│ │ │ │umn│ │
│ │ │ │lay│ │
│ │ │ │out│ │
│ │ │ │whe│ │
│ │ │ │re │ │
│ │ │ │the│ │
│ │ │ │two│ │
│ │ │ │ext│ │
│ │ │ │rem│ │
│ │ │ │e │ │
│ │ │ │one│ │
│ │ │ │s │ │
│ │ │ │are│ │
│ │ │ │res│ │
│ │ │ │pon│ │
│ │ │ │sib│ │
│ │ │ │le │ │
│ │ │ │for│ │
│ │ │ │the│ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n, │ │
│ │ │ │whi│ │
│ │ │ │le │ │
│ │ │ │the│ │
│ │ │ │mid│ │
│ │ │ │dle│ │
│ │ │ │one│ │
│ │ │ │i │ │
│ │ │ │car│ │
│ │ │ │ds │ │
│ │ │ │you│ │
│ │ │ │can│ │
│ │ │ │che│ │
│ │ │ │ck │ │
│ │ │ │rec│ │
│ │ │ │ent│ │
│ │ │ │use│ │
│ │ │ │r │ │
│ │ │ │act│ │
│ │ │ │ivi│ │
│ │ │ │ty.│ │
│:five: │Tripadvisor homepage │!Tripadvisor homepage │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2867464) │(./screenshots/tripadvisor-homepage.jpg) │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │a │ │
│ │ │ │hom│ │
│ │ │ │e │ │
│ │ │ │pag│ │
│ │ │ │e │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │one│ │
│ │ │ │col│ │
│ │ │ │umn│ │
│ │ │ │lay│ │
│ │ │ │out│ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │eas│ │
│ │ │ │y │ │
│ │ │ │to │ │
│ │ │ │use│ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n │ │
│ │ │ │in │ │
│ │ │ │sho│ │
│ │ │ │rtc│ │
│ │ │ │uts│ │
│ │ │ │und│ │
│ │ │ │er │ │
│ │ │ │the│ │
│ │ │ │nav│ │
│ │ │ │bar│ │
│ │ │ │. │ │
│ │ │ │The│ │
│ │ │ │pag│ │
│ │ │ │e │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │als│ │
│ │ │ │o a│ │
│ │ │ │sea│ │
│ │ │ │rch│ │
│ │ │ │for│ │
│ │ │ │m &│ │
│ │ │ │num│ │
│ │ │ │ber│ │
│ │ │ │of │ │
│ │ │ │car│ │
│ │ │ │ds │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │adv│ │
│ │ │ │ise│ │
│ │ │ │d │ │
│ │ │ │the│ │
│ │ │ │bes│ │
│ │ │ │t │ │
│ │ │ │pla│ │
│ │ │ │ces│ │
│ │ │ │to │ │
│ │ │ │res│ │
│ │ │ │t. │ │
│:five: │Wikipedia article page │!Wikipedia article page │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2867452) │(./screenshots/wikipedia-article-page.jpg) │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │a │ │
│ │ │ │hom│ │
│ │ │ │e │ │
│ │ │ │pag│ │
│ │ │ │e │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l, │ │
│ │ │ │adv│ │
│ │ │ │anc│ │
│ │ │ │ed │ │
│ │ │ │eCo│ │
│ │ │ │mme│ │
│ │ │ │rce│ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n │ │
│ │ │ │(do│ │
│ │ │ │ubl│ │
│ │ │ │e │ │
│ │ │ │nav│ │
│ │ │ │bar│ │
│ │ │ │+ │ │
│ │ │ │sid│ │
│ │ │ │ena│ │
│ │ │ │v) │ │
│ │ │ │and│ │
│ │ │ │mul│ │
│ │ │ │tip│ │
│ │ │ │le │ │
│ │ │ │med│ │
│ │ │ │ia │ │
│ │ │ │con│ │
│ │ │ │tai│ │
│ │ │ │ner│ │
│ │ │ │s │ │
│ │ │ │for│ │
│ │ │ │pre│ │
│ │ │ │sen│ │
│ │ │ │tin│ │
│ │ │ │g │ │
│ │ │ │pro│ │
│ │ │ │duc│ │
│ │ │ │ts.│ │
│:five: │IMDB homepage │!IMDB homepage (./screenshots/imdb-homepage.jpg) │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847268) │ │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │a │ │
│ │ │ │hom│ │
│ │ │ │e │ │
│ │ │ │pag│ │
│ │ │ │e │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l, │ │
│ │ │ │adv│ │
│ │ │ │anc│ │
│ │ │ │ed │ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n │ │
│ │ │ │and│ │
│ │ │ │mul│ │
│ │ │ │tip│ │
│ │ │ │le │ │
│ │ │ │med│ │
│ │ │ │ia │ │
│ │ │ │con│ │
│ │ │ │tai│ │
│ │ │ │ner│ │
│ │ │ │s │ │
│ │ │ │for│ │
│ │ │ │pre│ │
│ │ │ │sen│ │
│ │ │ │tin│ │
│ │ │ │g │ │
│ │ │ │new│ │
│ │ │ │s │ │
│ │ │ │and│ │
│ │ │ │mov│ │
│ │ │ │ies│ │
│ │ │ │. │ │
│:five: │Airbnb (https://mdbootstrap.com/snippets/standard/mdb-lab/2847266) │!Airbnb (./screenshots/airbnb.jpg) │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │ │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │two│ │
│ │ │ │-co│ │
│ │ │ │lum│ │
│ │ │ │n │ │
│ │ │ │lay│ │
│ │ │ │out│ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │adv│ │
│ │ │ │anc│ │
│ │ │ │ed │ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n │ │
│ │ │ │of │ │
│ │ │ │mul│ │
│ │ │ │tip│ │
│ │ │ │le │ │
│ │ │ │med│ │
│ │ │ │ia │ │
│ │ │ │con│ │
│ │ │ │tai│ │
│ │ │ │ner│ │
│ │ │ │s │ │
│ │ │ │for│ │
│ │ │ │pre│ │
│ │ │ │sen│ │
│ │ │ │tin│ │
│ │ │ │g │ │
│ │ │ │pla│ │
│ │ │ │ces│ │
│ │ │ │to │ │
│ │ │ │sta│ │
│ │ │ │y │ │
│ │ │ │in │ │
│ │ │ │are│ │
│ │ │ │a │ │
│ │ │ │you│ │
│ │ │ │can│ │
│ │ │ │cho│ │
│ │ │ │ose│ │
│ │ │ │on │ │
│ │ │ │int│ │
│ │ │ │era│ │
│ │ │ │cti│ │
│ │ │ │ve │ │
│ │ │ │map│ │
│ │ │ │. │ │
│:five: │Facebook messenger │!Facebook messenger │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847260) │(./screenshots/facebook-messenger.jpg) │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l │ │
│ │ │ │thr│ │
│ │ │ │ee │ │
│ │ │ │col│ │
│ │ │ │umn│ │
│ │ │ │lay│ │
│ │ │ │out│ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │int│ │
│ │ │ │erf│ │
│ │ │ │ace│ │
│ │ │ │to │ │
│ │ │ │sen│ │
│ │ │ │d │ │
│ │ │ │mes│ │
│ │ │ │sag│ │
│ │ │ │es │ │
│ │ │ │and│ │
│ │ │ │exc│ │
│ │ │ │han│ │
│ │ │ │ge │ │
│ │ │ │pho│ │
│ │ │ │tos│ │
│ │ │ │, │ │
│ │ │ │vid│ │
│ │ │ │eos│ │
│ │ │ │, │ │
│ │ │ │sti│ │
│ │ │ │cke│ │
│ │ │ │rs,│ │
│ │ │ │aud│ │
│ │ │ │io,│ │
│ │ │ │and│ │
│ │ │ │fil│ │
│ │ │ │es,│ │
│ │ │ │as │ │
│ │ │ │wel│ │
│ │ │ │l │ │
│ │ │ │as │ │
│ │ │ │rea│ │
│ │ │ │ct │ │
│ │ │ │to │ │
│ │ │ │oth│ │
│ │ │ │er │ │
│ │ │ │use│ │
│ │ │ │rs'│ │
│ │ │ │mes│ │
│ │ │ │sag│ │
│ │ │ │es.│ │
│:five: │Facebook profile page │!Facebook profile page │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847258) │(./screenshots/facebook-profile-page.jpg) │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │the│ │
│ │ │ │use│ │
│ │ │ │r's│ │
│ │ │ │pro│ │
│ │ │ │fil│ │
│ │ │ │e │ │
│ │ │ │pag│ │
│ │ │ │e, │ │
│ │ │ │alo│ │
│ │ │ │ng │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │the│ │
│ │ │ │top│ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n, │ │
│ │ │ │cov│ │
│ │ │ │er │ │
│ │ │ │pho│ │
│ │ │ │to,│ │
│ │ │ │pro│ │
│ │ │ │fil│ │
│ │ │ │e │ │
│ │ │ │pho│ │
│ │ │ │to,│ │
│ │ │ │and│ │
│ │ │ │bel│ │
│ │ │ │ow │ │
│ │ │ │tha│ │
│ │ │ │t │ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l │ │
│ │ │ │two│ │
│ │ │ │-co│ │
│ │ │ │lum│ │
│ │ │ │n │ │
│ │ │ │lay│ │
│ │ │ │out│ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │acc│ │
│ │ │ │oun│ │
│ │ │ │t │ │
│ │ │ │inf│ │
│ │ │ │orm│ │
│ │ │ │ati│ │
│ │ │ │on,│ │
│ │ │ │and│ │
│ │ │ │use│ │
│ │ │ │r │ │
│ │ │ │new│ │
│ │ │ │s │ │
│ │ │ │fee│ │
│ │ │ │d. │ │
│:five: │Instagram newsfeed │!Instagram newsfeed │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847257) │(./screenshots/instagram-newsfeed.jpg) │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │the│ │
│ │ │ │use│ │
│ │ │ │r's│ │
│ │ │ │new│ │
│ │ │ │sfe│ │
│ │ │ │ed,│ │
│ │ │ │alo│ │
│ │ │ │ng │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │the│ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l │ │
│ │ │ │two│ │
│ │ │ │-co│ │
│ │ │ │lum│ │
│ │ │ │n │ │
│ │ │ │lay│ │
│ │ │ │out│ │
│ │ │ │, │ │
│ │ │ │sto│ │
│ │ │ │ry │ │
│ │ │ │row│ │
│ │ │ │and│ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n. │ │
│:five: │YouTube homepage │!YouTube homepage │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847265) │(./screenshots/youtube-homepage.jpg) │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │a │ │
│ │ │ │hom│ │
│ │ │ │e │ │
│ │ │ │pag│ │
│ │ │ │e │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l, │ │
│ │ │ │adv│ │
│ │ │ │anc│ │
│ │ │ │ed │ │
│ │ │ │You│ │
│ │ │ │Tub│ │
│ │ │ │e │ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n │ │
│ │ │ │and│ │
│ │ │ │mul│ │
│ │ │ │tip│ │
│ │ │ │le │ │
│ │ │ │med│ │
│ │ │ │ia │ │
│ │ │ │con│ │
│ │ │ │tai│ │
│ │ │ │ner│ │
│ │ │ │s │ │
│ │ │ │for│ │
│ │ │ │pre│ │
│ │ │ │sen│ │
│ │ │ │tin│ │
│ │ │ │g │ │
│ │ │ │vid│ │
│ │ │ │eos│ │
│ │ │ │. │ │
│:five: │Trello board │!Trello board (./screenshots/trello-board.jpg) │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847259) │ │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │tre│ │
│ │ │ │llo│ │
│ │ │ │boa│ │
│ │ │ │rd │ │
│ │ │ │wit│ │
│ │ │ │h a│ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l │ │
│ │ │ │scr│ │
│ │ │ │um │ │
│ │ │ │sys│ │
│ │ │ │tem│ │
│ │ │ │arr│ │
│ │ │ │ang│ │
│ │ │ │eme│ │
│ │ │ │nt │ │
│ │ │ │and│ │
│ │ │ │dra│ │
│ │ │ │gga│ │
│ │ │ │ble│ │
│ │ │ │tas│ │
│ │ │ │ks.│ │
│:five: │Alibaba homepage │!Alibaba homepage │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847264) │(./screenshots/alibaba-homepage.jpg) │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │a │ │
│ │ │ │hom│ │
│ │ │ │e │ │
│ │ │ │pag│ │
│ │ │ │e │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l, │ │
│ │ │ │adv│ │
│ │ │ │anc│ │
│ │ │ │ed │ │
│ │ │ │eCo│ │
│ │ │ │mme│ │
│ │ │ │rce│ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n │ │
│ │ │ │(do│ │
│ │ │ │ubl│ │
│ │ │ │e │ │
│ │ │ │nav│ │
│ │ │ │bar│ │
│ │ │ │+ │ │
│ │ │ │sid│ │
│ │ │ │ena│ │
│ │ │ │v) │ │
│ │ │ │and│ │
│ │ │ │mul│ │
│ │ │ │tip│ │
│ │ │ │le │ │
│ │ │ │med│ │
│ │ │ │ia │ │
│ │ │ │con│ │
│ │ │ │tai│ │
│ │ │ │ner│ │
│ │ │ │s │ │
│ │ │ │for│ │
│ │ │ │pre│ │
│ │ │ │sen│ │
│ │ │ │tin│ │
│ │ │ │g │ │
│ │ │ │pro│ │
│ │ │ │duc│ │
│ │ │ │ts.│ │
│:five: │Facebook newsfeed │!Facebook newsfeed │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847263) │(./screenshots/facebook-newsfeed.jpg) │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │the│ │
│ │ │ │use│ │
│ │ │ │r's│ │
│ │ │ │new│ │
│ │ │ │sfe│ │
│ │ │ │ed,│ │
│ │ │ │alo│ │
│ │ │ │ng │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │the│ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l │ │
│ │ │ │thr│ │
│ │ │ │ee-│ │
│ │ │ │col│ │
│ │ │ │umn│ │
│ │ │ │lay│ │
│ │ │ │out│ │
│ │ │ │and│ │
│ │ │ │soc│ │
│ │ │ │ial│ │
│ │ │ │med│ │
│ │ │ │ia │ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n. │ │
│:five: │Amazon homepage │!Amazon homepage │The│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847262) │(./screenshots/amazon-homepage.jpg) │pro│(https://opensource.org/licenses/MIT) │
│ │ │ │jec│ │
│ │ │ │t │ │
│ │ │ │inc│ │
│ │ │ │lud│ │
│ │ │ │es │ │
│ │ │ │a │ │
│ │ │ │hom│ │
│ │ │ │e │ │
│ │ │ │pag│ │
│ │ │ │e │ │
│ │ │ │wit│ │
│ │ │ │h │ │
│ │ │ │typ│ │
│ │ │ │ica│ │
│ │ │ │l, │ │
│ │ │ │adv│ │
│ │ │ │anc│ │
│ │ │ │ed │ │
│ │ │ │eCo│ │
│ │ │ │mme│ │
│ │ │ │rce│ │
│ │ │ │nav│ │
│ │ │ │iga│ │
│ │ │ │tio│ │
│ │ │ │n │ │
│ │ │ │(do│ │
│ │ │ │ubl│ │
│ │ │ │e │ │
│ │ │ │nav│ │
│ │ │ │bar│ │
│ │ │ │+ │ │
│ │ │ │sid│ │
│ │ │ │ena│ │
│ │ │ │v) │ │
│ │ │ │and│ │
│ │ │ │mul│ │
│ │ │ │tip│ │
│ │ │ │le │ │
│ │ │ │med│ │
│ │ │ │ia │ │
│ │ │ │con│ │
│ │ │ │tai│ │
│ │ │ │ner│ │
│ │ │ │s │ │
│ │ │ │for│ │
│ │ │ │pre│ │
│ │ │ │sen│ │
│ │ │ │tin│ │
│ │ │ │g │ │
│ │ │ │pro│ │
│ │ │ │duc│ │
│ │ │ │ts.│ │
Playgrounds & hosting
- Codeply (https://www.codeply.com/p/3NtYJhNZCd) - an online editor that includes dozens of frameworks, starter templates and code snippets supports Vuetify, Bulma, Bootstrap, Foundation, MDB, Angular and Vue
- Snippets Playground (https://mdbootstrap.com/snippets/) - free & fast online editor dedicated to Bootstrap, supports integrations with React, Angular, Vue and MDB, full of community crafted components and design blocks
- CodePen (https://codepen.io/) - social development environment for front-end designers and developers
- JSFiddle (https://jsfiddle.net/) - an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets
- MDB GO/CLI (https://mdbgo.com/) - frontend + backend environment. Create, deploy and host anything with a single command, offers free hosting & predesigned backend boilerplates integrated with Bootstrap, Angular, React, Vue, Laravel,
WordPress, Express.js, MongoDB, MySQL, Tailwind, Express.js, SocketIO, Passport and more.
Design Tools
- Drag & Drop Builder (https://mdbootstrap.com/builder/)
- Lab Templates (https://mdbootstrap.com/docs/standard/lab/)
- Color Schemes generator (https://mdbootstrap.com/docs/standard/tools/design/color-schemes/)
- ProofHub (https://www.proofhub.com/)
- Logo generator (https://mdbootstrap.com/docs/standard/tools/design/logo-generator/)
- Filestage (https://filestage.io/)
- CSS Masks & Glassmorphism Generator (https://mdbootstrap.com/docs/standard/tools/design/masks/)
- Logaster (https://www.logaster.com/logo/)
- Instagram filters CSS generator (https://mdbootstrap.com/docs/standard/tools/design/instagram-filters/)
- Coolors – Color scheme generator (https://coolors.co/)
- CSS gradients generator (https://mdbootstrap.com/docs/standard/tools/design/gradients/)
- Palleton – A color scheme (https://paletton.com/)
- Fancy border radius generator (https://mdbootstrap.com/docs/standard/tools/design/fancy-border-radius/)
- Diigo (https://www.diigo.com/)
- Meta tags generator (https://mdbootstrap.com/docs/standard/tools/builders/meta-tags/)
- Cards generator (https://mdbootstrap.com/docs/standard/tools/builders/cards/)
- Pixlr (https://pixlr.com/)
- Buttons generator (https://mdbootstrap.com/docs/standard/tools/builders/buttons/)
- InVision Studio (https://www.invisionapp.com/studio)
- Charts creator (https://mdbootstrap.com/docs/standard/tools/builders/charts/)
- Marvel (https://marvelapp.com/)
- Shadows generator (https://mdbootstrap.com/docs/standard/tools/design/shadows/)
- Figma (https://www.figma.com/)
- SVG waves generator (https://mdbootstrap.com/docs/standard/tools/design/waves/)
- Affinity Designer (https://affinity.serif.com/en-gb/designer/)
- Datatables builder (https://mdbootstrap.com/docs/standard/tools/builders/datatables/)
- UXPin (https://www.uxpin.com/)
- Alerts generator (https://mdbootstrap.com/docs/standard/tools/builders/alerts/)
- Proto.io (https://proto.io/)
- Modals generator (https://mdbootstrap.com/docs/standard/tools/builders/modals/)
- MockFlow (https://www.creativebloq.com/features/best-web-design-tools)
- Icons generator (https://mdbootstrap.com/docs/standard/tools/builders/icons/)
- Adobe Comp (https://www.adobe.com/uk/products/comp.html)
- Table generator (https://mdbootstrap.com/docs/standard/tools/builders/table/)
- Flinto (https://www.flinto.com/)
- Flexbox generator (https://mdbootstrap.com/docs/standard/tools/builders/flexbox/)
- Justinmind (https://www.justinmind.com/)
- Footer generator (https://mdbootstrap.com/docs/standard/tools/builders/footer/)
- Canva (https://www.canva.com/about/)
- Navbar generator (https://mdbootstrap.com/docs/standard/tools/builders/navbar/)
- Orion Icon (https://orioniconlibrary.com/)
- Typography generator (https://mdbootstrap.com/docs/standard/tools/builders/typography/)
- Squoosh (https://squoosh.app/)
- Grid generator (https://mdbootstrap.com/docs/standard/tools/builders/grid/)
- Animation generator (https://mdbootstrap.com/docs/standard/tools/builders/animations/)
- Ripple generator (https://mdbootstrap.com/docs/standard/tools/builders/ripple/)
- Button Generator (https://bootstrapbuttons.com)
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Bootstrap 4 resources
Resources compatible with the older Bootstrap v4 (based on jQuery).
Components
UI Kits & libraries
- :four: Bootstrap 4 & jQuery 3 (https://mdbootstrap.com/docs/b4/jquery/) - 600+ free material UI components & templates. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :four: Bootstrap 4 & Angular 10 (https://mdbootstrap.com/docs/b4/angular/) - 400+ free material UI components & templates. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :four: Bootstrap 4 & React 16 (https://mdbootstrap.com/docs/b4/react/) - 500+ free material UI components & templates. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :four: Bootstrap 4 & Vue 2 (https://mdbootstrap.com/docs/b4/vue/) - 400+ free material UI components & templates. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :four: Bootstrap-Vue (https://github.com/pi0/bootstrap-vue) Complete Components For Vue.js 2. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :four: ng-bootstrap (https://github.com/ng-bootstrap/ng-bootstrap) Angular directives specific to Bootstrap 4 (Angular 2) !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :four: reactstrap (https://github.com/reactstrap/reactstrap) - Stateless React Components for Bootstrap 4. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) (https://opensource.org/licenses/MIT)
- :four: CodexUI (https://codexui.com/) 1 (#full-disclosure) - Vanilla Bootstrap components that require no extra CSS or Javascript to use. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg)
(https://opensource.org/licenses/MIT)
- :four: Pixel UI Kit (https://github.com/themesberg/pixel-bootstrap-ui-kit) - Premium collection of Bootstrap components and 4 example pages. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg)
(https://opensource.org/licenses/MIT)
- :four: django-bootstrap-customizer (https://github.com/johnfraney/django-bootstrap-customizer) - Customizable Bootstrap 4 generator for Django. !License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg)
(https://opensource.org/licenses/MIT)
Templates
IMPORTANT: For items marked with !custom license (https://img.shields.io/badge/License-Custom-red.svg) please visit their site to learn more about their license.
Single Page Templates
│Version│ Name │ Screenshot │ Description │ LicenseInUse │
├───────┼─────────────────────────────────────────────────────────┼──────────────────────────────────────┼──────────────────────────────────────┼──────────────────────────────────────────────────────────────────────────────────────────┤
│:four: │Landing Page (http://startbootstrap.com/landing-page) │!landing-page │Landing Page is a responsive landing │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │(./screenshots/spa-landing-page.png) │page theme for Bootstrap 4. │(https://opensource.org/licenses/MIT) │
│:four: │Stylish portfolio │!stylish │Stylish Portfolio is a one page │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(http://startbootstrap.com/template-overviews/stylish-por│(./screenshots/spa-stylish.png) │Bootstrap portfolio theme with off │(https://opensource.org/licenses/MIT) │
│ │tfolio/) │ │canvas navigation and smooth scrolling│ │
│ │ │ │through content sections. │ │
│:four: │agency │!agency (./screenshots/spa-agency.png)│Agency is a one page agency portfolio │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (http://startbootstrap.com/template-overviews/agency/) │ │theme for Bootstrap created by Start │(https://opensource.org/licenses/MIT) │
│ │ │ │Bootstrap. This theme features several│ │
│ │ │ │content sections, a responsive │ │
│ │ │ │portfolio grid with hover effects, │ │
│ │ │ │full page portfolio item modals, a │ │
│ │ │ │responsive timeline, and a working PHP│ │
│ │ │ │contact form. │ │
│:four: │freelancer │!freelancer │Freelancer is a one page Bootstrap │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(http://startbootstrap.com/template-overviews/freelancer/│(./screenshots/spa-freelancer.png) │portfolio theme for freelancers. │(https://opensource.org/licenses/MIT) │
│ │) │ │ │ │
│:four: │Grayscale │!grayscale │Grayscale is a multipurpose, one page │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(http://startbootstrap.com/template-overviews/grayscale/)│(./screenshots/spa-grayscale.png) │website theme featuring a dark layout │(https://opensource.org/licenses/MIT) │
│ │ │ │along with smooth scrolling page │ │
│ │ │ │animations. │ │
Admin Dashboards
│Version│ Name │ Screenshot │ Description │ LicenseInUse │
├───────┼───────────────────────────────────────────┼──────────────────────────────────────┼───────────────────────────────────────────────────────┼───────────────────────────────────────────────────────────────────────────────────────┤
│:four: │ngx-admin │!ng3-admin │Admin dashboard template based on Nebular framework │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://github.com/akveo/ngx-admin) │(https://i.imgur.com/YgawGED.png) │(Angular 4+, Bootstrap 4) previously known as ng2-admin│(https://opensource.org/licenses/MIT) │
│:four: │react-reduction │!react-reduction │Admin Dashboard built with ReactJS + Bootstrap4 + │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://github.com/reduction-admin/react-r│(./screenshots/reduction-admin-compact│Create React App │(https://opensource.org/licenses/MIT) │
│ │eduction) │.png) │ │ │
│:four: │sb-admin │!sb-admin (./screenshots/sb-admin.png)│SB Admin is a free to download Bootstrap admin │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://startbootstrap.com/template-overvi│ │template. This template uses the defaul Bootstrap 4 │(https://opensource.org/licenses/MIT) │
│ │ews/sb-admin/) │ │styles along with a variety of powerful jQuery plugins │ │
│ │ │ │to create a pwerful framework for creating admin │ │
│ │ │ │panels, web apps, or back-end dashboards. │ │
│:four: │Tabler (https://tabler.io/) │!tabler (./screenshots/tabler.png) │Premium and Open Source dashboard template with │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │ │responsive and high quality UI built on Bootstrap 4. │(https://opensource.org/licenses/MIT) │
Other Themes
│Version│ Name │ Screenshot │ Description │ LicenseInUse │
├───────┼──────────────────────────────────────────────────────┼────────────────────────────────────────────────────┼───────────────────────────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│:four: │DevExpress OfficeWhite │!word │A Twitter Bootstrap theme inspired │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://github.com/DevExpress/bootstrap-themes/) │(./screenshots/DevExpressOfficeWhiteBootstrapTheme_B│by 'Office365' │(https://opensource.org/licenses/MIT) │
│ │ │uttons.png) │ │ │
│:four: │DevExpress Purple │!word │A Twitter Bootstrap theme with │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://github.com/DevExpress/bootstrap-themes/) │(./screenshots/DevExpressPurpleBootstrapTheme_Button│modern design │(https://opensource.org/licenses/MIT) │
│ │ │s.png) │ │ │
│:four: │Windows 95 Bootstrap │!Windows 95 Bootstrap UI Kit Screenshot │Original Windows 95 Elements UI Kit│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://github.com/themesberg/windows-95-ui-kit) │(https://themesberg.s3.us-east-2.amazonaws.com/publi│ │(https://opensource.org/licenses/MIT) │
│ │ │c/products/windows-95/windows-95-bootstrap-preview.g│ │ │
│ │ │if) │ │ │
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Info
Contributions
!PRs Welcome (https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square) (http://makeapullrequest.com)
To contibute please see the contributing.md (contributing.md) document.
Bootstrap version is denoted by :four: or :five: emoji.
We do not recommend you use outdated frameworks, so Bootstrap 3 entries are no longer allowed.
If you have multiple versions of your resource, please include the highest version only, or include each of them as a separate entry.
License
!Creative Commons License (http://i.creativecommons.org/l/by/4.0/88x31.png) (http://creativecommons.org/licenses/by/4.0/)
cc-by-4 - Too Long Didn't Read Version (https://tldrlegal.com/license/creative-commons-attribution-4.0-international-(cc-by-4)).
Maintainers
List started with :heart: by therebelrobot (https://github.com/therebelrobot).
!Twitter Follow (https://img.shields.io/twitter/follow/therebelrobot.svg?style=social&label=therebelrobot) (https://twitter.com/therebelrobot)
List maintained with :heart: by filipkappa (https://github.com/filipkappa).
Contact filipkappa or file an issue to contact maintainers.