Files
awesome-awesomeness/html/bootstrap.html
2025-07-18 23:13:11 +02:00

1027 lines
39 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<p align="center">
<img src="./screenshots/bootstrap5.png" alt="bootstrap-stack" width="400" />
</p>
<h1 id="awesome-bootstrap-awesome-license-cc-by-4.0">Awesome Bootstrap
<a href="https://github.com/sindresorhus/awesome"><img
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
alt="Awesome" /></a> <a
href="https://creativecommons.org/licenses/by/4.0/"><img
src="https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg"
alt="License: CC BY 4.0" /></a></h1>
<p>:sparkles: Awesome - A curated list of amazing Bootstrap templates,
plugins, UI Kits, tools and themes.</p>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#components">Bootstrap 5 resources</a>
<ul>
<li><a href="#components">Components</a></li>
<li><a href="#ui-kits--libraries">UI Kits</a></li>
<li><a href="#templates">Templates</a>
<ul>
<li><a href="#single-page-templates">Single Page Templates</a></li>
<li><a href="#admin-dashboards">Admin Dashboards</a></li>
<li><a href="#popular-website-clones">Popular website clones</a></li>
</ul></li>
<li><a href="#playgrounds">Playgrounds</a></li>
<li><a href="#design-tools">Design Tools</a></li>
</ul></li>
<li><a href="#bootstrap-4-resources">Bootstrap 4 resources</a>
<ul>
<li><a href="#ui-kits--libraries-1">UI Kits</a></li>
<li><a href="#templates-1">Templates</a>
<ul>
<li><a href="#single-page-templates-1">Single Page Templates</a></li>
<li><a href="#admin-dashboards-1">Admin Dashboards</a></li>
<li><a href="#other-themes">Other themes</a></li>
</ul></li>
</ul></li>
<li><a href="#info">Info</a>
<ul>
<li><a href="#contributions">Contributions</a></li>
<li><a href="#license">License</a></li>
<li><a href="#license">Maintainers</a></li>
</ul></li>
</ul>
<hr />
<h1 id="bootstrap-5-resources">Bootstrap 5 resources</h1>
<p>Resources compatible with the latest Bootstrap v5 (based on vanilla
JavaScript).</p>
<h2 id="components">Components</h2>
<ul>
<li>:five: <a
href="https://mdbootstrap.com/docs/standard/components/cards/">Card
UX/UI</a> - Discover 20+ predefined templates or generate your custom
card. <a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:five: <a
href="https://mdbootstrap.com/docs/standard/navigation/footer/">Ultimate
Footer</a> - the last but not least. Learn how the bottom of your page
should be at the top of your priorities <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:five: <a
href="https://mdbootstrap.com/docs/standard/data/tables/">Tables
Generator &amp; Templates</a> - Use 10+ templates and present your data
in a more accessible way or generate your own table</li>
<li>:five: <a
href="https://github.com/wenzhixin/bootstrap-table">boostrap-table</a> -
An extended Bootstrap table with radio, checkbox, sort, pagination, and
other added features. <a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:five: <a href="https://perfectscrollbar.com/">perfect-scrollbar</a>
- Minimalistic but perfect custom scrollbar plugin. <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:five: <a
href="https://github.com/flatlogic/bootstrap-tabcollapse">Tab
Collapse</a> - MSmall bootstrap plugin that switches bootstrap tabs
component to collapse component for small screens.</li>
</ul>
<h2 id="ui-kits-libraries">UI Kits &amp; libraries</h2>
<p><em>These arent full out-of-the-box themes, rather, they are
components you can use in your own creations.</em> - :five: <a
href="https://github.com/mdbootstrap/mdb-ui-kit">Material Design for
Bootstrap</a> - 700+ free material UI components &amp; templates. <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a> - :five: <a
href="https://mdbootstrap.com/docs/react/">Material Design for React</a>
- 700+ free material UI components &amp; templates. <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a> - :five: <a
href="https://mdbootstrap.com/docs/angular/">Material Design for
Angular</a> - 700+ free material UI components &amp; templates. <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a> - :five: <a
href="https://mdbootstrap.com/docs/vue/">Material Design for Vue</a> -
700+ free material UI components &amp; templates. <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a> - :five: <a
href="https://bootstrap-ecommerce.com/">Bootstrap E-commerce</a> - A
powerful html library to develop e-commerce web sites with a huge set of
components and templates. (free with code <code>awesome</code>) - :five:
<a href="https://bootstrap-ecommerce.com/">Bootstrap E-commerce
Admin</a> - 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 <code>awesome</code>) - :five: <a
href="https://bootstrap-menu.com/">Bootstrap Menu</a> - A collection of
templates for different Bootstrap 5 menu &amp; submenu configurations.
(free with code <code>awesome</code>)</p>
<h2 id="templates">Templates</h2>
<p><strong>IMPORTANT:</strong> For items marked with <img
src="https://img.shields.io/badge/License-Custom-red.svg"
alt="custom license" /> please visit their site to learn more about
their license.</p>
<h3 id="single-page-templates">Single Page Templates</h3>
<table>
<colgroup>
<col style="width: 15%" />
<col style="width: 9%" />
<col style="width: 22%" />
<col style="width: 25%" />
<col style="width: 27%" />
</colgroup>
<thead>
<tr class="header">
<th>Version</th>
<th>Name</th>
<th>Screenshot</th>
<th>Description</th>
<th>LicenseInUse</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515510/">Jumbtron</a></td>
<td><img src="./screenshots/jumbtron-template.jpg"
alt="Jumbtron" /></td>
<td>Responsive jumbotron built with the latest Bootstrap 5. A starter
template with a full-width centered card at the top.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515508/">Blog
Categories</a></td>
<td><img src="./screenshots/blog-categories.jpg"
alt="Blog Categories" /></td>
<td>Categories page with the latest Bootstrap 5. A starter template for
showing the categories of a given blog, magazine, or other kinds of
pages.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515552/">Pricing</a></td>
<td><img src="./screenshots/pricing.jpg" alt="Pricing" /></td>
<td>Responsive pricing example built with the latest Bootstrap 5. This
template contains tiers for different prices of products, subscriptions,
or saas.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515504/">Blog</a></td>
<td><img src="./screenshots/blog.jpg" alt="Blog" /></td>
<td>Responsive blog built with the latest Bootstrap 5. Open source
template for personal or commercial blog.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515515/">Coming
Soon</a></td>
<td><img src="./screenshots/coming-soon.jpg" alt="Coming Soon" /></td>
<td>Responsive counter template built with the latest Bootstrap 5. It
counts down to the given date in a “coming soon” style.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbgo.io/marta-szymanska/mdb5-demo-free-fluent/free/components/full-demo.html">Fluent
Design</a></td>
<td><img src="./screenshots/fluent.jpg" alt="Fluent Design" /></td>
<td>Components in the newest Bootstrap 5 and Fluent Design. Completely
new design using the latest Bootstrap.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515540/">Login
page</a></td>
<td><img src="./screenshots/login.jpg" alt="Login page" /></td>
<td>Responsive, login page template built with the latest Bootstrap 5.
Signup/Registration form examples with validation.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515523/">Video
full-page Cover</a></td>
<td><img src="./screenshots/video-full-cover.jpg" alt="BlogPost" /></td>
<td>Responsive fullscreen video template built with the latest Bootstrap
5. This full-page video example will take up the entire viewport of your
user screen.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a href="https://www.bootstarters.com/">Bootstarters</a></td>
<td><img src="./screenshots/bootstarters.png" alt="bootstarters" /></td>
<td>Bootstarters - Free templates built with the latest Bootstrap 5 and
styled in accordance with Material Design 2.0 guidelines</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2922363">Dark
Theme</a></td>
<td><img src="./screenshots/dark-theme.jpg" alt="theme-dark" /></td>
<td>Dark theme for the components of the newest Bootstrap 5. Carefully
selected colors, together creating a beautiful dark composition.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515519/">Page
with Carousel</a></td>
<td><img src="./screenshots/page-carousel.jpg"
alt="Carousel-Page" /></td>
<td>Responsive, background-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.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515521">Image
full-page cover</a></td>
<td><img src="./screenshots/image-cover.jpg"
alt="ImageCoverPage" /></td>
<td>Responsive, background-image template built with the latest
Bootstrap 5. Use this example of a full-page image as a header of your
page.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515550/">Blog
Post</a></td>
<td><img src="./screenshots/blog-post.jpg" alt="BlogPost" /></td>
<td>Responsive, blogpost example built with the latest Bootstrap 5. Use
this starter template for Bootstrap blogs, articles, and posts.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2515545/">Magazine</a></td>
<td><img src="./screenshots/magazine.jpg" alt="Magazine" /></td>
<td>Responsive magazine template built with the latest Bootstrap 5. News
aggregator frontpage for articles, blogposts, and more.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
</tbody>
</table>
<h3 id="admin-dashboards">Admin Dashboards</h3>
<table>
<colgroup>
<col style="width: 15%" />
<col style="width: 9%" />
<col style="width: 22%" />
<col style="width: 25%" />
<col style="width: 27%" />
</colgroup>
<thead>
<tr class="header">
<th>Version</th>
<th>Name</th>
<th>Screenshot</th>
<th>Description</th>
<th>LicenseInUse</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://startbootstrap.com/template-overviews/sb-admin-2/">Bootstrap
5 Admin Template</a></td>
<td><img src="./screenshots/admin-bootstrap5.jpg"
alt="Bootstrap 5 Admin Template" /></td>
<td>Responsive admin dashboard built with the latest Bootstrap 5.
Control panel theme ideal for admin pages, analytics &amp; configuration
panels.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://themeselection.com/products/sneat-free-bootstrap-html-admin-template/">Sneat
Free Bootstrap 5 Admin Template</a></td>
<td><img
src="./screenshots/sneat-free-bootstrap-5-html-admin-template.png"
alt="Sneat Free Bootstrap 5 Admin Template" /></td>
<td>Open-source &amp; Easy to use Bootstrap 5 HTML Admin Template with
Elegant Design &amp; Unique Layout.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://www.wrappixel.com/templates/materialpro-lite/">MaterialPro
Bootstrap Lite</a></td>
<td><img src="./screenshots/materialpro-bootstrap-lite-y.jpg"
alt="MaterialPro Bootstrap Lite" /></td>
<td>The Best &amp; Free Open-Source MaterialPro Bootstrap Templates with
Features and Premium Version Option</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://adminmart.com/product/modernize-free-bootstrap-5-admin-template/">Modernize
Free Bootstrap 5 Admin Template</a></td>
<td><img src="./screenshots/modenize-free-bootstrap-admin-template.jpg"
alt="Modernize Free Bootstrap 5 Admin Template" /></td>
<td>Free Open-Source Modernize Bootstrap Templates with Good Features
and Premium Version Option</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://themeselection.com/item/materio-free-bootstrap-html-admin-template/">Materio
Free Bootstrap 5 Admin Template</a></td>
<td><img
src="./screenshots/materio-bootstrap-html-admin-template-github.png"
alt="Materio Free Bootstrap 5 Admin Template" /></td>
<td>Open-source &amp; Easy to use Bootstrap 5 HTML Admin Template with
Elegant Design &amp; Unique Layout.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
</tbody>
</table>
<h3 id="popular-website-clones">Popular website clones</h3>
<table>
<colgroup>
<col style="width: 15%" />
<col style="width: 9%" />
<col style="width: 22%" />
<col style="width: 25%" />
<col style="width: 27%" />
</colgroup>
<thead>
<tr class="header">
<th>Version</th>
<th>Name</th>
<th>Screenshot</th>
<th>Description</th>
<th>LicenseInUse</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2867455">Twitter
newsfeed</a></td>
<td><img src="./screenshots/twitter-newsfeed.jpg" alt="word" /></td>
<td>The project includes a 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.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2867464">Tripadvisor
homepage</a></td>
<td><img src="./screenshots/tripadvisor-homepage.jpg"
alt="Tripadvisor homepage" /></td>
<td>The project includes a home page with one column layout with easy to
use navigation in shortcuts under the navbar. The page includes also a
search form &amp; number of cards with advised the best places to
rest.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2867452">Wikipedia
article page</a></td>
<td><img src="./screenshots/wikipedia-article-page.jpg"
alt="Wikipedia article page" /></td>
<td>The project includes a home page with typical, advanced eCommerce
navigation (double navbar + sidenav) and multiple media containers for
presenting products.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847268">IMDB
homepage</a></td>
<td><img src="./screenshots/imdb-homepage.jpg"
alt="IMDB homepage" /></td>
<td>The project includes a home page with typical, advanced navigation
and multiple media containers for presenting news and movies.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847266">Airbnb</a></td>
<td><img src="./screenshots/airbnb.jpg" alt="Airbnb" /></td>
<td>The project includes two-column layout with advanced navigation of
multiple media containers for presenting places to stay in area you can
choose on interactive map.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847260">Facebook
messenger</a></td>
<td><img src="./screenshots/facebook-messenger.jpg"
alt="Facebook messenger" /></td>
<td>The project includes 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.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847258">Facebook
profile page</a></td>
<td><img src="./screenshots/facebook-profile-page.jpg"
alt="Facebook profile page" /></td>
<td>The project includes the users 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.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847257">Instagram
newsfeed</a></td>
<td><img src="./screenshots/instagram-newsfeed.jpg"
alt="Instagram newsfeed" /></td>
<td>The project includes the users newsfeed, along with the typical
two-column layout, story row and navigation.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847265">YouTube
homepage</a></td>
<td><img src="./screenshots/youtube-homepage.jpg"
alt="YouTube homepage" /></td>
<td>The project includes a home page with typical, advanced YouTube
navigation and multiple media containers for presenting videos.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847259">Trello
board</a></td>
<td><img src="./screenshots/trello-board.jpg" alt="Trello board" /></td>
<td>The project includes trello board with a typical scrum system
arrangement and draggable tasks.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847264">Alibaba
homepage</a></td>
<td><img src="./screenshots/alibaba-homepage.jpg"
alt="Alibaba homepage" /></td>
<td>The project includes a home page with typical, advanced eCommerce
navigation (double navbar + sidenav) and multiple media containers for
presenting products.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847263">Facebook
newsfeed</a></td>
<td><img src="./screenshots/facebook-newsfeed.jpg"
alt="Facebook newsfeed" /></td>
<td>The project includes the users newsfeed, along with the typical
three-column layout and social media navigation.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:five:</td>
<td><a
href="https://mdbootstrap.com/snippets/standard/mdb-lab/2847262">Amazon
homepage</a></td>
<td><img src="./screenshots/amazon-homepage.jpg"
alt="Amazon homepage" /></td>
<td>The project includes a home page with typical, advanced eCommerce
navigation (double navbar + sidenav) and multiple media containers for
presenting products.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
</tbody>
</table>
<h3 id="playgrounds-hosting">Playgrounds &amp; hosting</h3>
<ul>
<li><a href="https://www.codeply.com/p/3NtYJhNZCd">Codeply</a> - an
online editor that includes dozens of frameworks, starter templates and
code snippets supports Vuetify, Bulma, Bootstrap, Foundation, MDB,
Angular and Vue</li>
<li><a href="https://mdbootstrap.com/snippets/">Snippets Playground</a>
- free &amp; fast online editor dedicated to Bootstrap, supports
integrations with React, Angular, Vue and MDB, full of community crafted
components and design blocks</li>
<li><a href="https://codepen.io/">CodePen</a> - social development
environment for front-end designers and developers</li>
<li><a href="https://jsfiddle.net/">JSFiddle</a> - an online IDE service
and online community for testing and showcasing user-created and
collaborational HTML, CSS and JavaScript code snippets</li>
<li><a href="https://mdbgo.com/">MDB GO/CLI</a> - frontend + backend
environment. Create, deploy and host anything with a single command,
offers free hosting &amp; predesigned backend boilerplates integrated
with <strong>Bootstrap</strong>, Angular, React, Vue, Laravel,
WordPress, Express.js, MongoDB, MySQL, Tailwind, Express.js, SocketIO,
Passport and more.</li>
</ul>
<h3 id="design-tools">Design Tools</h3>
<ul>
<li><a href="https://mdbootstrap.com/builder/">Drag &amp; Drop
Builder</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/lab/">Lab
Templates</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/design/color-schemes/">Color
Schemes generator</a></li>
<li><a href="https://www.proofhub.com/">ProofHub</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/design/logo-generator/">Logo
generator</a></li>
<li><a href="https://filestage.io/">Filestage</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/design/masks/">CSS
Masks &amp; Glassmorphism Generator</a></li>
<li><a href="https://www.logaster.com/logo/">Logaster</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/design/instagram-filters/">Instagram
filters CSS generator</a></li>
<li><a href="https://coolors.co/">Coolors Color scheme
generator</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/design/gradients/">CSS
gradients generator</a></li>
<li><a href="https://paletton.com/">Palleton A color scheme</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/design/fancy-border-radius/">Fancy
border radius generator</a></li>
<li><a href="https://www.diigo.com/">Diigo</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/meta-tags/">Meta
tags generator</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/cards/">Cards
generator</a></li>
<li><a href="https://pixlr.com/">Pixlr</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/buttons/">Buttons
generator</a></li>
<li><a href="https://www.invisionapp.com/studio">InVision
Studio</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/charts/">Charts
creator</a></li>
<li><a href="https://marvelapp.com/">Marvel</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/design/shadows/">Shadows
generator</a></li>
<li><a href="https://www.figma.com/">Figma</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/design/waves/">SVG
waves generator</a></li>
<li><a href="https://affinity.serif.com/en-gb/designer/">Affinity
Designer</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/datatables/">Datatables
builder</a></li>
<li><a href="https://www.uxpin.com/">UXPin</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/alerts/">Alerts
generator</a></li>
<li><a href="https://proto.io/">Proto.io</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/modals/">Modals
generator</a></li>
<li><a
href="https://www.creativebloq.com/features/best-web-design-tools">MockFlow</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/icons/">Icons
generator</a></li>
<li><a href="https://www.adobe.com/uk/products/comp.html">Adobe
Comp</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/table/">Table
generator</a></li>
<li><a href="https://www.flinto.com/">Flinto</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/flexbox/">Flexbox
generator</a></li>
<li><a href="https://www.justinmind.com/">Justinmind</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/footer/">Footer
generator</a></li>
<li><a href="https://www.canva.com/about/">Canva</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/navbar/">Navbar
generator</a></li>
<li><a href="https://orioniconlibrary.com/">Orion Icon</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/typography/">Typography
generator</a></li>
<li><a href="https://squoosh.app/">Squoosh</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/grid/">Grid
generator</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/animations/">Animation
generator</a></li>
<li><a
href="https://mdbootstrap.com/docs/standard/tools/builders/ripple/">Ripple
generator</a></li>
<li><a href="https://bootstrapbuttons.com">Button Generator</a></li>
</ul>
<hr />
<h1 id="bootstrap-4-resources">Bootstrap 4 resources</h1>
<p>Resources compatible with the older Bootstrap v4 (based on
jQuery).</p>
<h2 id="components-1">Components</h2>
<h2 id="ui-kits-libraries-1">UI Kits &amp; libraries</h2>
<ul>
<li>:four: <a href="https://mdbootstrap.com/docs/b4/jquery/">Bootstrap 4
&amp; jQuery 3</a> - 600+ free material UI components &amp; templates.
<a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:four: <a href="https://mdbootstrap.com/docs/b4/angular/">Bootstrap
4 &amp; Angular 10</a> - 400+ free material UI components &amp;
templates. <a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:four: <a href="https://mdbootstrap.com/docs/b4/react/">Bootstrap 4
&amp; React 16</a> - 500+ free material UI components &amp; templates.
<a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:four: <a href="https://mdbootstrap.com/docs/b4/vue/">Bootstrap 4
&amp; Vue 2</a> - 400+ free material UI components &amp; templates. <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:four: <a
href="https://github.com/pi0/bootstrap-vue">Bootstrap-Vue</a> Complete
Components For Vue.js 2. <sup>2.x compatible</sup> <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:four: <a
href="https://github.com/ng-bootstrap/ng-bootstrap">ng-bootstrap</a>
Angular directives specific to Bootstrap 4 (Angular 2) <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:four: <a
href="https://github.com/reactstrap/reactstrap">reactstrap</a> -
Stateless React Components for Bootstrap 4. <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:four: <a href="https://codexui.com/">CodexUI</a> <a
href="#full-disclosure">[1]</a> - Vanilla Bootstrap components that
require no extra CSS or Javascript to use. <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:four: <a
href="https://github.com/themesberg/pixel-bootstrap-ui-kit">Pixel UI
Kit</a> - Premium collection of Bootstrap components and 4 example
pages. <a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
<li>:four: <a
href="https://github.com/johnfraney/django-bootstrap-customizer">django-bootstrap-customizer</a>
- Customizable Bootstrap 4 generator for Django. <a
href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></li>
</ul>
<h2 id="templates-1">Templates</h2>
<p><strong>IMPORTANT:</strong> For items marked with <img
src="https://img.shields.io/badge/License-Custom-red.svg"
alt="custom license" /> please visit their site to learn more about
their license.</p>
<h3 id="single-page-templates-1">Single Page Templates</h3>
<table>
<colgroup>
<col style="width: 15%" />
<col style="width: 9%" />
<col style="width: 22%" />
<col style="width: 25%" />
<col style="width: 27%" />
</colgroup>
<thead>
<tr class="header">
<th>Version</th>
<th>Name</th>
<th>Screenshot</th>
<th>Description</th>
<th>LicenseInUse</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>:four:</td>
<td><a href="http://startbootstrap.com/landing-page">Landing
Page</a></td>
<td><img src="./screenshots/spa-landing-page.png"
alt="landing-page" /></td>
<td>Landing Page is a responsive landing page theme for Bootstrap
4.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:four:</td>
<td><a
href="http://startbootstrap.com/template-overviews/stylish-portfolio/">Stylish
portfolio</a></td>
<td><img src="./screenshots/spa-stylish.png" alt="stylish" /></td>
<td>Stylish Portfolio is a one page Bootstrap portfolio theme with off
canvas navigation and smooth scrolling through content sections.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:four:</td>
<td><a
href="http://startbootstrap.com/template-overviews/agency/">agency</a></td>
<td><img src="./screenshots/spa-agency.png" alt="agency" /></td>
<td>Agency is a one page agency portfolio theme for Bootstrap created by
Start 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.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:four:</td>
<td><a
href="http://startbootstrap.com/template-overviews/freelancer/">freelancer</a></td>
<td><img src="./screenshots/spa-freelancer.png" alt="freelancer" /></td>
<td>Freelancer is a one page Bootstrap portfolio theme for
freelancers.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:four:</td>
<td><a
href="http://startbootstrap.com/template-overviews/grayscale/">Grayscale</a></td>
<td><img src="./screenshots/spa-grayscale.png" alt="grayscale" /></td>
<td>Grayscale is a multipurpose, one page website theme featuring a dark
layout along with smooth scrolling page animations.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
</tbody>
</table>
<h3 id="admin-dashboards-1">Admin Dashboards</h3>
<table>
<colgroup>
<col style="width: 15%" />
<col style="width: 9%" />
<col style="width: 22%" />
<col style="width: 25%" />
<col style="width: 27%" />
</colgroup>
<thead>
<tr class="header">
<th>Version</th>
<th>Name</th>
<th>Screenshot</th>
<th>Description</th>
<th>LicenseInUse</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>:four:</td>
<td><a href="https://github.com/akveo/ngx-admin">ngx-admin</a></td>
<td><img src="https://i.imgur.com/YgawGED.png" alt="ng3-admin" /></td>
<td>Admin dashboard template based on Nebular framework (Angular 4+,
Bootstrap 4) previously known as ng2-admin</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:four:</td>
<td><a
href="https://github.com/reduction-admin/react-reduction">react-reduction</a></td>
<td><img src="./screenshots/reduction-admin-compact.png"
alt="react-reduction" /></td>
<td>Admin Dashboard built with ReactJS + Bootstrap4 + Create React
App</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:four:</td>
<td><a
href="https://startbootstrap.com/template-overviews/sb-admin/">sb-admin</a></td>
<td><img src="./screenshots/sb-admin.png" alt="sb-admin" /></td>
<td>SB Admin is a free to download Bootstrap admin template. This
template uses the defaul Bootstrap 4 styles along with a variety of
powerful jQuery plugins to create a pwerful framework for creating admin
panels, web apps, or back-end dashboards.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:four:</td>
<td><a href="https://tabler.io/">Tabler</a></td>
<td><img src="./screenshots/tabler.png" alt="tabler" /></td>
<td>Premium and Open Source dashboard template with responsive and high
quality UI built on Bootstrap 4.</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
</tbody>
</table>
<h3 id="other-themes">Other Themes</h3>
<table>
<colgroup>
<col style="width: 15%" />
<col style="width: 9%" />
<col style="width: 22%" />
<col style="width: 25%" />
<col style="width: 27%" />
</colgroup>
<thead>
<tr class="header">
<th>Version</th>
<th>Name</th>
<th>Screenshot</th>
<th>Description</th>
<th>LicenseInUse</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>:four:</td>
<td><a href="https://github.com/DevExpress/bootstrap-themes/">DevExpress
OfficeWhite</a></td>
<td><img
src="./screenshots/DevExpressOfficeWhiteBootstrapTheme_Buttons.png"
alt="word" /></td>
<td>A Twitter Bootstrap theme inspired by Office365</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="even">
<td>:four:</td>
<td><a href="https://github.com/DevExpress/bootstrap-themes/">DevExpress
Purple</a></td>
<td><img src="./screenshots/DevExpressPurpleBootstrapTheme_Buttons.png"
alt="word" /></td>
<td>A Twitter Bootstrap theme with modern design</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
<tr class="odd">
<td>:four:</td>
<td><a href="https://github.com/themesberg/windows-95-ui-kit">Windows 95
Bootstrap</a></td>
<td><img
src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/windows-95/windows-95-bootstrap-preview.gif"
alt="Windows 95 Bootstrap UI Kit Screenshot" /></td>
<td>Original Windows 95 Elements UI Kit</td>
<td><a href="https://opensource.org/licenses/MIT"><img
src="https://img.shields.io/badge/License-MIT-yellow.svg"
alt="License: MIT" /></a></td>
</tr>
</tbody>
</table>
<hr />
<h1 id="info">Info</h1>
<h2 id="contributions">Contributions</h2>
<p><a href="http://makeapullrequest.com"><img
src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square"
alt="PRs Welcome" /></a></p>
<p>To contibute please see the <a
href="contributing.md">contributing.md</a> 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.</p>
<h2 id="license">License</h2>
<p><a href="http://creativecommons.org/licenses/by/4.0/"><img
src="http://i.creativecommons.org/l/by/4.0/88x31.png"
alt="Creative Commons License" /></a></p>
<p><a
href="https://tldrlegal.com/license/creative-commons-attribution-4.0-international-(cc-by-4)">cc-by-4
- Too Long Didnt Read Version</a>.</p>
<h2 id="maintainers">Maintainers</h2>
<p>List started with :heart: by <a
href="https://github.com/therebelrobot">therebelrobot</a>.</p>
<p><a href="https://twitter.com/therebelrobot"><img
src="https://img.shields.io/twitter/follow/therebelrobot.svg?style=social&amp;label=therebelrobot"
alt="Twitter Follow" /></a></p>
<p>List maintained with :heart: by <a
href="https://github.com/filipkappa">filipkappa</a>.</p>
<p>Contact filipkappa or file an issue to contact maintainers.</p>
<p><a
href="https://github.com/therebelrobot/awesome-bootstrap">bootstrap.md
Github</a></p>