286 KiB
286 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 jumbotron │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515510/) │(./screenshots/jumbtron-template.jpg) │built with the latest│(https://opensource.org/licenses/MIT) │
│ │ │ │Bootstrap 5. A │ │
│ │ │ │starter template with│ │
│ │ │ │a full-width centered│ │
│ │ │ │card at the top. │ │
│:five: │Blog Categories │!Blog Categories │Categories page with │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515508/) │(./screenshots/blog-categories.jpg) │the latest Bootstrap │(https://opensource.org/licenses/MIT) │
│ │ │ │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 pricing │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │ │example built with │(https://opensource.org/licenses/MIT) │
│ │ │ │the latest Bootstrap │ │
│ │ │ │5. This template │ │
│ │ │ │contains tiers for │ │
│ │ │ │different prices of │ │
│ │ │ │products, │ │
│ │ │ │subscriptions, or │ │
│ │ │ │saas. │ │
│:five: │Blog (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515504/) │!Blog (./screenshots/blog.jpg) │Responsive blog built│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │ │with the latest │(https://opensource.org/licenses/MIT) │
│ │ │ │Bootstrap 5. Open │ │
│ │ │ │source template for │ │
│ │ │ │personal or │ │
│ │ │ │commercial blog. │ │
│:five: │Coming Soon │!Coming Soon │Responsive counter │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515515/) │(./screenshots/coming-soon.jpg) │template built with │(https://opensource.org/licenses/MIT) │
│ │ │ │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 in the │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://mdbgo.io/marta-szymanska/mdb5-demo-free-fluent/free/components/│ │newest Bootstrap 5 │(https://opensource.org/licenses/MIT) │
│ │full-demo.html) │ │and Fluent Design. │ │
│ │ │ │Completely new design│ │
│ │ │ │using the latest │ │
│ │ │ │Bootstrap. │ │
│:five: │Login page │!Login page (./screenshots/login.jpg) │Responsive, login │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515540/) │ │page template built │(https://opensource.org/licenses/MIT) │
│ │ │ │with the latest │ │
│ │ │ │Bootstrap 5. │ │
│ │ │ │Signup/Registration │ │
│ │ │ │form examples with │ │
│ │ │ │validation. │ │
│:five: │Video full-page Cover │!BlogPost │Responsive fullscreen│!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515523/) │(./screenshots/video-full-cover.jpg) │video template built │(https://opensource.org/licenses/MIT) │
│ │ │ │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 │Bootstarters - Free │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │(./screenshots/bootstarters.png) │templates built with │(https://opensource.org/licenses/MIT) │
│ │ │ │the latest Bootstrap │ │
│ │ │ │5 and styled in │ │
│ │ │ │accordance with │ │
│ │ │ │Material Design 2.0 │ │
│ │ │ │guidelines │ │
│:five: │Dark Theme │!theme-dark │Dark theme for the │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2922363) │(./screenshots/dark-theme.jpg) │components of the │(https://opensource.org/licenses/MIT) │
│ │ │ │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-image │(https://opensource.org/licenses/MIT) │
│ │ │ │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-image │(https://opensource.org/licenses/MIT) │
│ │ │ │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, blogpost │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515550/) │ │example built with │(https://opensource.org/licenses/MIT) │
│ │ │ │the latest Bootstrap │ │
│ │ │ │5. Use this starter │ │
│ │ │ │template for │ │
│ │ │ │Bootstrap blogs, │ │
│ │ │ │articles, and posts. │ │
│:five: │Magazine │!Magazine (./screenshots/magazine.jpg) │Responsive magazine │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdbootstrap/2515545/) │ │template built with │(https://opensource.org/licenses/MIT) │
│ │ │ │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-admin-2/) │ │pon│(https://opensource.org/licenses/MIT) │
│ │ │ │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-bootstrap-html-│(./screenshots/sneat-free-bootstrap-5-html-admin-template.png) │n-s│(https://opensource.org/licenses/MIT) │
│ │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-bootstrap-5-admin│(./screenshots/modenize-free-bootstrap-admin-template.jpg) │e │(https://opensource.org/licenses/MIT) │
│ │-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-bootstrap-html-ad│(./screenshots/materio-bootstrap-html-admin-template-github.png) │n-s│(https://opensource.org/licenses/MIT) │
│ │min-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 │Description │ LicenseInUse │
├───────┼───────────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────────┼────────────┼───────────────────────────────────────────────────────────────────────────────────────────────────┤
│:five: │Twitter newsfeed │!word (./screenshots/twitter-newsfeed.jpg) │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2867455) │ │includes a │(https://opensource.org/licenses/MIT) │
│ │ │ │home page │ │
│ │ │ │with three │ │
│ │ │ │column │ │
│ │ │ │layout where│ │
│ │ │ │the two │ │
│ │ │ │extreme ones│ │
│ │ │ │are │ │
│ │ │ │responsible │ │
│ │ │ │for the │ │
│ │ │ │navigation, │ │
│ │ │ │while the │ │
│ │ │ │middle one i│ │
│ │ │ │cards you │ │
│ │ │ │can check │ │
│ │ │ │recent user │ │
│ │ │ │activity. │ │
│:five: │Tripadvisor homepage │!Tripadvisor homepage │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2867464) │(./screenshots/tripadvisor-homepage.jpg) │includes a │(https://opensource.org/licenses/MIT) │
│ │ │ │home page │ │
│ │ │ │with one │ │
│ │ │ │column │ │
│ │ │ │layout with │ │
│ │ │ │easy to use │ │
│ │ │ │navigation │ │
│ │ │ │in shortcuts│ │
│ │ │ │under the │ │
│ │ │ │navbar. The │ │
│ │ │ │page │ │
│ │ │ │includes │ │
│ │ │ │also a │ │
│ │ │ │search form │ │
│ │ │ │& number of │ │
│ │ │ │cards with │ │
│ │ │ │advised the │ │
│ │ │ │best places │ │
│ │ │ │to rest. │ │
│:five: │Wikipedia article page │!Wikipedia article page │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2867452) │(./screenshots/wikipedia-article-page.jpg) │includes a │(https://opensource.org/licenses/MIT) │
│ │ │ │home page │ │
│ │ │ │with │ │
│ │ │ │typical, │ │
│ │ │ │advanced │ │
│ │ │ │eCommerce │ │
│ │ │ │navigation │ │
│ │ │ │(double │ │
│ │ │ │navbar + │ │
│ │ │ │sidenav) and│ │
│ │ │ │multiple │ │
│ │ │ │media │ │
│ │ │ │containers │ │
│ │ │ │for │ │
│ │ │ │presenting │ │
│ │ │ │products. │ │
│:five: │IMDB homepage │!IMDB homepage (./screenshots/imdb-homepage.jpg) │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847268) │ │includes a │(https://opensource.org/licenses/MIT) │
│ │ │ │home page │ │
│ │ │ │with │ │
│ │ │ │typical, │ │
│ │ │ │advanced │ │
│ │ │ │navigation │ │
│ │ │ │and multiple│ │
│ │ │ │media │ │
│ │ │ │containers │ │
│ │ │ │for │ │
│ │ │ │presenting │ │
│ │ │ │news and │ │
│ │ │ │movies. │ │
│:five: │Airbnb (https://mdbootstrap.com/snippets/standard/mdb-lab/2847266) │!Airbnb (./screenshots/airbnb.jpg) │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │ │includes │(https://opensource.org/licenses/MIT) │
│ │ │ │two-column │ │
│ │ │ │layout with │ │
│ │ │ │advanced │ │
│ │ │ │navigation │ │
│ │ │ │of multiple │ │
│ │ │ │media │ │
│ │ │ │containers │ │
│ │ │ │for │ │
│ │ │ │presenting │ │
│ │ │ │places to │ │
│ │ │ │stay in area│ │
│ │ │ │you can │ │
│ │ │ │choose on │ │
│ │ │ │interactive │ │
│ │ │ │map. │ │
│:five: │Facebook messenger │!Facebook messenger │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847260) │(./screenshots/facebook-messenger.jpg) │includes │(https://opensource.org/licenses/MIT) │
│ │ │ │typical │ │
│ │ │ │three column│ │
│ │ │ │layout with │ │
│ │ │ │interface to│ │
│ │ │ │send │ │
│ │ │ │messages and│ │
│ │ │ │exchange │ │
│ │ │ │photos, │ │
│ │ │ │videos, │ │
│ │ │ │stickers, │ │
│ │ │ │audio, and │ │
│ │ │ │files, as │ │
│ │ │ │well as │ │
│ │ │ │react to │ │
│ │ │ │other users'│ │
│ │ │ │messages. │ │
│:five: │Facebook profile page │!Facebook profile page │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847258) │(./screenshots/facebook-profile-page.jpg) │includes the│(https://opensource.org/licenses/MIT) │
│ │ │ │user's │ │
│ │ │ │profile │ │
│ │ │ │page, along │ │
│ │ │ │with the top│ │
│ │ │ │navigation, │ │
│ │ │ │cover photo,│ │
│ │ │ │profile │ │
│ │ │ │photo, and │ │
│ │ │ │below that │ │
│ │ │ │typical │ │
│ │ │ │two-column │ │
│ │ │ │layout with │ │
│ │ │ │account │ │
│ │ │ │information,│ │
│ │ │ │and user │ │
│ │ │ │news feed. │ │
│:five: │Instagram newsfeed │!Instagram newsfeed │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847257) │(./screenshots/instagram-newsfeed.jpg) │includes the│(https://opensource.org/licenses/MIT) │
│ │ │ │user's │ │
│ │ │ │newsfeed, │ │
│ │ │ │along with │ │
│ │ │ │the typical │ │
│ │ │ │two-column │ │
│ │ │ │layout, │ │
│ │ │ │story row │ │
│ │ │ │and │ │
│ │ │ │navigation. │ │
│:five: │YouTube homepage │!YouTube homepage │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847265) │(./screenshots/youtube-homepage.jpg) │includes a │(https://opensource.org/licenses/MIT) │
│ │ │ │home page │ │
│ │ │ │with │ │
│ │ │ │typical, │ │
│ │ │ │advanced │ │
│ │ │ │YouTube │ │
│ │ │ │navigation │ │
│ │ │ │and multiple│ │
│ │ │ │media │ │
│ │ │ │containers │ │
│ │ │ │for │ │
│ │ │ │presenting │ │
│ │ │ │videos. │ │
│:five: │Trello board │!Trello board (./screenshots/trello-board.jpg) │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847259) │ │includes │(https://opensource.org/licenses/MIT) │
│ │ │ │trello board│ │
│ │ │ │with a │ │
│ │ │ │typical │ │
│ │ │ │scrum system│ │
│ │ │ │arrangement │ │
│ │ │ │and │ │
│ │ │ │draggable │ │
│ │ │ │tasks. │ │
│:five: │Alibaba homepage │!Alibaba homepage │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847264) │(./screenshots/alibaba-homepage.jpg) │includes a │(https://opensource.org/licenses/MIT) │
│ │ │ │home page │ │
│ │ │ │with │ │
│ │ │ │typical, │ │
│ │ │ │advanced │ │
│ │ │ │eCommerce │ │
│ │ │ │navigation │ │
│ │ │ │(double │ │
│ │ │ │navbar + │ │
│ │ │ │sidenav) and│ │
│ │ │ │multiple │ │
│ │ │ │media │ │
│ │ │ │containers │ │
│ │ │ │for │ │
│ │ │ │presenting │ │
│ │ │ │products. │ │
│:five: │Facebook newsfeed │!Facebook newsfeed │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847263) │(./screenshots/facebook-newsfeed.jpg) │includes the│(https://opensource.org/licenses/MIT) │
│ │ │ │user's │ │
│ │ │ │newsfeed, │ │
│ │ │ │along with │ │
│ │ │ │the typical │ │
│ │ │ │three-column│ │
│ │ │ │layout and │ │
│ │ │ │social media│ │
│ │ │ │navigation. │ │
│:five: │Amazon homepage │!Amazon homepage │The project │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://mdbootstrap.com/snippets/standard/mdb-lab/2847262) │(./screenshots/amazon-homepage.jpg) │includes a │(https://opensource.org/licenses/MIT) │
│ │ │ │home page │ │
│ │ │ │with │ │
│ │ │ │typical, │ │
│ │ │ │advanced │ │
│ │ │ │eCommerce │ │
│ │ │ │navigation │ │
│ │ │ │(double │ │
│ │ │ │navbar + │ │
│ │ │ │sidenav) and│ │
│ │ │ │multiple │ │
│ │ │ │media │ │
│ │ │ │containers │ │
│ │ │ │for │ │
│ │ │ │presenting │ │
│ │ │ │products. │ │
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 page theme │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │(./screenshots/spa-landing-page.png) │for Bootstrap 4. │(https://opensource.org/licenses/MIT) │
│:four: │Stylish portfolio │!stylish │Stylish Portfolio is a one page Bootstrap │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(http://startbootstrap.com/template-overviews/stylish-por│(./screenshots/spa-stylish.png) │portfolio theme with off canvas navigation and │(https://opensource.org/licenses/MIT) │
│ │tfolio/) │ │smooth scrolling through content sections. │ │
│:four: │agency │!agency (./screenshots/spa-agency.png)│Agency is a one page agency portfolio theme for │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (http://startbootstrap.com/template-overviews/agency/) │ │Bootstrap created by Start Bootstrap. This theme│(https://opensource.org/licenses/MIT) │
│ │ │ │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 portfolio │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(http://startbootstrap.com/template-overviews/freelancer/│(./screenshots/spa-freelancer.png) │theme for freelancers. │(https://opensource.org/licenses/MIT) │
│ │) │ │ │ │
│:four: │Grayscale │!grayscale │Grayscale is a multipurpose, one page website │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(http://startbootstrap.com/template-overviews/grayscale/)│(./screenshots/spa-grayscale.png) │theme featuring a dark layout along with smooth │(https://opensource.org/licenses/MIT) │
│ │ │ │scrolling page animations. │ │
Admin Dashboards
│Version│ Name │ Screenshot │ Description │ LicenseInUse │
├───────┼───────────────────────────────────────────┼──────────────────────────────────────┼─────────────────────────────────────────────────────────────────┼───────────────────────────────────────────────────────────────────────────────────────┤
│:four: │ngx-admin │!ng3-admin │Admin dashboard template based on Nebular framework (Angular 4+, │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ (https://github.com/akveo/ngx-admin) │(https://i.imgur.com/YgawGED.png) │Bootstrap 4) previously known as ng2-admin │(https://opensource.org/licenses/MIT) │
│:four: │react-reduction │!react-reduction │Admin Dashboard built with ReactJS + Bootstrap4 + Create React │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://github.com/reduction-admin/react-r│(./screenshots/reduction-admin-compact│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 template. This │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │(https://startbootstrap.com/template-overvi│ │template uses the defaul Bootstrap 4 styles along with a variety │(https://opensource.org/licenses/MIT) │
│ │ews/sb-admin/) │ │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 responsive and │!License: MIT (https://img.shields.io/badge/License-MIT-yellow.svg) │
│ │ │ │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_Buttons.png│by 'Office365' │(https://opensource.org/licenses/MIT) │
│ │ │) │ │ │
│: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_Buttons.png) │modern design │(https://opensource.org/licenses/MIT) │
│: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/public/products│ │(https://opensource.org/licenses/MIT) │
│ │ │/windows-95/windows-95-bootstrap-preview.gif) │ │ │
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
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.
bootstrap Github: https://github.com/therebelrobot/awesome-bootstrap