Modals

Default Modals

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

Default Small Large Scrollable
<!-- default-modal -->
<a href="#x" class="btn btn-info mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".default-modal">Default</a>
<!-- modal -->
<div class="modal fade default-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Default Modal</h5>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>..,</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-lg va-middle mr-5"></i> <span>Close</span></button>
                    <button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="bi-check2 fs-18 va-middle mr-5"></i> <span>Save</span></button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / default-modal -->

<!-- small-modal -->
<a href="#x" class="btn btn-warning mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".small-modal">Small</a>
<!-- modal -->
<div class="modal fade small-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content text-center">
            <div class="modal-header">
                <h5 class="modal-title text-center w-100">Small Modal</h5>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>...</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <p class="text-center w-100 mb-0">
                    <button type="button" class="btn btn-sm btn-icon btn-circle btn-danger m-x-5" data-bs-dismiss="modal"><i class="bi-x fs-18"></i></button>
                    <button type="button" class="btn btn-sm btn-icon btn-circle btn-success m-x-5" data-bs-dismiss="modal"><i class="bi-check fs-18"></i></button>
                </p>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / small-modal -->

<!-- large-modal -->
<a href="#x" class="btn btn-danger mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".large-modal">Large</a>
<!-- modal -->
<div class="modal fade large-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Large Modal</h5>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <div class="container full-width">
                    <p>...</p>

                    <button type="button" class="btn btn-danger d-block w-100" data-bs-dismiss="modal">Close</button>
                </div><!-- / container -->
            </div><!-- / modal-body -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / large-modal -->

<!-- scrollable modal -->
<a href="#x" class="btn btn-success mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".scrollable-modal">Scrollable</a>
<!-- modal -->
<div class="modal fade scrollable-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Scrollable Modal</h5>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>...</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-lg va-middle mr-5"></i> <span>Close</span></button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / scrollable-modal -->

Custom Modals

We've created some custom modals, see the examples below:

Login Register
<!-- login-modal -->
<a href="#x" class="btn btn-danger mb-10 mr-10" data-bs-toggle="modal" data-bs-target=".login-modal"><i class="bi-person-circle mr-5"></i> <span>Login</span></a>
<!-- modal -->
<div class="modal fade login-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-center">
            <div class="modal-header pt-40">
                <h6 class="modal-title text-center w-100"><i class="bi-person-circle fs-80"></i> <span class="hidden">User</span></h6>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body pt-40 pb-30">
                <form class="needs-validation" id="modal-login" novalidate="novalidate">
                    <input class="form-control mb-15" type="text" id="um-input" placeholder="Username or Email" required="">
                    <input class="form-control mb-15" type="password" id="password-input" placeholder="Password" required="">
                    <button type="submit" class="btn btn-primary d-block w-100"><i class="bi-unlock mr-5"></i> <span class="fs-14">Sign In</span></button>
                </form>
            </div><!-- / modal-body -->
            <div class="modal-footer pb-40">
                <p class="text-center w-100 fs-14 mb-0">Lost your password? <a href="#x" class="link-underline">Click Here</a></p>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / login-modal -->

<!-- register-modal -->
<a href="#x" class="btn btn-success mb-10 mr-10" data-bs-toggle="modal" data-bs-target=".register-modal"><i class="bi-person-plus mr-5"></i> <span>Register</span></a>
<!-- modal -->
<div class="modal fade register-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-center">
            <div class="modal-header pt-40">
                <h6 class="modal-title text-center w-100"><i class="bi-person-plus fs-80"></i> <span class="hidden">User</span></h6>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body pt-40 pb-30">
                <form class="needs-validation" id="modal-register" novalidate="novalidate">
                    <input class="form-control mb-15" type="text" id="register-um-input" placeholder="Email Address" required="">
                    <input class="form-control mb-15" type="password" id="register-pass-input" placeholder="Password" required="">
                    <input class="form-control mb-15" type="password" id="register-cpass-input" placeholder="Confirm Password" required="">
                    <button type="submit" class="btn btn-primary d-block w-100"><i class="bi-person-plus mr-5"></i> <span class="fs-14">Register</span></button>
                </form>
            </div><!-- / modal-body -->
            <div class="modal-footer pb-40">
                <p class="text-center w-100 fs-14 mb-0">Already have an account? <a href="#x" class="link-underline">Sign In</a></p>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / register-modal -->

