modal
.modal
Modal title
Note
When backdrop is set to static, the modal will not close when clicking outside it.
Scrolling long content
.modal-dialog
Scrollable
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est doloremque autem ex placeat quisquam ipsum commodi, consectetur ad inventore aperiam aspernatur veritatis possimus voluptatum alias beatae dolorem iste perferendis consequuntur sint sapiente nostrum repellendus dolore. Consequuntur amet, tempore rerum aperiam suscipit incidunt reiciendis? Rem eligendi autem debitis ipsam officiis commodi optio. Quidem, ducimus! Dicta modi eos voluptate similique saepe eveniet quo rerum impedit optio odio corporis veritatis commodi earum possimus tempore voluptas, obcaecati omnis repellendus. Nisi corporis, magni possimus expedita perferendis vero fugiat quos? Obcaecati eveniet provident reprehenderit iure vel. Autem fugiat amet, incidunt dolores iste repellendus ipsum ratione fuga odit, laborum eveniet nihil veniam commodi possimus voluptatem saepe voluptas minima rerum voluptatibus eos corrupti quis laudantium. Nisi esse, numquam fugit culpa inventore quo dolorum maxime quisquam incidunt accusantium? In sed, sapiente reiciendis eum quod aliquid distinctio, quas culpa neque fuga reprehenderit voluptate ex. Sapiente, odio reiciendis vel, fugit sequi, debitis at numquam repellat aperiam itaque accusamus maiores omnis eum architecto. Est, quia! Aspernatur quasi quis aperiam. Necessitatibus culpa, aperiam architecto rem dignissimos fuga aut nostrum quam laboriosam itaque qui officia debitis corrupti neque sequi! Laudantium commodi unde earum quaerat modi minima doloribus exercitationem rerum veritatis dolorum consequuntur dicta, iure sed cupiditate enim laboriosam. Eaque consequuntur, debitis delectus quas consectetur vel cupiditate deleniti voluptatum distinctio eveniet ad earum esse repellendus labore ipsum aliquid soluta tempore optio sit enim quaerat? Dolores nobis magni aut modi ipsam, fugit repudiandae ea impedit adipisci consectetur officia hic temporibus asperiores repellat eos, non saepe. Iste provident nihil ab praesentium, iusto, sint voluptate quas aspernatur minus eligendi fugiat mollitia! Dicta magnam corporis sit ipsum et officia accusantium ad, reiciendis temporibus voluptatem voluptas molestias natus inventore saepe minus tempore quis pariatur consectetur rem aut modi neque obcaecati unde? A maxime hic sed labore sunt fuga cupiditate delectus debitis dolor eligendi magnam dignissimos doloribus officiis eaque eos, ipsum, perferendis, corrupti nostrum velit veritatis rerum minima saepe sint vel? Dolores eius inventore cupiditate eligendi voluptas ab sapiente totam facilis ducimus vitae ea, ullam, ratione fugiat beatae neque repudiandae ut, eaque vel officiis harum eos! Vel sed quibusdam est aliquam doloremque vitae numquam repudiandae iste aperiam ut impedit, esse, consequuntur laboriosam eaque perspiciatis, quod tempore qui! Similique aspernatur id optio, fugiat velit, blanditiis tempora deserunt reiciendis atque sequi dolorem a eligendi iste incidunt ratione reprehenderit placeat, saepe hic ipsum commodi! Asperiores, excepturi enim accusantium illo sit cumque similique fuga distinctio quia vero nihil amet modi error. Veniam ab iste suscipit totam, quisquam non natus maxime earum illum harum nemo pariatur alias magni sapiente nulla mollitia quos sit voluptatum tempore nihil. Porro doloremque maxime sed nisi soluta. Illum nobis aspernatur dignissimos mollitia, ad aliquid saepe doloremque a autem sequi quam explicabo quasi, cumque esse perspiciatis soluta nulla fugit impedit blanditiis dolor deserunt harum! Asperiores nihil quas sequi dolores iste sunt eum magnam. Sint minima quis magnam officia assumenda facilis placeat. Voluptas cupiditate ducimus natus, eius quasi odio in modi error, at nostrum impedit blanditiis nisi minima eligendi, porro placeat repellendus perferendis.
Vertically Centered
.modal-dialog
Modal Vertically Centered
Note
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
also you can add scrollable class, see code below
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Modal Vertically Centered
<div class="modal fade" id="example5" tabindex="-1" aria-labelledby="example5Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="example5Label">
Modal Vertically Centered
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
Modal title
<-- A trigger button to activate modal -- >
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
Modal Static
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">
Modal title
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Understood
</button>
</div>
</div>
</div>
</div>
Scrolling long content
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#example4">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="example4" tabindex="-1" aria-labelledby="example4Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="example4Label">
Scrollable
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Some Text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>