Icons

Icons - Bootstrap 5 & Fluent Design 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

Icons

Examples of some icons

Sizing

Colors

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';