Bootstrap 4 Modal Tutorials

bootstrap 4 modal
bootstrap 4 modal
bootstrap 4 modal

Bootstrap 4 Modal component is a dialog box/popup window that is displayed on page overlay. Today we will learn how to create bootstrap 4 modal box.

There are many kind of Bootstrap 4 Modal

  • Small Modal
  • Large Modal
  • Extra Large Modal
  • Centered Modal
  • Scrolling Modal

Before Creating Bootstrap 4 Modal Add These files in head section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Bootstrap 4 Modal Size

We can add classes for modal size like Large Modal with class .modal-lg , Extra large Modal with class .modal-xl and small modal with .modal-sm.

Small Modal

To Create Small modal just add

<div class="modal-dialog modal-sm">

Large Modal

To Create Small modal just add

<div class="modal-dialog modal-lg">

Extra Large Modal

To Create Extra large modal just add

<div class="modal-dialog modal-xl">

Leave a Reply

avatar
  Subscribe  
Notify of