VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-4-modal/

⇱ Bootstrap 4 | Modal - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 4 | Modal

Last Updated : 4 Apr, 2023

In simple words, the Modal component is a dialog box/popup window that is displayed on top of the current page, once the trigger button is clicked. However, clicking on the modal's backdrop automatically closes the modal. Also, it must be kept in mind that Bootstrap doesn't support nested modals as they create bad UI experience for the user. Therefore, only one modal window is supported at a time.

To use Bootstrap 4.0, either download Bootstrap in your project root folder or copy and paste the following link in the head section of the HTML code. Required paths:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
However, there are many BootStrap components that require several JavaScript plugins in order to function well. Those plugins are jQuery, Popper.js, and a Bootstrap's personal JavaScript plugin. The following chunk of code must be placed right before the closing body tag inside the script tag. Required plugins:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    How to create A Bootstrap Modal:Below the example will clear the approach that how to create a Bootstrap Modal. Example: Output:

    Before launching the Modal:

    👁 Image

    After launching the Modal:

    👁 Image
    How Bootstrap Modal works:
  • Modals are built with HTML, CSS, and JavaScript. They are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
  • Clicking the modal “backdrop” will close the modal automatically.
  • This Modal supports only one modal window at a time.
  • Modals use position: fixed, which can sometimes be a bit particular about its rendering. If possible, place your modal HTML in a top-level position to avoid potential interference from other elements.
  • Due to position: fixed, there are few caveats with using modals on mobile devices.
    Bootstrap Modal Contents:
  • Using the grid:Utilize the Bootstrap grid system within a modal by nesting <b-container fluid> within the modal-body else you can use the normal grid system <b-row> (or <b-form-row>) and <b-col> as you would anywhere else.
  • Tooltips and popovers:

    A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over.

    The popover is an attribute of bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element.

    Example: Output: 👁 Image
    Bootstrap Modal Size: You can easily change the Bootstrap Modal Size as requirement by using .modal-sm for samll modal size , .modal-lg for large modal size and .modal-xl for extra large size modal. You can add this classes in the <div> tag with the .modal-dialog class.
  • Small Modal:
  • Large Modal:
  • Extra Large Modal:
    Centered Modal: With the use of .modal-dialog-centered class, you can easily center the modal vertically and horizontally within the page. Like previously just need to add "modal-dialog-centered" in the <div> tag in the calss with the "modal-dialog". class:
      Scrolling modal: This is required when you have a long message to show on modal which take large place compare to modal size that time Scrolling Modal is required, similarly this class can be added in the <div> tag in the class with the "modal-dialog". class:
Comment
Article Tags:

Explore