Bootstrap 3 Modals

What is a modal dialog?

The modal window is a smart dialog that is displayed over the parent window to interact with the users of the website.

This is quite useful and gets users’ attention fully to convey some message or get user’s feedback.

Watch Video of this Tutorial

For example, to conduct a survey you may use the modal window.

Similarly, to get users’ feedback or announcing a seminar or some other event, etc.

Also See:

Bootstrap 5 Modal without jQuery | Bootstrap 4 Modals

How to create Bootstrap Modal

Creating modal dialogs by using Bootstrap framework is quite simple and requires the least coding. For that, you simply need to include the modal.js plug-in. If you already included the JS library of Bootstrap framework, then you do not need to include plug-in separately.

Following are a few examples of creating the Modals in Bootstrap along with demo and code online.

A basic modal example

A modal window generally has three sections that are divided into div elements. The sections include a header that contains the main heading of the dialog. After that, the body of the modal window will show the message in detail and finally, the last section is the footer. This is where actions are included.

For example, if the modal is taking the Name/Email then the footer section may contain Subscribe/Cancel actions.

The div elements contain the modal related classes provided by the framework. See a simple dialog below.

The markup:

<!DOCTYPE html>

<html>

<head>

<title>A simple Bootstrap modal example</title>

</head>

<body>

<h1>Bootstrap Modal demo</h1>

Click here to see Modal window

</button>

<h4 class="modal-title" id="myModalLabel">Header message in the Modal!</h4>

</div>

The body of the modal, where you can show a message in single or multi-line. Even include a video. <br />

For example, embed a youtube video! OR <br />

Add some picture.

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">I got it! Close</button>

</div>

</body>

</html>

You can see that as the demo page is loaded, it is showing a button to click in order to show the modal window. You can do it as the webpage loads as well (shown in the last example).

As you click the button, the modal will be launched with three sections. As you look into the code, the first div specifies the .modal class along with the .fade class. If you want Bootstrap modal dialog to appear without fading effect or animation, remove that class.

The id of the div is also specified, which is referred in the button element to launch it.

The next div specifies the size of the dialog that uses the .modal-dialog class. You may specify two additional classes there to specify the size of the dialog:

For large dialog, use .modal-lg
For small dialog, use .modal-sm

The next div element specifies the content of the modal dialog that includes the header containing the action buttons like close along with the header message.

It also includes the .modal-body class where you will display the message. You may even include videos or pictures there.

The final div in the main content div is for the footer that contains the .modal-footer class. This is where the footer action buttons are given, like “I got it, close” in this example is used.

An example of smaller modal window

The following demo shows a small-sized modal dialog with a button in the footer section. See the demo and a little description below:

The markup:

<h1>Bootstrap Modal demo</h1>

Click here for small modal

</button>

<h4 class="modal-title" id="myModalLabel">Small modal window!</h4>

</div>

The body of the modal, where you can show a message in single or multi-line. Even include a video. <br />

For example, embed a youtube video! OR <br />

Add some picture.

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">I got it! Close</button>

</div>

As mentioned earlier, I simply used the .modal-dialog and .modal-sm in the second div to make the dialog small in size.

A modal example with more actions in footer

The above two examples simply used a button to let user close the modal window after seeing the message. You may include more buttons in the footer section as shown in the example below:

The Markup:

<h1>Bootstrap Modal demo</h1>

Modal with multiple actions

</button>

<h4 class="modal-title" id="myModalLabel">Modal with multiple buttons</h4>

</div>

The body of the modal, where you can show a message in single or multi-line. Even include a video. <br />

For example, embed a youtube video! OR <br />

Add some picture.

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

</div>

You can see in the footer div, the modal dialog includes three buttons with different styles i.e. Ok, Save and Cancel buttons. Different button classes provided by Bootstrap framework are used for all the buttons.

Custom-colored bootstrap modal

Until now, we have used the default colors that are set in the Bootstrap framework for the modal window, which is whitish. Generally, you will need your own color scheme that matches the theme of your web design for the modal windows.

In the following demo, I used the custom color for the header section of the modal window.

Complete HTML code

<!DOCTYPE html>

<html>

<head>

<title>A simple Bootstrap modal example</title>

<style>

.modal-header {

background-color: #C49F0F;

padding:9px 15px;

color:#FFF;

font-family:Verdana, sans-serif;

border-bottom:1px solid #eee;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

}

</style>

</head>

<body>

<h1>Bootstrap Modal demo</h1>

Custom colored Modal

</button>

<h4 class="modal-title" id="myModalLabel">Custom colored Modal</h4>

</div>

The body of the modal, where you can show a message in single or multi-line. Even include a video. <br />

For example, embed a youtube video! OR <br />

