Free Bootstrap 5 modal snippet — Login and Register Modal Snippets | Login Popup Snippets. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
1<div class="container">
2 <div class="row">
3 <div class="col-sm-4">
4 <a class="btn big-login" data-bs-toggle="modal" href="javascript:void(0)" onclick="openLoginModal();">Log in</a>
5 </div>
6 <div class="col-sm-4">
7 <a class="btn big-register" data-bs-toggle="modal" href="javascript:void(0)" onclick="openRegisterModal();">Register</a></div>
8 <div class="col-sm-4"></div>
9 </div>
10
11 <div class="modal fade login" id="loginModal">
12 <div class="modal-dialog login animated">
13 <div class="modal-content">
14 <div class="modal-header">
15 <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">×</button>
16 <h4 class="modal-title">Login with</h4>
17 </div>
18 <div class="modal-body">
19 <div class="box">
20 <div class="content">
21 <div class="social">
22 <a class="circle github" href="#">
23 <i class="fa fa-github fa-fw"></i>
24 </a>
25 <a id="google_login" class="circle google" href="#">
26 <i class="fa fa-google-plus fa-fw"></i>
27 </a>
28 <a id="facebook_login" class="circle facebook" href="#">
29 <i class="fa fa-facebook fa-fw"></i>
30 </a>
31 </div>
32 <div class="division">
33 <div class="line l"></div>
34 <span>or</span>
35 <div class="line r"></div>
36 </div>
37 <div class="error"></div>
38 <div class="form loginBox">
39 <form method="" action="" accept-charset="UTF-8">
40 <input id="email" class="form-control" type="text" placeholder="Email" name="email">
41 <input id="password" class="form-control" type="password" placeholder="Password" name="password">
42 <input class="btn btn-default btn-login" type="button" value="Login" onclick="loginAjax()">
43 </form>
44 </div>
45 </div>
46 </div>
47 <div class="box">
48 <div class="content registerBox" style="display:none;">
49 <div class="form">
50 <form method="" html="{:multipart=>true}" data-remote="true" action="" accept-charset="UTF-8">
51 <input id="email" class="form-control" type="text" placeholder="Email" name="email">
52 <input id="password" class="form-control" type="password" placeholder="Password" name="password">
53 <input id="password_confirmation" class="form-control" type="password" placeholder="Repeat Password" name="password_confirmation">
54 <input class="btn btn-default btn-register" type="button" value="Create account" name="commit">
55 </form>
56 </div>
57 </div>
58 </div>
59 </div>
60 <div class="modal-footer">
61 <div class="forgot login-footer">
62 <span>Looking to
63 <a href="javascript: showRegisterForm();">create an account</a>
64 ?</span>
65 </div>
66 <div class="forgot register-footer" style="display:none">
67 <span>Already have an account?</span>
68 <a href="javascript: showLoginForm();">Login</a>
69 </div>
70 </div>
71 </div>
72 </div>
73 </div>
74</div>
75<script type="text/javascript">
76 $(document).ready(function(){
77 openLoginModal();
78 });
79</script>
Bootstrap Delete Confirmation Modal snippet
Bootstrap Delete Confirmation Modal snippet — a free Bootstrap 5 modal snippet. Copy the HTML and paste straight into your Bootstrap 5 project.
Bootstrap Simple Success Confirmation Popup snippet
Free Bootstrap 5 modal snippet — Bootstrap Simple Success Confirmation Popup snippet. Preview, copy HTML, drop it into any Bootstrap 5 project.
Bootstrap 5 customer ratings modal snippets with emojis
Add a modal to your UI with Bootstrap 5 customer ratings modal snippets with emojis. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.