Import react-bootstrap.

frontend/src/App.jsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
 import BarcodeScannerComponent from 'react-qr-barcode-scanner';
 import toast, { Toaster } from 'react-hot-toast';
+import { Container, Row, Col } from 'react-bootstrap';
 
 // Styles
 import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   // State to store the latest scanned data
@@ -31,12 +33,23 @@ function App() {
   };
 
     return (
-	<div className="box">
+	<Container>
+	    <Row>
+		<Col>
 	    {/* Notification toaster for displaying scan success messages */}
-	    <Toaster position="top-right" reverseOrder={false} />
+		    <Toaster position="top-right" reverseOrder={false} />
+		</Col>
+	    </Row>
+	    <Row>
+		<Col>
 
 	    {/* Scanner title */}
-	    <div className="title">BrmInv</div>
+		    <div className="title">BrmInv</div>
+		</Col>
+	    </Row>
+
+	    <Row>
+		<Col>
 
 	    {/* Barcode scanner component */}
 	    <div className="scan" style={{border: '1px solid black'}}>
@@ -47,10 +60,18 @@ function App() {
 		    delay={1500} // 1.5 seconds delay between scans
 		/>
 	    </div>
+		</Col>
+	    </Row>
 
+	    <Row>
+		<Col>
 	    {/* Display the current scanned data */}
-	    <p>Scanned Data: {currentData}</p>
+		    <p>Scanned Data: {currentData}</p>
+		</Col>
+	    </Row>
 
+	    <Row>
+		<Col>
 	    {/* Table to display scan history */}
 	    <h2>Scan History</h2>
 	    <table>
@@ -69,7 +90,9 @@ function App() {
 		    ))}
 		</tbody>
 	    </table>
-	</div>
+		</Col>
+	    </Row>
+	    </Container>
 		);
     }