How to Make Full Screen Modal Dialog In Bootstrap 4

BOOKC, this time share about How to Make Full Screen Modal Dialog In Bootstrap 4

A CSS extension to Bootstrap 4 framework that makes the modal component take up the whole screen when toggled.

How to use it:

1. Load the stylesheet fullscreen.css in your Bootstrap project.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<link rel="stylesheet" href="/path/to/dist/bootstrap4-modal-fullscreen.css" />

2. Or simply add the following CSS snippets into your document.

.modal.modal-fullscreen .modal-dialog {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  max-width: none; 

.modal.modal-fullscreen .modal-content {
  height: auto;
  height: 100vh;
  border-radius: 0;
  border: none; 

.modal.modal-fullscreen .modal-body {
  overflow-y: auto; 

3. Add the CSS class 'modal-fullscreen' to the existing modal dialog and done.

<div class="modal fade modal-fullscreen" id="example<a href="">Modal</a>" 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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      <div class="modal-body">
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>

A few articles about How to Make Full Screen Modal Dialog In Bootstrap 4. Hopefully this article is useful and don't forget to share it with your friends, thank you.


Hopefully the information we provide can be useful.

Press ESC to close