login signup or forgot password in one page using boostrap4 u can use any were like jsp, asp, php, html, any were in web, if u ar geting any problem then write in comment box , am try to solv your problem , below give script it will definatilly help u



index.jsp / index.php

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>login signup or forgot password in one page using boostrap4</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body style="">

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="index.jsp">OnlineExam</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">Hi, Gust</a>
      </li>
      <li class="nav-item">
          <a class="nav-link loginaccounts" href="#"><i class="fa fa-sign-in" aria-hidden="true"></i> &nbsp;Login</a>
      </li>    
    </ul>
  </div>  
</nav>

<br>

<div class="container fulllogin" style="display: none;">
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
            <div class="form">
                <p class="text-danger text-right"></p>
                <form action="LoginConnection" class="login-card login-out navlogin" method="POST" >
                    <div class="card ">
                        <div class="">
                            <input type="email" name="email" value="" class="form-control"  placeholder="Email"/>
                        </div>
                    </div><br>
                    
                     <input type="password" name="pass" value="" class="form-control"  placeholder="Password"/>
                     <br>
                     <button type="button" name="login" class="btn btn-outline-success float-right"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button>
                     <p><br></p>
                     <p class="text-center"><a href="#" class="forgetpass">Forgot Password ? </a> &nbsp; <a href="#" class="account-margin anaccocunt"><i class="fa fa-user-plus" aria-hidden="true"></i> &nbsp;Creat an account </a></p>
                </form>
                <!--forgot password bellow-->
                <form action="LoginConnection" class="login-card forgetpassview" method="POST" style="display: none;">
                    <div class="card ">
                        <div class="">
                            <input type="email" name="email" value="" class="form-control"  placeholder="Email"/>
                        </div>
                    </div><br>
                    <%
                    //set code for generate new pass if uer exis or not then give to permition to change pass
                    %>
                    <input type="password" name="pass" value="" class="form-control"  placeholder="New Password"/><br>
                      <input type="password" name="passcnf" value="" class="form-control"  placeholder="Confirm"/>
                     <br>
                     <button type="button" name="login" class="btn btn-outline-success float-right">Change password</button>
                     <p><br></p>
                     
                     <p class="text-center"><a href="#" class="gotologin"><i class="fa fa-sign-in" aria-hidden="true"></i> Login </a> &nbsp; <a href="#" class="account-margin anaccocunt"><i class="fa fa-user-plus" aria-hidden="true"></i> &nbsp;Creat an account </a></p>
                </form>
               
            </div>
        </div>
        <div class="col-sm-3"></div>
    </div>
</div>

<!--creat account -->
<div class="container fullsignup">
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
            <div class="creataccount-form">
                <p class="text-danger text-right"></p>
                <form action="LoginConnection" class="login-card " method="POST" >
                    <div class="card ">
                        <div class="">
                            <input type="text" name="fname" value="" class="form-control"  placeholder="First Name"/>
                        </div>
                    </div><br>
                    <input type="text" name="lname" value="" class="form-control"  placeholder="Last Name"/>
                    <br>
                    <input type="email" name="email" value="" class="form-control"  placeholder="Email"/>
                    <br>
                     <input type="password" name="pass" value="" class="form-control"  placeholder="Password"/>
                     <br>
                     
                     <input type="password" name="cnfpass" value="" class="form-control"  placeholder="Confirm password"/>
                     <br>
                     <div class="row">
                         <div class="col-sm-4">
                             <select class="form-control" id="subject" name="subject">
                                 <option>Subject</option>
                                 <option value="Science">Science</option>
                                 <option value="Math">Math</option>
                                 <option value="Coumputer">Computer</option>
                                  <option value="Coding">Coding</option>
                                 <option value="Other">Other</option>
                             </select>
                             <input type="text" name="subname" class="form-control" style="display: none;">
                         </div>
                         <div class="col-sm-4">
                             <select class="form-control" id="language" name="lang">
                                 <option>Language</option>
                                 <option value="Science">English</option>
                                 <option value="Math">Math</option>
                                 <option>More coming..</option>
                             </select>
                             
                         </div>
                         <div class="col-sm-4">
                             <select class="form-control" id="class" name="class">
                                 <option>Class</option>
                                 <option value="1st">1st</option>
                                 <option value="2nd">2nd</option>
                                 <option value="3rd">3rd</option>
                                  <option value="4th">4th</option>
                                 <option value="5th">5th</option>
                                 <option value="6th">6th</option>
                                 <option value="7th">7th</option>
                                 <option value="8th">8th</option>
                                  <option value="9th">9th</option>
                                 <option value="10th">10th</option>
                                 <option value="11th">11th</option>
                                 <option value="12th">12th</option>
                                  <option value="Graduation">Graduation</option>
                                  <option value="B-tech">B-tech</option>
                             </select>
                            
                         </div>
                     </div>
                     <br>
                     <button type="button" name="login" class="btn btn-outline-success float-right"><i class="fa fa-user-plus" aria-hidden="true"></i> &nbsp;Create Account</button>
                     <p><br></p>
                     <p class="text-center"><a href="#" class="forgetpass" style="color:white; text-decoration: none;"> Already have an Account ? </a> &nbsp; <a href="#" style="text-decoration: none; color: gray;" class="account-margin loginaccount"><i class="fa fa-sign-in" aria-hidden="true"></i>&nbsp; Login </a></p>
                </form>
            
               
            </div>
        </div>
        <div class="col-sm-3"></div>
    </div>
</div>

</body>
</html>





css/style.css

<script>
 body{
        background-image: url("../img/exam-background-7.jpg");
    }
    
    .form{
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.2);
        height: 300px;
        width: 100%;
    }
    .card-body{
        background: none;
    }
    .login-card{
        padding: 35px;
    }
    .form p a{
        color: white;
        text-decoration: none;
        border-bottom: 1px solid gray;
    }
    .form p .account-margin{
        margin-left: 25px;
    }
    .creataccount-form{
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.2);
        width: 100%;
        height: 530px;

    }
</script>



js/script.js

$(document).ready(function(){
   $(".forgetpass").click(function (){
      $(".login-out").hide();
       $(".forgetpassview").show();
   });
   $(".gotologin").click(function (){
      $(".login-out").show();
       $(".forgetpassview").hide();
   });
   
    $(".loginaccount").click(function () {
        $(".fullsignup").hide();
        $(".fulllogin").show();
    })
    $(".anaccocunt").click(function () {
        $(".fullsignup").show();
        $(".fulllogin").hide();
    })
     $(".loginaccounts").click(function () {
        $(".fulllogin").show();
       $(".fullsignup").hide();
    })
    $(".loginaccounts").click(function () {
        $(".navlogin").show();
       $(".forgetpassview").hide();
    })
});

BEST OF LUCK......................./