Title

Title - Bootstrap 5 & Material Design 2.0 component

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.

Note: Read the API tab to find all available options and advanced customization


Basic example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
p { color: blue; } var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Title - API


Usage

Via data attributes

Via JavaScript

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

$('.example-class').ripple(options);

Options

Name Type Default Description
tag String 'button' Changes button tag

Methods

Name Description Example
toggle Manually toggles a modal myModal.toggle()
var myModalEl = document.getElementById('myModal') var modal = new mdb.Modal(myModalEl) modal.toggle()

Events

Name Description
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
var myModalEl = document.getElementById('myModal') myModalEl.addEventListener('show.bs.modal', function (e) { // do something... })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

import { Modal } from 'mdb-ui-kit';