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
Chats
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
chat

Sushi tonight?

10:14 am
chat

Pizza?

We had sushi last time!

For me one Vegetariana! Plus some chili oil on it!

10:15 am
chat

Done. Delivery takes 5 minutes!

10:16 am
chat

Awesome! See you later! : )

Just now