Add some picture.

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

</div>

</body>

</html>

Output:

The color and other properties of the header are changed this way:

First of all, a CSS class is created inside the head section of the webpage.
You must place this class after referring to the Bootstrap framework CSS.
Name the class as .modal-header in the style section.
This will override the default style of modal Bootstrap.
In the style, I have changed the background color, text color, and font family of the text and added a radius for the top left and top right.
You can change/add more properties as needed by the website theme you are working on.

Customizing the body section of Modal

In this example, the body is also customized along with the header section of the modal window in Bootstrap. The .modal-body class in the header section after the Bootstrap CSS reference will override the default style.

The code:

<!DOCTYPE html>

<html>

<head>

<title>A simple Bootstrap modal example</title>

<style>

.modal-header {

background-color: #C49F0F;

padding:9px 15px;

color:#FFF;

font-family:Verdana, sans-serif;

border-bottom:1px solid #eee;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

}

.modal-body {

background-color: #F8E69E;

padding:9px 15px;

color:#000;

font-family:Verdana, sans-serif;

border-bottom:4px solid #C49F0F;

}

</style>

</head>

<body>

<h1>Bootstrap Modal demo</h1>

Custom body in Modal

</button>

<h4 class="modal-title" id="myModalLabel">Custom body in Modal</h4>

</div>

An example of Bootstrap modal <br />

With custom header and <br />

content in the body.

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

</div>

</body>

</html>

Output:

Customizing footer in Modal of Bootstrap

In the following example, the footer section is also customized by using the .modal-footer class. This class will override the default class for the footer.

Code:

<!DOCTYPE html>

<html>

<head>

<title>A simple Bootstrap modal example</title>

<style>

.modal-header {

background-color: #C49F0F;

padding:9px 15px;

color:#FFF;

font-family:Verdana, sans-serif;

border-bottom:1px solid #eee;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

}

.modal-body {

background-color: #F8E69E;

padding:9px 15px;

color:#000;

font-family:Verdana, sans-serif;

border-bottom:4px solid #C49F0F;

}

.modal-footer {

background-color: #FAEDBC;

color:#FFF;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

}

</style>

</head>

<body>

<h1>Bootstrap Modal demo</h1>

Customized footer

</button>

<h4 class="modal-title" id="myModalLabel">Customized footer Modal</h4>

</div>

An example of Bootstrap modal <br />

With custom header and <br />

content in the body.

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

</div>

</body>

</html>

Output:

You can see the customized header, body, and footer in the above example. You may place all the style in an external CSS file as well. However, you must include this after referring the Bootstrap CSS file in order to override default styles.

A modal example with form fields

In the following example, a form is used inside the body area of the modal window. In above example, we simply showed some text and allowed a user to close the window.

In this example, an email subscription form is used, where a user is asked to enter the Name and Email address. The footer section shows only two options: Subscribe and Cancel.

Unlike the above examples where the Bootstrap modal window only launched as you clicked on the button. In this example, the modal window will be shown as the example page loads.

Code:

<!DOCTYPE html>

<html>

<head>

<title>A simple Bootstrap modal example</title>

$(document).ready(function() {

$("#myModal").modal('show');

});

</script>

<style>

.modal-header {

background-color: #D9534F;

padding:9px 15px;

color:#FFF;

font-family:Verdana, sans-serif;

border-bottom:1px solid #eee;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

}

.modal-body {

background-color: #FF7171;

padding:9px 15px;

color:#000;

font-family:Verdana, sans-serif;

border-bottom:4px solid #C49F0F;

}

.modal-footer {

background-color: #FAEDBC;

color:#FFF;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

}

</style>

</head>

<body>

<h1>Bootstrap Modal demo</h1>

Subscribe Modal

</button>

<h4 class="modal-title" id="myModalLabel">Modal with multiple buttons</h4>

</div>

</div>

<label for="exampleInputEmail1">Enter Email</label>

</div>

</form>

</div>

<button type="button" class="btn btn btn-warning" data-dismiss="modal">Cancel</button>

<button type="button" class="btn btn-danger" data-dismiss="modal">Subscribe</button>

</div>

</body>

</html>

Output:

The loading part is done in the head section by using jQuery. This code is used to show the modal dialog at startup:

$(document).ready(function() {

$("#myModal").modal('show');

});

</script>

Where myModal is the main div id of the modal window.

Reference: http://getbootstrap.com/javascript/

Modals

What is a modal dialog?

Watch Video of this Tutorial

How to create Bootstrap Modal

A basic modal example

An example of smaller modal window

A modal example with more actions in footer

Custom-colored bootstrap modal

Customizing the body section of Modal

Customizing footer in Modal of Bootstrap

A modal example with form fields

Related Tutorials: