# Modal

Use this modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Bootstrap Documentation

## Basic

Show code

##### Modal title

...

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

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" 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>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <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>
          </div>
        </div>
      </div>
    </div>

## Options

### Colors

Use `.modal-COLOR`, where color is one the the pre-defined theme values: info, success, danger, warning, primary, secondary, white and dark

Show code

##### This is way to dangerous

##### Should we stop now?

You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal_5">
        Danger modal
    </button>
    <!-- Modal -->
    <div class="modal modal-danger fade" id="modal_5" tabindex="-1" role="dialog" aria-labelledby="modal_5" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h6" id="modal_title_6">This is way to dangerous</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="py-3 text-center">
                        <i class="fas fa-exclamation-circle fa-4x"></i>
                        <h5 class="heading h4 mt-4">Should we stop now?</h5>
                        <p>
                            You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
                        </p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-white" data-dismiss="modal">Probably not</button>
                </div>
            </div>
        </div>
    </div>

Show code

##### It looks ok to me

##### Let's get started

You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal_success">
        Success modal
    </button>
    <!-- Modal -->
    <div class="modal modal-success fade" id="modal_success" tabindex="-1" role="dialog" aria-labelledby="modal_success" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h6" id="modal_title_6">It looks ok to me</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="py-3 text-center">
                        <i class="fas fa-exclamation-circle fa-4x"></i>
                        <h5 class="heading h4 mt-4">Let's get started</h5>
                        <p>
                            You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
                        </p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-white" data-dismiss="modal">OK, cool</button>
                </div>
            </div>
        </div>
    </div>

### Sizing

Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Show code

##### Extra large modal

...

    <!-- Extra large modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".docs-example-modal-xl">Extra large modal</button>

    <div class="modal fade docs-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl">
        <div class="modal-content">

          <div class="modal-header">
            <h5 class="modal-title h6" id="myExtraLargeModalLabel">Extra large modal</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
        </div>
      </div>
    </div>

Show code

##### Large modal

...

    <!-- Large modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".docs-example-modal-lg">Large modal</button>

    <div class="modal fade docs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">

          <div class="modal-header">
            <h5 class="modal-title h6" id="myLargeModalLabel">Large modal</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
        </div>
      </div>
    </div>

Show code

##### Small modal

...

    <!-- Large modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".docs-example-modal-sm">Small modal</button>

    <div class="modal fade docs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title h6" id="mySmallModalLabel">Small modal</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
        </div>
      </div>
    </div>