Awesome
<p align="center"><img src="./screenshots/bootstrap5.png" alt="bootstrap-stack" width="400" /></p>Awesome Bootstrap
:sparkles: Awesome - A curated list of amazing Bootstrap templates, plugins, UI Kits, tools and themes.
Contents
Bootstrap 5 resources
Resources compatible with the latest Bootstrap v5 (based on vanilla JavaScript).
Components
- :five: Card UX/UI - Discover 20+ predefined templates or generate your custom card.
- :five: Ultimate Footer - the last but not least. Learn how the bottom of your page should be at the top of your priorities
- :five: Tables Generator & Templates - Use 10+ templates and present your data in a more accessible way or generate your own table
- :five: boostrap-table - An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.
- :five: perfect-scrollbar - Minimalistic but perfect custom scrollbar plugin.
- :five: Tab Collapse - 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 - 700+ free material UI components & templates.
- :five: Material Design for React - 700+ free material UI components & templates.
- :five: Material Design for Angular - 700+ free material UI components & templates.
- :five: Material Design for Vue - 700+ free material UI components & templates.
- :five: Bootstrap E-commerce - 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 - 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 - A collection of templates for different Bootstrap 5 menu & submenu configurations. (free with code
awesome
)
Templates
IMPORTANT: For items marked with please visit their site to learn more about their license.
Single Page Templates
Version | Name | Screenshot | Description | LicenseInUse |
---|---|---|---|---|
:five: | Jumbtron | Responsive jumbotron built with the latest Bootstrap 5. A starter template with a full-width centered card at the top. | ||
:five: | Blog Categories | Categories page with the latest Bootstrap 5. A starter template for showing the categories of a given blog, magazine, or other kinds of pages. | ||
:five: | Pricing | Responsive pricing example built with the latest Bootstrap 5. This template contains tiers for different prices of products, subscriptions, or saas. | ||
:five: | Blog | Responsive blog built with the latest Bootstrap 5. Open source template for personal or commercial blog. | ||
:five: | Coming Soon | Responsive counter template built with the latest Bootstrap 5. It counts down to the given date in a "coming soon" style. | ||
:five: | Fluent Design | Components in the newest Bootstrap 5 and Fluent Design. Completely new design using the latest Bootstrap. | ||
:five: | Login page | Responsive, login page template built with the latest Bootstrap 5. Signup/Registration form examples with validation. | ||
:five: | Video full-page Cover | 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. | ||
:five: | Bootstarters | Bootstarters - Free templates built with the latest Bootstrap 5 and styled in accordance with Material Design 2.0 guidelines | ||
:five: | Dark Theme | Dark theme for the components of the newest Bootstrap 5. Carefully selected colors, together creating a beautiful dark composition. | ||
:five: | Page with Carousel | 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. | ||
:five: | Image full-page cover | Responsive, background-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 | Responsive, blogpost example built with the latest Bootstrap 5. Use this starter template for Bootstrap blogs, articles, and posts. | ||
:five: | Magazine | Responsive magazine template built with the latest Bootstrap 5. News aggregator frontpage for articles, blogposts, and more. |
Admin Dashboards
Version | Name | Screenshot | Description | LicenseInUse |
---|---|---|---|---|
:five: | Bootstrap 5 Admin Template | Responsive admin dashboard built with the latest Bootstrap 5. Control panel theme ideal for admin pages, analytics & configuration panels. | ||
:five: | Sneat Free Bootstrap 5 Admin Template | Open-source & Easy to use Bootstrap 5 HTML Admin Template with Elegant Design & Unique Layout. | ||
:five: | MaterialPro Bootstrap Lite | The Best & Free Open-Source MaterialPro Bootstrap Templates with Features and Premium Version Option | ||
:five: | Modernize Free Bootstrap 5 Admin Template | Free Open-Source Modernize Bootstrap Templates with Good Features and Premium Version Option | ||
:five: | Materio Free Bootstrap 5 Admin Template | Open-source & Easy to use Bootstrap 5 HTML Admin Template with Elegant Design & Unique Layout. |
Popular website clones
Version | Name | Screenshot | Description | LicenseInUse |
---|---|---|---|---|
:five: | Twitter newsfeed | 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. | ||
:five: | Tripadvisor homepage | 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 & number of cards with advised the best places to rest. | ||
:five: | Wikipedia article page | The project includes a home page with typical, advanced eCommerce navigation (double navbar + sidenav) and multiple media containers for presenting products. | ||
:five: | IMDB homepage | The project includes a home page with typical, advanced navigation and multiple media containers for presenting news and movies. | ||
:five: | Airbnb | 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. | ||
:five: | Facebook messenger | 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. | ||
:five: | Facebook profile page | The project includes the 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 | The project includes the user's newsfeed, along with the typical two-column layout, story row and navigation. | ||
:five: | YouTube homepage | The project includes a home page with typical, advanced YouTube navigation and multiple media containers for presenting videos. | ||
:five: | Trello board | The project includes trello board with a typical scrum system arrangement and draggable tasks. | ||
:five: | Alibaba homepage | The project includes a home page with typical, advanced eCommerce navigation (double navbar + sidenav) and multiple media containers for presenting products. | ||
:five: | Facebook newsfeed | The project includes the user's newsfeed, along with the typical three-column layout and social media navigation. | ||
:five: | Amazon homepage | The project includes a home page with typical, advanced eCommerce navigation (double navbar + sidenav) and multiple media containers for presenting products. |
Playgrounds & hosting
- Codeply - an online editor that includes dozens of frameworks, starter templates and code snippets supports Vuetify, Bulma, Bootstrap, Foundation, MDB, Angular and Vue
- Snippets Playground - free & fast online editor dedicated to Bootstrap, supports integrations with React, Angular, Vue and MDB, full of community crafted components and design blocks
- CodePen - social development environment for front-end designers and developers
- JSFiddle - an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets
- MDB GO/CLI - 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
- Lab Templates
- Color Schemes generator
- ProofHub
- Logo generator
- Filestage
- CSS Masks & Glassmorphism Generator
- Logaster
- Instagram filters CSS generator
- Coolors – Color scheme generator
- CSS gradients generator
- Palleton – A color scheme
- Fancy border radius generator
- Diigo
- Meta tags generator
- Cards generator
- Pixlr
- Buttons generator
- InVision Studio
- Charts creator
- Marvel
- Shadows generator
- Figma
- SVG waves generator
- Affinity Designer
- Datatables builder
- UXPin
- Alerts generator
- Proto.io
- Modals generator
- MockFlow
- Icons generator
- Adobe Comp
- Table generator
- Flinto
- Flexbox generator
- Justinmind
- Footer generator
- Canva
- Navbar generator
- Orion Icon
- Typography generator
- Squoosh
- Grid generator
- Animation generator
- Ripple generator
- Button Generator
Bootstrap 4 resources
Resources compatible with the older Bootstrap v4 (based on jQuery).
Components
UI Kits & libraries
- :four: Bootstrap 4 & jQuery 3 - 600+ free material UI components & templates.
- :four: Bootstrap 4 & Angular 10 - 400+ free material UI components & templates.
- :four: Bootstrap 4 & React 16 - 500+ free material UI components & templates.
- :four: Bootstrap 4 & Vue 2 - 400+ free material UI components & templates.
- :four: Bootstrap-Vue Complete Components For Vue.js 2. <sup>2.x compatible</sup>
- :four: ng-bootstrap Angular directives specific to Bootstrap 4 (Angular 2)
- :four: reactstrap - Stateless React Components for Bootstrap 4.
- :four: CodexUI [1] - Vanilla Bootstrap components that require no extra CSS or Javascript to use.
- :four: Pixel UI Kit - Premium collection of Bootstrap components and 4 example pages.
- :four: django-bootstrap-customizer - Customizable Bootstrap 4 generator for Django.
Templates
IMPORTANT: For items marked with please visit their site to learn more about their license.
Single Page Templates
Version | Name | Screenshot | Description | LicenseInUse |
---|---|---|---|---|
:four: | Landing Page | Landing Page is a responsive landing page theme for Bootstrap 4. | ||
:four: | Stylish portfolio | Stylish Portfolio is a one page Bootstrap portfolio theme with off canvas navigation and smooth scrolling through content sections. | ||
:four: | agency | 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. | ||
:four: | freelancer | Freelancer is a one page Bootstrap portfolio theme for freelancers. | ||
:four: | Grayscale | Grayscale is a multipurpose, one page website theme featuring a dark layout along with smooth scrolling page animations. |
Admin Dashboards
Version | Name | Screenshot | Description | LicenseInUse |
---|---|---|---|---|
:four: | ngx-admin | Admin dashboard template based on Nebular framework (Angular 4+, Bootstrap 4) previously known as ng2-admin | ||
:four: | react-reduction | Admin Dashboard built with ReactJS + Bootstrap4 + Create React App | ||
:four: | sb-admin | 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. | ||
:four: | Tabler | Premium and Open Source dashboard template with responsive and high quality UI built on Bootstrap 4. |
Other Themes
Version | Name | Screenshot | Description | LicenseInUse |
---|---|---|---|---|
:four: | DevExpress OfficeWhite | A Twitter Bootstrap theme inspired by 'Office365' | ||
:four: | DevExpress Purple | A Twitter Bootstrap theme with modern design | ||
:four: | Windows 95 Bootstrap | Original Windows 95 Elements UI Kit |
Info
Contributions
To contibute please see the 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
cc-by-4 - Too Long Didn't Read Version.
Maintainers
List started with :heart: by therebelrobot.
List maintained with :heart: by filipkappa.
Contact filipkappa or file an issue to contact maintainers.