<title>Bootstrap Grid</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container" style="padding:150px;">
<!----modal starts here--->
<div id="modal" 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" aria-hidden="true">×</button>
<h4 class="modal-title">Tutorialsplane Modal Demo</h4>
<div class="modal-body" id= "modal-body">
<p>Here the description starts here........</p>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-info btn-lg open-modal" >Click Here To Open Modal</button>
<script type="text/javascript">
$(document).on("click", ".open-modal", function () { var myHeading = "<p>I Am Added Dynamically </p>";
$("#modal-body").html(myHeading + x); $('#modal').modal('show');