Modals, or Dialogues, are used to request information from the user or to give them feedback. They are usually initiated by the system in case of error or in response to user actions (warning dialogues, choice dialogues). Read more about dialogues in the UX Guidelines.
A rendered modal with header, body, and set of actions in the footer.
A dialog box has a fix width of 600px, but it shrink when it dosen't have space for it.
By adding .modal-info, .modal-help, .modal-success, .modal-warning or .modal-error class to the modal wrapper .modal, it will thansfor the modal into a alert dialog.
Main instruction for the question message ending with a question mark?
The following text has additional information about the message
Brief phrase describing the information for the user.
Brief phrase describing the information for the user.
The following text has additional information about the message
Brief explanation of the source of the warning message
The following text has additional information about the message
Brief explanation of the error that has occurred and what the user can do to solve it.
The following text has additional information about the message
Modals have two optional sizes (720px and 480 px width), .modal-lg and .modal-sm, available via modifier classes to be placed on .modal-dialog.
By clicking on buttons the modal will show, the functionality is just an example on how it should work.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Main instruction for the question message ending with a question mark?
The following text has additional information about the message
Brief explanation of the error that has occurred and what the user can do to solve it.
The following text has additional information about the message
// Basic modal / dialog box
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close"></button>
<h4 class="modal-title">Title of the dialogue box</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
</div>
// Modal / dialog box with alert icons
<div class="modal modal-help">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>
// Modal opption size
<div class="modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>