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" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"/>
<div class="container bootstrap snippets bootdey">
<div class="col-md-9 col-sm-8 content">
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="#/">Home</a></li>
<li class="active">Cart</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-info panel-shadow">
<div class="panel-heading">
<h3>
<img class="img-circle img-thumbnail" src="https://bootdey.com/img/Content/user_3.jpg"/>
Matew darfkmoun
</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://www.bootdey.com/image/400x200/FFB6C1/000000" class="img-cart"/></td>
<td><strong>Product 1</strong><p>Size : 26</p></td>
<td>
<form class="form-inline">
<input class="form-control" type="text" value="1"/>
<button rel="tooltip" class="btn btn-default"><i class="fa fa-pencil"></i></button>
<a href="#/" class="btn btn-primary"><i class="fa fa-trash-o"></i></a>
</form>
</td>
<td>$54.00</td>
<td>$54.00</td>
</tr>
<tr>
<td><img src="https://www.bootdey.com/image/400x200/87CEFA/000000" class="img-cart"/></td>
<td><strong>Product 2</strong><p>Size : M</p></td>
<td>
<form class="form-inline">
<input class="form-control" type="text" value="2"/>
<button class="btn btn-default" ><i class="fa fa-pencil"></i></button>
<a href="#/" class="btn btn-primary" rel="tooltip" ><i class="fa fa-trash-o"></i></a>
</form>
</td>
<td>$16.00</td>
<td>$32.00</td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td colspan="4" class="text-right">Total Product</td>
<td>$86.00</td>
</tr>
<tr>
<td colspan="4" class="text-right">Total Shipping</td>
<td>$2.00</td>
</tr>
<tr>
<td colspan="4" class="text-right"><strong>Total</strong></td>
<td>$88.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<a href="#/" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Continue Shopping</a>
<a href="#/" class="btn btn-primary pull-right">Next<span class="glyphicon glyphicon-chevron-right"></span></a>
</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 :
.img-cart {
display: block;
max-width: 50px;
height: auto;
margin-left: auto;
margin-right: auto;
}
table tr td{
border:1px solid #FFFFFF;
}
table tr th {
background:#eee;
}
.panel-shadow {
box-shadow: rgba(0, 0, 0, 0.3) 7px 7px 7px;
}
