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 |