<div class="bd-example bg-body-tertiary">
    <div class="modal position-static d-block" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn btn-light btn-icon btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-title">
                    <h1>Title of a modal</h1>
                    <small>Subtitle of a modal - Lorem ipsum dolor</small>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-lg btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bd-example bg-body-tertiary">
    <div class="modal position-static d-block" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn btn-light btn-icon btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-title">
                    <h1>Title of a modal</h1>
                    <small>Subtitle of a modal - Lorem ipsum dolor</small>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-lg btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Button trigger modal -->
<div class="bd-example">
    <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">
        Launch demo modal
    </button>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalLive" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn btn-light btn-icon btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-title">
                <h1>Title of a modal</h1>
                <small>Subtitle of a modal - Lorem ipsum dolor</small>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-lg btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Button trigger modal -->
<div class="bd-example">
    <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalXlLive">
        Launch extra large demo modal
    </button>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalXlLive" tabindex="-1" aria-labelledby="exampleModalXlLiveLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn btn-light btn-icon btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-title">
                <h1>Title of an extra large modal</h1>
                <small>Subtitle of a modal - Lorem ipsum dolor</small>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-lg btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>