mdbootstrap

Integrates the MDBootstrap UI Kit with a user-friendly interface for configuring and customizing components, variables, and plugins.

Overview

Transform your web applications to look and feel like sleek mobile apps. It's not magic—beautiful designs follow a few basic rules that anyone can master.

Powerful, extensible, and feature-packed UI Kit for Bootstrap. A collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others – in MDB you will find all the essential elements necessary for every project.

• Hundreds of quality components & templates
• All consistent, well-documented, reliable
• Super simple, 1-minute installation
• Easy theming and customization

Features

This module offers a wide range of settings:

• Support for all stable versions: MDBootstrap v5 and v4
• Compatibility: Works with both Free and Pro versions
• CDN Method: Easily load via CDN
• Local Libraries: Load from local sources
• RTL Support: Full support for RTL languages (e.g., Persian, Farsi, Arabic)
• Dark Mode: Toggle between dark and light versions
• Composer Install: Simplify installation with Composer
• Loading Restrictions: Restrict loading by files, themes, and paths
• Minified or Non-minified: Choose between minified or non-minified libraries
• More possibilities in the future

Requirements

• Bootstrap UI (Module)
  Integrates Bootstrap CSS framework along with a user interface for configuring and customize components, variables and plugins.
• MDB - Material Design for Bootstrap 5 & 4 (Library)
  Bootstrap Material Design free UI KIT - trusted by over 2 000 000 developers and designers. Vanilla JavaScript, Angular, React, Vue and jQuery versions.

Recommended versions

MD Bootstrap v5 releases

9.1.0 (Latest)
9.0.0 (Latest)
8.2.0
7.3.1
7.2.0
7.1.0
7.0.0
6.4.2
6.3.1
6.2.0

MD Bootstrap v4 releases

4.20.0 (Latest)
4.19.2
4.18.0

Get started any way you want

Jump right into building with MDBootstrap—use the CDN, install it via package manager, or download the source code.

Installation

1. Download the 'MDBootstrap' module.
2. Extract and place it in the root of the contributed modules directory i.e.
   /modules/contrib/mdbootstrap (or /modules/mdbootstrap)
   
3. Create a libraries directory in the root, if not already there i.e.
   /libraries
   
4. Create an 'mdb-ui-kit' directory inside it i.e.
   /libraries/mdb-ui-kit
   
5. Download the 'MDBootstrap' library
   
6. Place it in the /libraries/mdb-ui-kit directory i.e. Required files:
   For MDBootstrap v4 UI Kit download (Compiled CSS and JS) should be like:
   - /libraries/mdb-ui-kit/css/mdb.min.css
   - /libraries/mdb-ui-kit/js/mdb.umd.min.js
   For MDBootstrap v4 files create a "mdbootstrap" directory inside /libraries, the structure should be like:
   - /libraries/mdbootstrap/css/mdb.min.css
   - /libraries/mdbootstrap/js/mdb.min.js
7. Then, enable the 'MDBootstrap' module
8. Go to the "Administration > Configuration > Bootstrap UI" settings page in your Drupal admin menu.
9. Switch the "Library" option from Bootstrap to MDBootstrap to use the Material Design UI Kit across your site, then save the configuration.
10. Enjoy that.

Please view the project's README.md for detailed installation instructions.

Support

Please let me know if a new feature is needed or if there are any issues and feedback. You can announce it in the MDBootstrap Issues section.

MDBootstrap 1.0.0 is on the horizon. Join the beta testing today!

Betas provide an excellent opportunity for developers and site builders to test new features, report bugs, and even contribute fixes. Be a part of shaping the final release!

Recommended modules

• Pattern CSS
  A CSS-only library to fill your empty background with beautiful patterns.
• Hover CSS
  A collection of CSS3 powered hover effects for links, buttons, logos, SVG, featured images, and more.
• Animate CSS
  Allows you to create cross-browser animations for your web projects. Great for emphasis, home pages, sliders, blocks with cool animation effects.
• Animate CSS On Scroll
  Provides AOS options on the AnimateCSS UI add animation form, allowing you to animate on scroll using the AOS.js library.
• AOS JS
  A small and lightweight JavaScript library (with no dependencies) that allows you to animate elements as you scroll down and up. If you scroll back to the top, elements will animate to their previous state and are ready to animate again if you scroll down.
• WOW JS
  A module that integrates the WOW.js library with Drupal. Provides animations when you scroll, improving site interactivity with awesome animations.
• Textimate (Text + Animate)
  Provides text animation, enhancing site interactivity with awesome effects. Effortlessly transform static text into mesmerizing animations.
• Splitting.js
  Creates elements and adds CSS variables for split words & characters (lines, items, grids, images, more!) to unlock amazing possibilities for styling and animating text, grids, and more!
• Vivus
  Integrates the Vivus.js library with Drupal. Provides SVG animation, improving site interactivity with awesome animations.

Bootstrap 5 UI KIT - 700+ components, plain JavaScript, MIT license, simple installation.

MDB is a collection of free Bootstrap templates, themes, design tools & resources.