Modal – Modal styled with CSS
From Bootstrap - Demo Wiki
| Component | ||
|---|---|---|
| Name | Modal | |
| Description | Modal styled with CSS | |
| Provider | BootstrapComponents | |
| Reference | BootstrapComponents Extension docs - modal | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Custom CSS
Note: CSS passed to the style tag will be applied on the modal container which covers the entire page, not only to the modal dialog. To change the modal dialog, use the class tag and the modal inner classes as shown below.
- Code
<bootstrap_modal text="Click here!" color="info" heading="Heading goes here" footer="You can also add some footer." style="background-color: rgba(0,0,0,.3);" class="bootstrap-modal-example">Hello!
[[File:DSC02166 363.jpg|class=img-fluid]]</bootstrap_modal>
On MediaWiki:Common.css or MediaWiki:Chameleon.css:
.bootstrap-modal-example .modal-content {
background-color: var(--light);
}
- Result
