Hi,
I think you have missed to use two required script file for the above code. you can add the following line to your code
<pre><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
After that, you can save and run the your code. i have updated the above lines and checked your code is working fine. you can try the below code
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<title> E-learn Qz</title>
<style>
body {
background-color: burlywood;
background-repeat: no-repeat;
background-size: 75% 75%;
background-attachment: fixed;
background-position: left center;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=""><a href="index.html"><span class="glyphicon" aria-hidden="true"></span> E-learn Qz</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="modal" data-target="#loginModal"><span class="glyphicon glyphicon-log-in"></span>
login</a></li>
</ul>
</div>
</div>
</nav>
<div id="loginModal" 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"> ×</button>
<h4>Login</h4>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email</label><input type="text" class="form-control input-sm"
placeholder="Email" id="email" name="email">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control input-sm" placeholder="Password" id="password"
name="password"></div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-info btn-xs">Sign in</button>
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
I hope it will solve the your problem and let me know if have any issue
Submit an article or tip