Modals

We have styled all Bootstrap elements just as you want!

Toggle Code!
Talk to usSettings
Default Bootstrap Modal

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#myModal">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="myModalLabel">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>
Draggable Modals

You can drag modal by grabbing modal header. This has to be initialized in javascript by using jQuery ui draggable function. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal2">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade draggable" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header draggable-handle">                <h4 class="modal-title" id="modal2Label">Draggable Modal <small>Grab it here</small> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div><!-- Script for initializing draggable --><script type="text/javascript">    $(function($) {        $( ".draggable" ).draggable({ handle: ".draggable-handle" });    });</script>
Modal Without backdrop

You can disable backdrop by adding data-backdrop="false"to the modal. By disabling backdrop, modal can not be closed by clicking anywhere else. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal3" data-backdrop="false">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="modal3Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal3Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>
Custom Backdrop

You can customize backdrop color by simply adding data-backdrop-colorattribute to .modal. You can use primary, white, danger, black, success etc colors. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal4" >    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="modal4" tabindex="-1" role="dialog" aria-labelledby="modal4Label" data-backdrop-color="gray">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal4Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                <p>You can edit color of backdrop by simply adding <code class="language-html">data-backdrop-color</code> attribute to <code class="language-html">.modal</code>. </p>                <p>You can use primary, white, danger, black, success etc colors. You can also add your own color if you want.</p>            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>
Colored Modals

Just add bg-primaryfor primary colored modal. You can use other color classes like bg-black, bg-success, bg-warning etc. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal5">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="modal5" tabindex="-1" role="dialog">    <div class="modal-dialog" role="document">        <div class="modal-content bg-warning">            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer no-border">                <div class="btn-group" role="group">                    <button type="button" class="btn bg-white btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-black btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-check"></i>Accept</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>
Transparent Modal

You can customize backdrop color by simply adding data-backdrop-colorattribute to .modal. You can use primary, white, danger, black, success etc colors. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal6" >    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal vert-center fade trans-modal" id="modal6" tabindex="-1" role="dialog" aria-labelledby="modal6Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal6Label"><i class="fa fa-bars"></i> Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer text-center">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-check"></i>Accept</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>
Top Aligned

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal7">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal vert-top fade" id="modal7" tabindex="-1" role="dialog" aria-labelledby="modal7Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal7Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>
Bottom Aligned

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal8">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal vert-bottom fade" id="modal8" tabindex="-1" role="dialog" aria-labelledby="modal8Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal8Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>
Full Screen Modal

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal9">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade modal-full-screen" id="modal9" tabindex="-1" role="dialog" aria-labelledby="modal9Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal9Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>
Small Modal

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. 

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal10">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="modal10" tabindex="-1" role="dialog" aria-labelledby="modal10Label">    <div class="modal-dialog modal-sm" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal10Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Custom Modals

We have added extra plugins for customized modals.

Custom Alert Modal with animation

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Custom Modal with animated title

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Sweet Alert

A beautiful replacement for JavaScript alert.

Success Message with animation

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Success Message
Warning Modal with confirm & cancel buttons

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Useful Sidebar

Code for help is added within the main page. Check for code below the example.

You can use this sidebar to help your end-users. You can enter any HTML in this sidebar.

This sidebar can be a 'fixed to top' or you can unpin it to scroll with main page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.