"login and signup form with tab bootstrap 4 "
Bootstrap 4.1.1 Snippet by KashyapVadi

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4 formDesign">
<!-- ********** Facebook ********* -->
<div class="fbbody mt-4">
<a href="index.php"> <button class="noticebtn"><i class="fa fa-facebook-square" ></i>Login With Facebook</button></a>
</div>
<!-- ******* Form Header ******** -->
<div class="formHeader">
<div>
<div class="loginHeader formActiveBorder" id="loginfornlink">Login</div>
<div class="signupHeader" id="signupforlinkm">Sign up</div>
</div>
</div>
<!-- ******* End Form Header ******** -->
<!-- ************** login form ********* -->
<div class="logincontain" id="loginforn">
<form method="post" action="login.php">
<div class="form-group">
<!-- user name -->
<input type="text" class="form-control" placeholder="USERNAME" name="usernameLogin" id="username" required>
</div>
<div class="form-group">
<!-- password -->
<input type="password" class="form-control" placeholder="PASSWORD" name="passwordLogin" id="password" required>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*,
*::before,
*::after{
box-sizing: border-box;
}
:root{
--hd-ft-bgcolor: #40baff;
--hd-ft-fontcolor: #6c6363eb;
--hd-ft-hoverheaderBg:#40baff;
--hd-ft-hoverheaderfont: #fff;
--hd-ft-header:#3b5998;
}
/*var(--hd-ft-bgcolor); */
body{
background-color: #fbfbfb;
}
/********* login gesign ***********/
.formDesign{
margin-top: 6%;
background-color: #fff;
padding: 0px !important;
border-radius: 10px;
}
.formActiveBorder{
border-bottom: 3px solid var(--hd-ft-bgcolor);
}
.loginHeader{
color: var(--hd-ft-fontcolor);
padding: 5px;
text-align: center;
width: 50%;
float: left;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//************** FORM HEADER SELECT LOGIN/SINGUP FORM *****************
$("#loginfornlink").click(function () {
$(this).addClass('formActiveBorder');
$("#signupforlinkm").removeClass('formActiveBorder');
$("#signupform").hide();
$("#loginforn").fadeIn(500);
});
$("#signupforlinkm").click(function () {
$(this).addClass('formActiveBorder');
$("#loginfornlink").removeClass('formActiveBorder');
$("#loginforn").hide();
$("#signupform").fadeIn(500);
});
//************ signup html view ***********
$("#next").click(function () {
$(".secondview").hide();
$(".firstview").show(300);
$(this).hide();
$("#previous").show();
$("#submit").show();
});
$("#previous").click(function () {
$(".firstview").hide();
$(".secondview").show(300);
$(this).hide();
$("#next").show();
$("#submit").hide();
});
$(".close").click(function () {
$(".error").hide(200);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Login and Register Modal
Signup form
login-form
Login Form

Questions / Comments: