<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> <div class="container-fluid"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Feedback</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="Signuppage"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="Loginpage"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </div> </nav> <div class="jumbotron" > <div class="container"><br> <h1 class="form-group"><b>Login form</b></h1> <form action="DoLogin" method="post" > <div class="form-group"> <label for="email">Email:</label> <input type="email" id="Email" name="txt" class="form-control" placeholder="Enter your Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required/> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="passInput" placeholder="Enter password" name="txt_Password" required> </div> <div class="checkbox form-group"> <label><input type="checkbox" onclick="passFunction()">Show Password</label> </div> <div class="form-group"> <input type="submit" value="Submit" class="btn btn-success"> </div> <div class="form-group"> <h4><bold> If you have no account then <a href="signup"> Click me</a></bold></h4> </div> </form> </div> </div> <footer> <ul class="list-inline text-center"> <li><a href="">Twitter</a></li> <li><a href="">Facebook</a></li> <li><a href="">YouTube</a></li> <p>©Copyright @ 2017</p> </ul> </footer>

body { padding-top:50px; } .jumbotron { height: 100%; background-color:tomato !important; } .form-group { padding-left: 60px; width:90%; }

function emailFunction() { var x = document.getElementById("Email").pattern; document.getElementById("demo").innerHTML = x; } function passFunction() { var x = document.getElementById("passInput"); if (x.type == "password") { x.type = "text"; } else { x.type = "password"; } }