Modals

Lecture 101:- Modals

In Bootstrap, a modal is a dialog box or popup window that is displayed on top of the current page to provide additional information or functionality to the user. Modals can be used for a variety of purposes, such as displaying images or videos, confirming actions, or collecting user input.

Bootstrap provides a simple and flexible way to create modals using the modal class and a few additional attributes. Here is an example of how to create a basic modal in Bootstrap:

htmlCopy code

<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">  Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  <div class="modal-dialog" role="document">    <div class="modal-content">      <div class="modal-header">        <h4 class="modal-title" id="myModalLabel">Modal title</h4>        <button type="button" class="close" data-dismiss="modal" aria-label="Close">          <span aria-hidden="true">&times;</span>        </button>      </div>      <div class="modal-body">        Modal body text goes here.      </div>      <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>      </div>    </div>  </div> </div>

In this example, we have a button that triggers the modal when clicked. The modal itself is created using a div with the modal and fade classes, as well as an ID that matches the data-target attribute of the button. Inside the modal, we have a header with a title and a close button, a body with some text, and a footer with buttons for closing the modal and saving changes.

Bootstrap also provides a variety of options for customizing the appearance and behavior of modals, such as changing the size, adding animations, or displaying forms. These options can be configured using various attributes and classes provided by Bootstrap.