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