Sign in


Sign up


Enhanced Bootstrap Modals


Extended functionality and advanced usage. Free for personal and commercial use.

Available versions for Material Design for Bootstrap 4 or Pure Bootstrap 4 plugin without Material Design look.


Easily customizable, adjust size, position, and content. Automatically triggered based on rules and scoring system. Multiple examples and ready to use templates.

All fully responsive. All compatible with different browsers.

Note: If you use MDB version higher than 4.3.1 (Free or Pro), Enhanced Bootstrap Modal are already part of your package.


Live demo Getting started

What can you create with it?

Enhance UI of your project

Static UI elements aren't enough in modern web development. Enhanced Bootstrap Modals lets you create a dynamic and reactive environment similar to the websites and apps of the biggest companies.

Automated Rule and Scoring System

Make your project behave like a living organism. Create your own artificial intelligence to react to user actions.

Related content system

Don't let your users look for the relevant content. Create a smart system which will always prompt the right content for the specific person.

Carts recovery system

If you didn't use abandoned cart recovery system most probably you have lost a lot of money. Create a system that allows you easily start recovering abandoned transactions.

...and much more!


Basic example

Below is a most basic Modal example with a button triggering Modal via data attribute.

Click the button to trigger Modal.

                
import React from 'react';
import { Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';


class ModalPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.toggle}>Launch demo modal</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
            <Button color="primary" onClick={this.toggle}>Save changes</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalPage;