Launch Bootstrap Modal on page load

Launch Bootstrap Modal on page load

In this tutorial I am going to show how to create a web page that launch a Bootstrap model automatically whenever its load. Launching Bootstrap Model on page load requires 3 file jquery, Bootstrap CSS and Bootstrap JavaScript file.

Working Example

Just create a file called launch.html with code below and launch this file, remember we should have a working internet connection to load Jquery, bootstrap files from CDN. The below screen shot was taken while working on a school web application when a clerk going to take admission , he has to follow below given instruction .

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Launch Bootstrap modal on page load</title>
<!-- CDN -->
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<!-- CDN -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Load Bootstrap modal on page launch</h4>
<div class="modal-body">
This is a simple Demo to launch a model on page load.
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
$(document).ready(function () {

Leave a Reply

Your email address will not be published. Required fields are marked *

Do you have any Query / Suggestion