Modal

Example

<div class="modal modal-close" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Modal title</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-alt-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-alt-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Launch modal

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1">
    Launch demo modal
</button>

<div class="modal" id="exampleModal1" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Modal title</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-alt-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-alt-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Scrolling

External scroll

A modal with long content will expand beyond the viewport height and the whole modal is then scrollable.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur deleniti odit repellendus et, hic aliquam earum fugit repudiandae, enim inventore nostrum. Iure molestias eius sunt perspiciatis numquam dolores architecto at molestiae sint fugiat beatae debitis fuga quos ipsam reiciendis officiis eum ad, facilis quo provident natus consectetur excepturi repellendus. Ut, aliquid? Pariatur fuga minus voluptate ex mollitia dicta aspernatur maiores architecto asperiores, accusamus consequatur tenetur omnis modi fugiat, expedita doloribus culpa sit dolorum amet reprehenderit ab consectetur a ipsa temporibus? Quas quo esse magni aspernatur natus ipsam amet assumenda veritatis voluptatum, distinctio, delectus rerum porro doloremque harum similique? Veniam, reprehenderit.

Internal scroll

Use the .modal-dialog-scrollable class with .modal-dialog to make only the modal body scrollable. This makes the whole modal visible inside the viewport.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
    Launch demo modal
</button>

<div class="modal" id="exampleModal3" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Modal title</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-alt-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-alt-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Vertically centered

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal4">
    Launch demo modal
</button>

<div class="modal" id="exampleModal4" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Modal title</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-alt-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-alt-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Sizing

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal5">Small modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal6">Large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal7">Extra large modal</button>

<div class="modal" id="exampleModal5" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Modal title</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-alt-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-alt-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="exampleModal6" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Modal title</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-alt-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-alt-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="exampleModal7" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Modal title</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-alt-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-alt-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>