Bootstrap Modal

When you fill a form online you may have seen a pop-up box that generally appears before final submission. This pop-up box is created using modal. Modal is generally used by web developers to make users aware of some important information appearing on the web page. It can be some confirmation message, warning message, or cookies

Boostrap provides us an easy way to create this modal. Before creating modals in Bootstrap here is some basic information regarding the working of the Bootstrap modal.

Bootstrap modal consists of three sections header, body, and footer. The header will contain the topic or the heading. The body will contain the content which may be text data, image, or video. The footer may consist of buttons.
Bootstrap modal is so designed that when it appears, the web page becomes irresponsive and model contents get scrolled.
Like other web pages, the models are also built with HTML, CSS, and Javascript.
Bootstrap doesn't support nested models because it reduces the performance of the web page. It prefers to use a single pop window at a time.

Example: Bootstrap Modal

Here is a small code example that is used to create a bootstrap model.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Warning!!</h2> 
  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Open</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">  
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"></button>
          <h4 class="modal-title">Header</h4>
        </div>
        <div class="modal-body">
          <p>You are in danger.</p>
        </div>
        <div class="modal-footer">
		   <button type="button" class="btn btn-info">Save changes</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
 </body>
</html>

Output

This is how a simple modal looks like.

Modal

We have two important attributes to trigger the modal window.

data-toggle="model" -It opens the model window.
data-target="#Mymodal" points to the id of the window

Bootstrap Modal Classes

Let's now discuss some bootstrap classes so that we can easily understand the code.

.modal- It is used to denote the start of any new modal.
.modal-dialog - Setting up width and margin to the modal.
.modal-content - It denotes the starting of content in the modal
.modal-header - It is used for styling the header of the modal. Add a catchy heading, style it as you like.
.modal-title - Under the heading class, there is a title where we mention the title of the modal.
.modal-body - Here add text or images and style it as you like.
.modal-footer - Footer generally has a button that allows your permission to accept or close the modal.
.fade - Transition effect can be used using .fade in the modal. You can choose between in and out effect.

Bootstrap Modal Sizes

The model has two sizes. Large size and small size dialogue box present in modifier class in .modal-dialog.

Both sizes modal are demonstrated below.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Model</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
  <h2> Modal size</h2>
  
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

   <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <p> Large size modal </p>
     </div>
    </div>
  </div>
  
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">small modal</button>

   <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mysmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <p> small size modal </p>
     </div>
    </div>
  </div>
</div>
</body>
</html>

Output :

Here in this program, we have created large and small modals

Bootstrap Modal Scrolling Long Contents

If you are thinking that modals have only short contents. You are wrong. When you want to install any software in your system you see a pop-up window with long terms and conditions which is also a modal. The bootstrap .aria-hidden class is used for scrolling the hidden contents. How this scrolling is possible in modals. Let's check out.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Model</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalLong">
  Launch demo modal
 </button>

<!-- Modal -->
<div class="modal fade" id="ModalLong" tabindex="-1" role="dialog" aria-labelledby="ModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
		<p>scrolling in modal</P>
      </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>
</div>
</body>
</html>

Output

Here is the output of the above program.

Modal-long-content

Vertically Centered Modal

Till now we have created the modals which appeared at the top of the web page. But what if you want that it should appear at the center of your screen. For that add bootstrap classes .modal-dialog to .modal-dialog-centered . Let's try.

Here is the sample code is given below:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#AlignModalCenter">
  Demo
  </button>

<div class="modal fade" id="AlignModalCenter" tabindex="-1" role="dialog" aria-labelledby="AlignModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="Align Modal">Modal Align</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p> we learn to align modal </p>
      </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>
</div>
 </body>
</html>

Output

Image of vertically align modal

Conclusion

So create modal and style as you like. There are many ways to use it and Bootstrap provides the best way to style it which we have discussed.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Bootstrap Modal

Example: Bootstrap Modal

Output

Bootstrap Modal Classes

Bootstrap Modal Sizes

Output :

Bootstrap Modal Scrolling Long Contents

Output

Vertically Centered Modal

Output

Conclusion