Bootstrap login form in modal Login form is used to get the login details from users, now a days it is very popular to use
the modal to show the login form in bootatrap modal. Here in this tutorial we are going to explain how you can create login form in bootstrap
modal. You can also use our online editor to edit and run the code online.
Bootstrap login form in modal Example
Let us create very basic login form in bootstrap modal, In this example modal will contain a login form with login inputs, it also contains the other related links for login or registration.
Create login form in Bootstrap modal Example:
<html>
<head>
<title>Bootstrap Login Form in Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.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>
<style>
/* custom css style starts here */
.login-header{
background: #880e4f;
color:#fff;
}
</style>
</head>
<body>
<!----modal starts here--->
<div id="tutorialsplaneModal" class="modal fade" role='dialog'>
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header login-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<!---login form starts here-->
<form role="form">
<div class="form-group">
<label for="email">Email</label>
<input type="text" name= "email" class="form-control" id="email"
placeholder="Enter Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" id="password"
placeholder="Enter Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Sign In</button>
<div class="row">
<div class="col-xs-7 col-sm-7 col-md-7">
<a href="#" class="btn btn-link">Forgot Password?</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<a href="#" class="btn btn-link">Register</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Modal ends here--->
<!----add button to trigger the modal---->
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#tutorialsplaneModal">Click Here To Open Modal</button>
</body>
</html>
|
We have added custom css to add the modal color on the same way you can customize the login form, if you need more customization create a css file and write the custom styles in it and include it in this page.
If you run the above example it will produce the output something like this –