Awesome MDBootstrap

A curated list of the best resources in the MDBootstrap community.

MDBootstrap is a set of slick, responsive page templates, layouts, components, and widgets to rapidly build web pages.

Contents

• Resources
• Community
• Useful Links
• Articles
• Tools
• Data Grid
• CLI & hosting
• Education

Resources

Official projects and resources of MDBootstrap.

Free

• MDB Standard Free - Free to download, open-source Bootstrap 5 UI Kit.
• MDB Angular Free - Bootstrap 5 & Angular 11 Free UI KIT with Material Design.
• MDB React Free - Bootstrap 5 & React 17 Free UI KIT with Material Design.
• MDB Vue Free - Bootstrap 5 & Vue 3 Free UI KIT with Material Design.

Pro

• MDB Standard Pro - Premium UI Kit for the latest Bootstrap 5. Lifetime usage of 5000+ premium components, thousands of templates, plugins, design blocks.
• MDB Angular Pro - Material Design for Bootstrap 5 with Angular.
• MDB React Pro - Material Design for Bootstrap 5 with React.
• MDB Vue Pro - Material Design for Bootstrap 5 with Vue.

Community

• Snippets - Projects created with MDBootstrap.
• Support - Place where you can solve your technical problems.

Useful Links

Official projects and resources of MDBootstrap.

• Snippets - Best source of Bootstrap code examples & plugins.
• LAB - Inspirational concepts & experiments created by the community of MDB.
• UI/UX Tips - Quick and easy-to-implement tips to improve your design.
• Services - We incorporate all of them in our own products, so our developers are uniquely experienced with these tools. We also use a variety of other solutions.
• Visual Studio Code snippets - An extension that allows you to add useful snippets of the most popular MDB 5 components to Visual Studio Code.
• Angular Visual Studio Code snippets - This extension adds snippets for MDB Angular - Angular Bootstrap UI KIT.
• Webpack starter - This guide describes in detail the capabilities of Webpack Starter.
• Reviews - User feedback on mdbootstrap.

Articles

Contribute to the community and share your technical knowledge - or just read the articles written by others.

• Technology comparision - What will be the best JavaScript framework in 2022?
• Articles - Contribute to the community and share your technical knowledge - or just read the articles written by others.

Rankings

• UI Kits & Themes - Bootstrap, Angular, React, Vue UI Kits.
• Free Bootstrap Templates & Themes - Stunning, Responsive Material Design Themes.
• Premium Bootstrap Templates & Themes - Blog, Portfolio, eCommerce, Magazine, Admin Angular & React & Vue Templates.
• Backend Bootstrap Templates & Themes - Jamstack, PHP, MySQL, Python, NodeJS, Tailwind, Laravel Backend Integrations UI Kits.

Tools

Tools and utilities to help build apps using MDBootstrap.

• Logo generator - Create an elegant and stylish logo in 5 minutes.
• CSS Masks & Glassmorphism Generator - Generate the perfect masks for your design.
• Instagram filters CSS generator - Use famous Instagram filters via CSS and apply them to your project.
• CSS gradients generator - Generate the perfect gradient for your design.
• Fancy border radius generator - Generate unusual shapes with our border-radius generator.
• Meta tags generator - Take care of your SEO generate the most accurate meta data for Google and social media.
• Cards generator - Create bootstrap cards with custom shapes, buttons, colors, sizes.
• Buttons generator - Create bootstrap buttons with custom icons, text, shapes, colors, sizes.
• Charts creator - Easy to use chart builder (pie charts, line charts, bar charts).
• Shadows generator - Generate the perfect shadow for your design.
• SVG waves generator - Easily generate beautiful SVG shapes and apply them to your design.
• Datatables builder - Create an elegant and stylish logo in 5 minutes.
• Alerts generator - Create bootstrap alerts with custom shapes, buttons, colors, sizes.
• Modals generator - Create bootstrap modals with custom shapes, sizes, animations.
• Icons generator - 1600+ icons. Create bootstrap icons custom with sizes, colors, animations.
• Table generator - Create bootstrap table custom with sizes, colors, animations.
• Flexbox generator - The easiest and fastest way to create and test flexbox in Bootstrap 5.
• Footer generator - Create bootstrap footer with custom coprytight, buttons, forms, links colors, sizes.
• Navbar generator - Create bootstrap navbar with custom colors, brand, icons, forms, placement.

Data Grid

Extend your projects functionality with a table component

• GetDataDen - The ultimate customizable Data Grid
• Advanced data structure - The latest and most advanced data structure allows customizing each column (sort, width, resize, field) and matches values from each row to a column in which the field equals a given key value.
• Draggable columns - Experience seamless interactivity with our draggable columns feature. Effortlessly rearrange your data grid to suit your workflow, ensuring optimal organization and efficiency. Just click, drag, and drop to customize your data display exactly as you need.
• Pagination - Explore efficient data navigation with our pagination example. Learn to seamlessly handle large datasets by integrating simple, intuitive pagination controls.
• Column search - Discover the power of quick data retrieval with our search column feature. Easily locate the information you need within your DataDen grids for a more streamlined and productive data management experience.
• Cell formatting - Enhance your data grid with our versatile cell formatting options. Tailor each cell’s appearance for clarity and impact, using colors, fonts, and styles that make your data speak volumes. Perfect for highlighting critical insights and personalizing your data view
• Compact version - Unlock the full potential of your data grid with advanced CSS customization. Style every aspect to match your brand or personal preference, from colors and fonts to layouts. Create a visually cohesive and highly functional data interface with ease.

CLI & hosting

Powerful tool which allows you to create different projects. No more difficult configuration and deployment.

• MDB CLI - Create, deploy and host your project with a single command.
• Quick Start - Get started with MDB CLI easily and quickly and how to use its full potential.
• Getting Started - Step by step on how to create your project and deploy.
• Overview - Guide which will take you on how to perform different actions.

TW Elements useful links (Tailwind CSS)

An open-source collection of components, templates and plugins for Tailwind CSS. Easily customizable & optimized for performance.

• UI Kit - Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities

TW Elements integrations with popular technologies.

• Django Integration
• Angular Integration
• Express Integration
• Laravel Integration
• Next Integration
• Nuxt Integration
• Django Integration
• Remix Integration
• Solid Integration
• Svelte Integration
• Sveltekit Integration
• Vue Integration

Education

Well-organized, up-to-date series of tutorials for the latest Bootstrap, Material Design, HTML, CSS, JavaScript.

• Video Tutorials
• Written Tutorials

mdbootstrap.md Github