Alert Modals

Show different alert messages using a modal component.

Success Info Alert Warning Danger
<!-- alert-modal -->
<a href="#x" class="btn btn-success" data-bs-toggle="modal" data-bs-target=".success-modal"><i class="bi-lightbulb mr-5"></i> <span> Success</span></a>
<!-- modal -->
<div class="modal fade success-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content bg-success dark-mode text-center">
            <div class="modal-body pb-40">
                <i class="bi-check-circle text-white fs-60"></i>
                <h4 class="fs-20 mb-15">Congrats!</h4>
                <p class="mb-30 text-white">Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
                <button type="button" class="btn btn-outline-white" data-bs-dismiss="modal"><i class="bi-save fs-14 mr-5"></i> <span>Save</span></button>
            </div><!-- / modal-body -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / alert-modal -->

<!-- info-alert-modal -->
<a href="#x" class="btn btn-info" data-bs-toggle="modal" data-bs-target=".info-modal"><i class="bi-exclamation-circle mr-5"></i> <span> Info Alert</span></a>
<!-- modal -->
<div class="modal fade info-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content bg-info dark-mode text-center">
            <div class="modal-body pb-40">
                <i class="bi-info-circle text-white fs-60"></i>
                <h4 class="fs-20 mb-15">Heads Up!</h4>
                <p class="mb-30 text-white">Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
                <button type="button" class="btn btn-outline-white" data-bs-dismiss="modal"><i class="bi-x-circle fs-14 mr-5"></i> <span>Clear Alert</span></button>
            </div><!-- / modal-body -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / info-alert-modal -->

<!-- warning-alert-modal -->
<a href="#x" class="btn btn-warning" data-bs-toggle="modal" data-bs-target=".warning-modal"><i class="bi-exclamation-triangle mr-5"></i> <span> Warning</span></a>
<!-- modal -->
<div class="modal fade warning-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content text-center">
            <div class="modal-body pb-40">
                <i class="bi-exclamation-triangle text-warning fs-60"></i>
                <h4 class="fs-20 mb-15">Warning!</h4>
                <p class="mb-30">Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
                <button type="button" class="btn btn-warning" data-bs-dismiss="modal"><i class="bi-x-circle fs-14 mr-5"></i> <span>Clear Alert</span></button>
            </div><!-- / modal-body -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / warning-alert-modal -->

<!-- danger-alert-modal -->
<a href="#x" class="btn btn-danger" data-bs-toggle="modal" data-bs-target=".danger-modal"><i class="bi-exclamation-octagon mr-5"></i> <span> Danger</span></a>
<!-- modal -->
<div class="modal fade danger-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content text-center">
            <div class="modal-body pb-40">
                <i class="bi-exclamation-octagon text-danger fs-60"></i>
                <h4 class="fs-20 mb-15">Danger!</h4>
                <p class="mb-30">Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-circle fs-14 mr-5"></i> <span>Close</span></button>
            </div><!-- / modal-body -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / danger-alert-modal -->

Modal Positions

Use utilities to modify a .badge and position it in the corner of a link or button.

Top Modal Bottom Modal Center Modal
<!-- top-modal -->
<a href="#x" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".top-modal"><i class="bi-arrow-up mr-5"></i> <span>Top Modal</span></a>
<!-- modal -->
<div class="modal fade top-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Top Modal</h5>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-circle mr-5"></i> <span>Close</span></button>
                <button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="bi-check-circle mr-5"></i> <span>Save</span></button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / top-modal -->

<!-- bottom-modal -->
<a href="#x" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bottom-modal"><i class="bi-arrow-down mr-5"></i> <span>Bottom Modal</span></a>
<!-- modal -->
<div class="modal fade bottom-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-bottom">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bottom Modal</h5>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-circle mr-5"></i> <span>Close</span></button>
                <button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="bi-check-circle mr-5"></i> <span>Save</span></button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / bottom-modal -->

<!-- center-modal -->
<a href="#x" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".center-modal"><i class="bi-arrows-move mr-5"></i> <span>Center Modal</span></a>
<!-- modal -->
<div class="modal fade center-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Center Modal</h5>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi-x-circle mr-5"></i> <span>Close</span></button>
                <button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="bi-check-circle mr-5"></i> <span>Save</span></button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / center-modal -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav