Home Bootstrap 5 Reactjs Bootstrap 5 User Login Registration Forms Show Hide on Button Click

Reactjs Bootstrap 5 User Login Registration Forms Show Hide on Button Click

by therichpost
Published: Last Updated on 0 comment
Reactjs Bootstrap 5 User Login Registration Forms Show Hide on Button Click

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Bootstrap 5 User Login Registration Forms Show Hide on Button Click.

Guy’s with in this post we will do below things:

  1. Add Bootstrap 5 in Reactjs.
  2. Show Hide div on button click in reactjs.

React Free Templates
Reactjs Bootstrap 5 User Login Registration Forms Show Hide on Button Click
Reactjs Bootstrap 5 User Login Registration Forms Show Hide on Button Click
Reactjs Bootstrap 5 User Register Form
Reactjs Bootstrap 5 User Register Form

For reactjs and bootstrap 5 new comers, please check the below links:

Reactjs Basic Tutorials

Bootstrap 5 Tutorials


Friends now I proceed onwards and here is the working code snippet for react ecommerce template free and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reactboot5

cd reactboot5

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install bootstrap --save

npm i @popperjs/core

npm start //For start project again

3. Finally for the main output, we need to add below code into our reactboot5/src/App.js file or if you have fresh setup then you can replace reactboot5/src/App.js file code with below code:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

class App extends React.Component {
  //set the state default value
  constructor(props) {
    super(props);
    this.state = {login: 'show col-lg-6 px-lg-4', register: 'hide'};
  }
  showlogin= () => { //button click functionality
  
    this.setState({login: 'show col-lg-6 px-lg-4'});
    this.setState({register: 'hide'});
  }

  showregister= () => { //button click functionality
  
    this.setState({login: 'hide'});
    this.setState({register: 'show col-lg-6 px-lg-4'});
  }
  render() {
   
    return (
    <div className="App">
     
     <div className="page-holder align-items-center py-4 bg-gray-100 vh-100">
      <div className="container">
        <div className="row align-items-center">
          <div className={this.state.login}>
            <div className="card">
              <div className="card-header px-lg-5">
                <div className="card-heading text-primary">Jassa Login</div>
              </div>
              <div className="card-body p-lg-5">
                <h3 className="mb-4">Hi, welcome back! ??</h3>
                <p className="text-muted text-sm mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                <form id="loginForm" action="index.html">
                  <div className="form-floating mb-3">
                    <input className="form-control" id="floatingInput" type="email" placeholder="name@example.com" required />
                    <label for="floatingInput">Email address</label>
                  </div>
                  <div className="form-floating mb-3">
                    <input className="form-control" id="floatingPassword" type="password" placeholder="Password" required />
                    <label for="floatingPassword">Password</label>
                  </div>
                  <div className="form-check mb-3">
                    <input className="form-check-input" type="checkbox" name="remember" id="remember" />
                    <label className="form-check-label" for="remember">Remember me</label>
                  </div>
                  <button className="btn btn-primary" type="button">Submit</button>
                </form>
              </div>
              <div className="card-footer px-lg-5 py-lg-4">
                <div className="text-sm text-muted">Don't have an account? <a onClick={this.showregister}>Register</a>.</div>
              </div>
            </div>
          </div>
          {/*} register {*/}
           <div className={this.state.register}>
            <div className="card">
              <div className="card-header px-lg-5">
                <div className="card-heading text-primary">Jassa Register</div>
              </div>
              <div className="card-body p-lg-5">
                <h3 className="mb-4">Get started with Jassa</h3>
                <p className="text-muted text-sm mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
                <form action="index.html">
                  <div className="form-floating mb-3">
                    <input className="form-control" id="username" type="email" placeholder="name@example.com" required />
                    <label for="username">Username</label>
                  </div>
                  <div className="form-floating mb-3">
                    <input className="form-control" id="floatingInput" type="email" placeholder="name@example.com" required />
                    <label for="floatingInput">Email address</label>
                  </div>
                  <div className="form-floating mb-3">
                    <input className="form-control" id="floatingPassword" type="password" placeholder="Password" required />
                    <label for="floatingPassword">Password</label>
                  </div>
                  <div className="form-check mb-3">
                    <input className="form-check-input" type="checkbox" name="agree" id="agree" />
                    <label className="form-check-label" for="agree">I agree with the <a href="#">Terms & Conditions</a>.</label>
                  </div>
                  <div className="form-group">
                    <button className="btn btn-primary" id="regidter" type="button" name="registerSubmit">Register</button>
                  </div>
                </form>
              </div>
              <div className="card-footer px-lg-5 py-lg-4">
                <div className="text-sm text-muted">Already have an account? <a onClick={this.showlogin} >Login</a>.</div>
              </div>
            </div>
          </div>
         <div className="col-lg-6 col-xl-5 ms-xl-auto px-lg-4 text-center text-primary"><img className="img-fluid mb-4" width="300" src="https://therichpost.com/wp-content/uploads/2021/06/login_page_image.png" alt="" style={{transform: "rotate(10deg)"}} />
            <h1 className="mb-4">Therichpost.com <br className="d-none d-lg-inline" />free code  snippets.</h1>
            <p className="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
          </div>
        </div>
      </div>
    </div>
    </div>
)
};
}
export default App;

4. Now we need to add below code into our reactboot5/src/App.css file:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&amp;display=swap");
.card-header:first-child {
  border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
}
.card-header {
  position: relative;
  padding: 2rem 2rem;
  border-bottom: none;
  background-color: white;
  box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
  z-index: 2;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: none;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  border-radius: 1rem;
}
.bg-gray-100 {
  background-color: #f8f9fa !important;
}
body{
  font-family: 'Poppins'!important;
}
.text-primary {
  color: #4650dd !important;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
 
  font-weight: 700;
  line-height: 1.2;
}
.text-muted {
  color: #6c757d !important;
}
.lead {
  font-size: 1.125rem;
  font-weight: 300;
}
.text-sm {
  font-size: .7875rem !important;
}
h3, .h3 {
  font-size: 1.575rem;
}
.hide
{
    display: none;
}
a {
    color: #4650dd!important;
    text-decoration: underline!important;
    cursor: pointer;
  }

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.