We can make a Responsive CRUD Table in ReactJS with Bootstrap. React js helps us to create a dynamic Web Application and Bootstrap gives us a beautiful design for our Project. Bootstrap CRUD Template in React.
Get the full Information about REACT Bootstrap: https://react-bootstrap.github.io/getting-started/introduction/
Below is an image of the Project
Now First Install the bootstrap Project in your React App. I hope that you would have installed react app using npx create-react-app myFirstApp
Now Install Bootstrap using
npm install react-bootstrap bootstrap@5.0.2 You can use Yarn for Installing the Bootstrap in your react app yarn add react-bootstrap bootstrap@5.0.2 npm takes some time where as Yarn is bit faster than npm
After Installation now, Use Below Links in your index.html (public/index.html) file of your react app. Fontawesome Icons links.
public/index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Now Create a file home.js file for your CRUD Template Page
src/home.js
import "bootstrap/dist/css/bootstrap.min.css";
import {useState} from 'react';
import { Button,Modal,Input } from 'react-bootstrap';
function Home() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<div class="container ">
<div className="crud shadow-lg p-3 mb-5 mt-5 bg-body rounded">
<div class="row ">
<div class="col-sm-3 mt-5 mb-4 text-gred">
<div className="search">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search Student" aria-label="Search"/>
</form>
</div>
</div>
<div class="col-sm-3 offset-sm-2 mt-5 mb-4 text-gred" style={{color:"green"}}><h2><b>Student Details</b></h2></div>
<div class="col-sm-3 offset-sm-1 mt-5 mb-4 text-gred">
<Button variant="primary" onClick={handleShow}>
Add New Student
</Button>
</div>
</div>
<div class="row">
<div class="table-responsive " >
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name </th>
<th>Address</th>
<th>City </th>
<th>Country </th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rual Octo</td>
<td>Deban Steet</td>
<td>Newyork</td>
<td>USA</td>
<td>
<a href="#" class="view" title="View" data-toggle="tooltip" style={{color:"#10ab80"}}><i class="material-icons"></i></a>
<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a href="#" class="delete" title="Delete" data-toggle="tooltip" style={{color:"red"}}><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>2</td>
<td>Demark</td>
<td>City Road.13</td>
<td>Dubai</td>
<td>UAE</td>
<td>
<a href="#" class="view" title="View" data-toggle="tooltip" style={{color:"#10ab80"}}><i class="material-icons"></i></a>
<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a href="#" class="delete" title="Delete" data-toggle="tooltip" style={{color:"red"}}><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>3</td>
<td>Richa Deba</td>
<td>Ocol Str. 57</td>
<td>Berlin</td>
<td>Germany</td>
<td>
<a href="#" class="view" title="View" data-toggle="tooltip" style={{color:"#10ab80"}}><i class="material-icons"></i></a>
<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a href="#" class="delete" title="Delete" data-toggle="tooltip" style={{color:"red"}}><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>4</td>
<td>James Cott</td>
<td>Berut Road</td>
<td>Paris</td>
<td>France</td>
<td>
<a href="#" class="view" title="View" data-toggle="tooltip" style={{color:"#10ab80"}}><i class="material-icons"></i></a>
<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a href="#" class="delete" title="Delete" data-toggle="tooltip" style={{color:"red"}}><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>5</td>
<td>Dheraj</td>
<td>Bulf Str. 57</td>
<td>Delhi</td>
<td>India</td>
<td>
<a href="#" class="view" title="View" data-toggle="tooltip" style={{color:"#10ab80"}}><i class="material-icons"></i></a>
<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a href="#" class="delete" title="Delete" data-toggle="tooltip" style={{color:"red"}}><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>6</td>
<td>Maria James</td>
<td>Obere Str. 57</td>
<td>Tokyo</td>
<td>Japan</td>
<td>
<a href="#" class="view" title="View" data-toggle="tooltip" style={{color:"#10ab80"}}><i class="material-icons"></i></a>
<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a href="#" class="delete" title="Delete" data-toggle="tooltip" style={{color:"red"}}><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* <!--- Model Box ---> */}
<div className="model_box">
<Modal
show={show}
onHide={handleClose}
backdrop="static"
keyboard={false}
>
<Modal.Header closeButton>
<Modal.Title>Add Record</Modal.Title>
</Modal.Header>
<Modal.Body>
<form>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Name"/>
</div>
<div class="form-group mt-3">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Country"/>
</div>
<div class="form-group mt-3">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter City"/>
</div>
<div class="form-group mt-3">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Country"/>
</div>
<button type="submit" class="btn btn-success mt-4">Add Record</button>
</form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
{/* Model Box Finsihs */}
</div>
</div>
</div>
);
}
export default Home;
Call this file in app.js
import './App.css';
import Home from './Home'
function App() {
return (
<div className="App">
<Home/>
</div>
);
}
export default App;
Now run this project on http://localhost:3000/
Subscribe to My Programming YouTube Channel Before Downloading the code :
Download the code From Google Drive: Bootstrap Template in React
See our More Tutorials on React and Nodejs