Modals
Modal dialogs
| Basic modals | ||
|---|---|---|
| Default modal dialog | Basic modal dialog with header, body and footer areas. Default examples displays: header - contains a title and a close button; footer - contains buttons and body contains static or dynamic content |
|
| Modal with icons | Modal with icons added to the specified elements: heading title, footer control buttons and text inside modal body | |
| Disable backdrop | Disabled backdrop. Disable backdrop element using data-backdrop="false" or alternatively, specify static for a backdrop which doesn't close the modal on click |
|
| Disable animation | Disabled animation. For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup |
|
| Modal sizes | ||
| Mini size modal | Modal in mini size. Mini modal width is 300px. To use, add modal-xs class to .modal-dialog container |
|
| Small size modal | Modal in small size. Small modal width is 400px. To use, add modal-sm class to .modal-dialog container |
|
| Default size modal | Modal in default size. Default modal width is 600px. Since this is a default size, modal markup doesn't require any additional sizing classes |
|
| Large size modal | Modal in large size. Large modal width is 900px. To use, add modal-lg class to .modal-dialog container |
|
| Full size modal | Modal in full width size. This modal has 90% width of the window. To use, add modal-full class to .modal-dialog container |
|
| Modal headers | ||
| Primary modal header | Primary modal. To use, add .bg-primary class to the .modal-header container |
|
| Danger modal header | Danger modal. To use, add .bg-danger class to the .modal-header container |
|
| Success modal header | Success modal. To use, add .bg-success class to the .modal-header container |
|
| Warning modal header | Warning modal. To use, add .bg-warning class to the .modal-header container |
|
| Info modal header | Info modal. To use, add .bg-info class to the .modal-header container |
|
| Custom modal header color | Modal with custom color added to the modal header. To use, add any color class from the color system to the .modal-header container |
|
| Solid modals | ||
| Primary modal | Primary modal. To use, add .bg-primary class to the .modal-content |
|
| Danger modal | Danger modal. To use, add .bg-danger class to the .modal-content |
|
| Success modal | Success modal. To use, add .bg-success class to the .modal-content |
|
| Warning modal | Warning modal. To use, add .bg-warning class to the .modal-content |
|
| Info modal | Info modal. To use, add .bg-info class to the .modal-content |
|
| Custom modal | Modal with custom color added to the modal content. To use, add any color class from the color system to the .modal-content |
|
