1. YOU ARE HERE
  2. UI Modal

Components - Bootstrap

Live demo

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

Optional sizes

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

Using grid

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else.

<div class="modal-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
        </div>
        <div class="row">
            <div class="col-md-3 ml-auto">.col-md-4</div>
            <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
        </div>
        <div class="row">
            <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
        </div>
    </div>
</div>