# Boomerang UI Kit

## Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Open Bootstrap Docs

### Example

#### Unleash your creativity!

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-block btn-light" data-toggle="modal" data-target="#modal_1">
        Default modal
    </button>
    <!-- Modal -->
    <div class="modal modal-fluid fade" id="modal_1" tabindex="-1" role="dialog" aria-labelledby="modal_1" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row justify-content-center">
                        <div class="col-lg-8 text-center py-4">
                            <h4 class="heading h3">Unleash your creativity!</h4>
                            <p class="lead text-muted">
                                You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
                            </p>
                            <div class="py-md">
                                <img src="../assets/images/prv/splash.png" class="img-fluid img-center">
                            </div>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Let's do this!</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

### Variations

###### Additional Class Reference

`.modal-fluid`
  Apply to `.modal` to remove vertical margins

`.modal-lg`
  Apply to `.modal-dialog` to increase modal's size

`.modal-sm`
  Apply to `.modal-dialog` to decrease modal's size

##### 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-block 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" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 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>
                        <h4 class="heading mt-4">Should we stop now?</h4>
                        <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-secondary" data-dismiss="modal">Probably not</button>
                </div>
            </div>
        </div>
    </div>

###### Additional Class Reference

You can see all the background options in the dedicated page which can be found here.

`.modal-{color}`
  Apply to `.modal` to change the background and text colors