is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →

Bootstrap class: .modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal

<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      <div class="modal-body">
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>


Check .modal in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Tips 💡

Sass source

/* _modal.scss:11 */
.modal {
  overflow-x: hidden;
  overflow-y: auto;

/* _modal.scss:18 */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal;
  display: none;
  overflow: hidden;
  // Prevent Chrome on Windows from adding a focus outline. For details, see
  outline: 0;
  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
  // gnarly iOS Safari bug:
  // See also

/* _modal.scss:44 */
.modal.fade & {
  @include transition($modal-transition);
  transform: translate(0, -25%);

/* _modal.scss:48 */ & {
  transform: translate(0, 0);

Uses variables

Code copied to the clipboard.

Copying failed

/* _modal.scss:11 */

/* _modal.scss:18 */

/* _modal.scss:44 */

/* _modal.scss:48 */

More in Bootstrap Modal