1. First, 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 my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"/>
<div class="container">
<div class="contentbar">
<div class="row">
<div class="col-md-12 col-lg-12 col-xl-12">
<div class="card m-b-30">
<div class="card-header">
<h5 class="card-title">Cart</h5>
</div>
<div class="card-body">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="cart-container">
<div class="cart-head">
<div class="table-responsive">
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Action</th>
<th scope="col">Photo</th>
<th scope="col">Product</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col" class="text-right">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><a href="#/" class="text-danger"><i class="ri-delete-bin-3-line"></i></a></td>
<td><img src="https://themesbox.in/admin-templates/olian/html/light-vertical/assets/images/ecommerce/product_01.svg" class="img-fluid" width="35" alt="product"/></td>
<td>Apple Watch</td>
<td>
<div class="form-group mb-0">
<input type="number" class="form-control cart-qty" name="cartQty1" id="cartQty1" value="1"/>
</div>
</td>
<td>$10</td>
<td class="text-right">$500</td>
</tr>
<tr>
<th scope="row">2</th>
<td><a href="#/" class="text-danger"><i class="ri-delete-bin-3-line"></i></a></td>
<td><img src="https://themesbox.in/admin-templates/olian/html/light-vertical/assets/images/ecommerce/product_02.svg" class="img-fluid" width="35" alt="product"/></td>
<td>Apple iPhone</td>
<td>
<div class="form-group mb-0">
<input type="number" class="form-control cart-qty" name="cartQty2" id="cartQty2" value="1"/>
</div>
</td>
<td>$20</td>
<td class="text-right">$200</td>
</tr>
<tr>
<th scope="row">3</th>
<td><a href="#/" class="text-danger"><i class="ri-delete-bin-3-line"></i></a></td>
<td><img src="https://themesbox.in/admin-templates/olian/html/light-vertical/assets/images/ecommerce/product_03.svg" class="img-fluid" width="35" alt="product"/></td>
<td>Apple iPad</td>
<td>
<div class="form-group mb-0">
<input type="number" class="form-control cart-qty" name="cartQty3" id="cartQty3" value="1"/>
</div>
</td>
<td>$30</td>
<td class="text-right">$300</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="cart-body">
<div class="row">
<div class="col-md-12 order-2 order-lg-1 col-lg-5 col-xl-6">
<div class="order-note">
<form>
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control" placeholder="Coupon Code" aria-label="Search" aria-describedby="button-addonTags"/>
<div class="input-group-append">
<button class="input-group-text" type="submit" id="button-addonTags">Apply</button>
</div>
</div>
</div>
<div class="form-group">
<label for="specialNotes">Special Note for this order:</label>
<textarea class="form-control" name="specialNotes" id="specialNotes" rows="3" placeholder="Message here"></textarea>
</div>
</form>
</div>
</div>
<div class="col-md-12 order-1 order-lg-2 col-lg-7 col-xl-6">
<div class="order-total table-responsive ">
<table class="table table-borderless text-right">
<tbody>
<tr>
<td>Sub Total :</td>
<td>$1000.00</td>
</tr>
<tr>
<td>Shipping :</td>
<td>$0.00</td>
</tr>
<tr>
<td>Tax(18%) :</td>
<td>$180.00</td>
</tr>
<tr>
<td class="f-w-7 font-18"><h4>Amount :</h4></td>
<td class="f-w-7 font-18"><h4>$1180.00</h4></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="cart-footer text-right">
<button type="button" class="btn btn-info my-1"><i class="ri-save-line mr-2"></i>Update Cart</button>
<a href="page-checkout.html" class="btn btn-success my-1">Proceed to Checkout<i class="ri-arrow-right-line ml-2"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background: #f4f5f7;
margin-top:20px;
}
.cart-container {
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 30px;
}
.cart-container .cart-body {
border-top: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 30px 0 20px;
margin: 20px 0 30px;
}
