Bootstrap modal is so useful when it comes to showing the visitors any particular content upon clicking on a button. It saves your time from creating extra pages for your websites. Modal is a lightweight JavaScript popup that is easily customizable and fully responsive. It can be used to display alert popups, videos, and images on any page of your site. Any website built with Bootstrap can showcase any of these types of content with modals.

What is modal and what does it look like?

The Bootstrap modals are streamlined, flexible, dialog prompts with the minimum required functionality. It is commonly known as JavaScript popup without needing to write any JavaScript code.

 

Bootstrap modals look just like JavaScript alerts having one or more buttons for you to execute anything in particular. Commonly every modal popup has a button to exit the modal. The modals are not shown in the plain webpage it remains hidden in the button and pops up when visitors click on it.

Inside the Bootstrap modal

If we look at the code we will find that a Bootstrap modal has three different sections. Namely the header, body, and footer. Each of the sections has its own importance and hence should be in the proper way. Though things are done with JavaScript, you don’t have to write a single line of JavaScript code. You have to write the proper markup instructed by Bootstrap.

Bootstrap modal markup

You have everything you need on Bootstrap official site. We recommend you to understand the markup rather than getting the job done just by copying the codes from here.

You need to markup a button which will lead to the modal popup when clicked.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymodal">Click me</button>

Take a div where the modal will have its three different parts and have a class of modal fade and an id which will be placed in the button’s tata-target.

 <div class="modal fade" id="mymodal"> </div>

Take another div with a class of modal-dialog and have all three divs (modal-header, modal-body, modal-footer), wrap all three divs in the div modal-content.

 <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
             <h3>Hi buddy</h3>
        </div>
        <div class="modal-body">
             <h3>This is Bootstrap modal</h3>
        </div>
 <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
         </div>
      </div>
  </div>

Have your content in the body, title in the head and a button in the footer to exit the modal or more buttons to perform other functions.

The whole code of a basic modal would look like this.

<div class="col-md-4">
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymodal">Click me</button>
      <div class="modal fade" id="mymodal">
         <div class="modal-dialog">
<div class="modal-content">
        <div class="modal-header">
              <h3>Hi buddy</h3>
        </div>
        <div class="modal-body">
              <h3>This is Bootstrap modal</h3>
        </div>
  <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
          </div>
       </div>
       </div>
  </div>
 </div>

Bootstrap modal can be in different sizes and have different events. For more of such modification, you are highly recommended to go to the official website and delve into it. Whatever you do, make sure that you have Bootstrap in the system. Without having Bootstrap connected online or in your project file modal will never work.