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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in tortor eu tellus facilisis bibendum et sed ante. Pellentesque sed metus risus. Quisque id dictum eros. Suspendisse auctor, nisi in sodales egestas, leo eros bibendum augue, non dignissim velit tellus sit amet tellus. Suspendisse et massa eu arcu lobortis pharetra. Phasellus dapibus hendrerit tortor eget molestie. Curabitur vel augue sem. Fusce eget iaculis purus. Vivamus orci urna, tempor nec enim lacinia, convallis lobortis magna. Quisque porta convallis interdum. Praesent efficitur velit sit amet quam gravida, in eleifend ligula venenatis. Maecenas bibendum, elit nec hendrerit luctus, lorem dui consequat eros, eu molestie diam nisi finibus metus. Cras arcu velit, sollicitudin vel cursus sit amet, fringilla id dui. Nunc auctor tristique orci eget venenatis. Etiam auctor justo a leo commodo consectetur.
Aenean ac libero id ipsum volutpat placerat ultrices mollis augue. Fusce at metus vitae leo ornare suscipit. Sed finibus luctus diam quis luctus. Mauris at consequat est. In ornare faucibus felis eu hendrerit. Pellentesque vehicula sem id lacus euismod, at finibus tortor imperdiet. Sed sit amet purus vitae erat pharetra cursus et id ex. Mauris tortor nisl, tincidunt eget pharetra sed, aliquet eu libero. Nunc ipsum dui, pharetra eget aliquet vel, eleifend vel nisl. Nam sem elit, semper quis enim et, finibus iaculis ligula. Phasellus posuere bibendum enim, a consectetur turpis consectetur at. Sed quam nunc, mattis at turpis eget, tincidunt euismod enim.
Donec et lorem vitae neque feugiat vehicula a eu ante. Praesent ac gravida magna. Proin at commodo felis. Aenean nec luctus metus, non gravida mauris. Sed ligula sem, scelerisque id orci vel, tempus imperdiet mi. Phasellus condimentum ultrices nunc, id venenatis arcu tempor non. Nulla gravida mauris orci, sed lacinia nibh pellentesque a. Curabitur malesuada diam non elit aliquam pellentesque sed nec velit. Proin nec risus neque. Pellentesque maximus, ex id dignissim imperdiet, justo libero ultrices ex, ut porttitor elit ex ac lacus. Nunc a ligula felis.
Mauris et mi sit amet arcu mattis ultrices. Aenean ornare venenatis tempor. Quisque molestie magna vel elit cursus, sagittis iaculis urna laoreet. Donec feugiat sapien eget arcu condimentum, et rutrum lorem mollis. Nam rhoncus elementum turpis sed feugiat. Morbi tincidunt neque tellus, faucibus dictum elit accumsan et. In malesuada justo nunc, at mattis ex cursus vel. Duis ultricies, justo quis sagittis egestas, nulla erat aliquam mi, eu aliquam enim turpis ac sem. Aliquam a enim et lectus volutpat consequat. Nullam at elit dui. Mauris velit libero, blandit in augue auctor, gravida fermentum enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id hendrerit mi, quis elementum lacus. Integer rhoncus sed ligula quis ornare. Sed eget odio sollicitudin, interdum nibh id, sagittis neque.
Vestibulum id odio dictum, lobortis ante eget, lobortis magna. Quisque pharetra orci et mi gravida tincidunt. Suspendisse tristique velit ut finibus dictum. Vestibulum erat diam, blandit vitae rhoncus eget, gravida dictum nisi. Nulla facilisis efficitur velit quis mattis. Praesent quis neque luctus, aliquet nisl sed, tincidunt nisi. Fusce fringilla ligula sit amet purus congue sagittis. Integer varius mauris eu diam volutpat malesuada. Quisque tempor tempor ipsum vel sagittis. Mauris vitae libero vel libero commodo luctus. Nullam eleifend eget odio at pretium. Fusce pharetra sit amet mi nec vestibulum. Nam pulvinar purus arcu, vitae vulputate lectus accumsan non. Phasellus auctor libero sed dictum laoreet. Nullam rutrum dictum placerat.
Fusce hendrerit lacus eget purus aliquet, in placerat enim interdum. Nullam efficitur non mauris quis dignissim. Vestibulum magna dolor, pretium in metus vehicula, lacinia aliquam lacus. Nullam commodo non augue mattis cursus. Proin et lacinia ipsum. Praesent imperdiet condimentum augue ut feugiat. Donec dictum urna tellus, nec rutrum mi gravida non. Donec arcu enim, imperdiet quis vulputate non, euismod a lectus. Mauris at risus sit amet nisi accumsan pulvinar id in elit. Maecenas egestas velit orci, ac vestibulum orci hendrerit a. Phasellus vestibulum posuere aliquet. Integer vehicula, neque et hendrerit fringilla, sem nibh tincidunt nisl, eget facilisis urna est quis leo. Quisque est velit, scelerisque eu nisi id, semper ullamcorper erat.
Nam placerat vulputate mauris, eget ornare erat consequat at. Aenean quis metus id urna tempus elementum. Nullam molestie felis ac nunc bibendum tristique. Integer porttitor lectus non nisl dapibus, id rhoncus quam maximus. Vestibulum tincidunt tincidunt tempor. Donec nec arcu aliquet, hendrerit augue vel, elementum augue. Phasellus metus neque, accumsan nec aliquam ut, tincidunt non ipsum. Proin consequat ut massa sit amet vehicula. Sed ornare varius metus, vitae suscipit risus volutpat id. Mauris sollicitudin interdum elit, a maximus sem feugiat et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non aliquam neque, nec porta neque. Maecenas purus purus, iaculis congue sollicitudin nec, porttitor a lacus. Morbi dictum volutpat nunc gravida interdum. Pellentesque vitae tincidunt mi. Pellentesque non nunc elit.
Nunc bibendum molestie imperdiet. Proin a purus neque. Nam urna ex, feugiat sit amet pharetra nec, blandit eget lectus. In aliquet mattis augue, nec imperdiet purus luctus ut. In tincidunt diam ac eros lacinia elementum. Pellentesque iaculis, arcu vel lobortis mattis, sapien nisl consequat lacus, ac ullamcorper nisi massa et justo. Quisque at efficitur erat. Aliquam erat volutpat. In ac erat molestie, sollicitudin lacus quis, luctus lorem. Nam ac orci vitae leo auctor scelerisque. Phasellus faucibus libero sed venenatis commodo. Aenean hendrerit facilisis ex vel consequat. Duis a egestas nisi. Etiam non congue arcu, eu convallis lorem.
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.
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.
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>