Build React Login & Sign Up UI Template with Bootstrap 5

Today, we are going to create a fantastic React login and sign up user interface template using Bootstrap 5. This login & sign up UI template will surely help you in building simple react authentication system.
Login system typically allows an individual us to gain access in any software system securely. Sign up is the process which enables a particular user to register in any web and mobile application.
This step by step tutorial will help you learn how can you create an eye-catching login and user registration template for your next React project. We will be employing the Bootstrap front-end framework to build this react login system.
We’ll set up an uncomplicated React app and start building from scratch and implement a login and registration UI component in it.
Table of contents
Prerequisite
To get started, you must have basic knowledge of HTML, CSS, React, JavaScript, TypeScript, and a little bit of ES6. Make sure you must have Node set up in your machine, check out this tutorial on setting up Node Install Node JS on Mac OS.
Set up React 16+ App
Run command to install React project for building React Login & Sign Up UI template with Bootstrap using create-react-app.
npx create-react-app react-login-signup-ui-template
Enter inside the react-login-signup-ui-template project.
cd react-login-signup-ui-template
Install & Set Up Bootstrap 5 in React
Next, Install and set up Bootstrap UI framework, and it provides beautiful UI components.
npm install bootstrap
Then, import bootstrap.min.css from node_modules inside src/App.js file.
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
function App() {
return (
<div className="App">
<h3>Build Sign Up & Login UI Template in React</h3>
</div>
);
}
export default App;
Create React Login & Sign Up Components
Now, we will create a login and sign up components in React app, create a components directory in the src folder. And also create login.component.js and signup.component.js files inside of it.
Add the following code in login.component.js file.
import React, { Component } from "react";
export default class Login extends Component {
render() {
return (
<div>
<h3>React Login Component</h3>
</div>
);
}
}
Add the following code in signup.component.js file.
import React, { Component } from "react";
export default class SignUp extends Component {
render() {
return (
<div>
<h3>React SignUp Component</h3>
</div>
);
}
}
Enable Routing in React
Run the command in the terminal to install react-router-dom module to enable Router service in React.
npm install react-router-dom
Then, go to src/index.js file and insert the following code into the file as given below..
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()
Next, import BrowserRouter as Router, Routes, Route, Link React router modules to enable the routers with their associative components. Go to src/App.js and include the following code in it.
import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Login from './components/login.component'
import SignUp from './components/signup.component'
function App() {
return (
<Router>
<div className="App">
<nav className="navbar navbar-expand-lg navbar-light fixed-top">
<div className="container">
<Link className="navbar-brand" to={'/sign-in'}>
positronX
</Link>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to={'/sign-in'}>
Login
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to={'/sign-up'}>
Sign up
</Link>
</li>
</ul>
</div>
</div>
</nav>
<div className="auth-wrapper">
<div className="auth-inner">
<Routes>
<Route exact path="/" element={<Login />} />
<Route path="/sign-in" element={<Login />} />
<Route path="/sign-up" element={<SignUp />} />
</Routes>
</div>
</div>
</div>
</Router>
)
}
export default App
Create React Login Form UI Template with Bootstrap
Next, we will add the following code inside components/login.component.js file to build the login form template.
import React, { Component } from 'react'
export default class Login extends Component {
render() {
return (
<form>
<h3>Sign In</h3>
<div className="mb-3">
<label>Email address</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
/>
</div>
<div className="mb-3">
<label>Password</label>
<input
type="password"
className="form-control"
placeholder="Enter password"
/>
</div>
<div className="mb-3">
<div className="custom-control custom-checkbox">
<input
type="checkbox"
className="custom-control-input"
id="customCheck1"
/>
<label className="custom-control-label" htmlFor="customCheck1">
Remember me
</label>
</div>
</div>
<div className="d-grid">
<button type="submit" className="btn btn-primary">
Submit
</button>
</div>
<p className="forgot-password text-right">
Forgot <a href="#">password?</a>
</p>
</form>
)
}
}
Following will be the output:
Build React Sign Up UI Template with Bootstrap
Next, we will place the following code inside components/signup.component.js file to build the sign up form auth template UI template.
import React, { Component } from 'react'
export default class SignUp extends Component {
render() {
return (
<form>
<h3>Sign Up</h3>
<div className="mb-3">
<label>First name</label>
<input
type="text"
className="form-control"
placeholder="First name"
/>
</div>
<div className="mb-3">
<label>Last name</label>
<input type="text" className="form-control" placeholder="Last name" />
</div>
<div className="mb-3">
<label>Email address</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
/>
</div>
<div className="mb-3">
<label>Password</label>
<input
type="password"
className="form-control"
placeholder="Enter password"
/>
</div>
<div className="d-grid">
<button type="submit" className="btn btn-primary">
Sign Up
</button>
</div>
<p className="forgot-password text-right">
Already registered <a href="/sign-in">sign in?</a>
</p>
</form>
)
}
}
Given below will be the output for registration UI form in React.
Add Styling to Auth Components
In next step, we will add styling to our React login UI app to make it beautiful. Go to src/index.css file and add the given below code.
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
* {
box-sizing: border-box;
}
body {
background: #1C8EF9 !important;
min-height: 100vh;
display: flex;
font-weight: 400;
font-family: 'Fira Sans', sans-serif;
}
h1,h2,h3,h4,h5,h6,label,span {
font-weight: 500;
font-family: 'Fira Sans', sans-serif;
}
body, html, .App, #root, .auth-wrapper {
width: 100%;
height: 100%;
}
.navbar-light {
background-color: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}
.auth-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.auth-inner {
width: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all .3s;
}
.auth-wrapper .form-control:focus {
border-color: #167bff;
box-shadow: none;
}
.auth-wrapper h3 {
text-align: center;
margin: 0;
line-height: 1;
padding-bottom: 20px;
}
.custom-control-label {
font-weight: 400;
}
.forgot-password,
.forgot-password a {
text-align: right;
font-size: 13px;
padding-top: 10px;
color: #7f7d7d;
margin: 0;
}
.forgot-password a {
color: #167bff;
}
You have to start the React app using the given command:
npm start
Final Thought
Finally, we have built React Login & Sign Up UI template using Bootstrap UI framework.
I hope this tutorial will help you understand how to use Bootstrap UI components to make beautiful components in React.
Please consider it sharing with others.