Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, React Js Bootstrap 4 Responsive Pricing Table.
For reactjs new comers, please check the below link:
Friends now I proceed onwards and here is the working code snippet for React Js Bootstrap 4 Responsive Pricing Table and please use this carefully to avoid the mistakes:
1. Firstly, 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 reacttable cd reacttable npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install bootstrap --save npm install jquery --save npm install jquery-slim npm start //For start project again
3. Finally for the main output, we need to add below code into our reacttable/src/App.js file or if you have fresh setup then you can replace reacttable/src/App.js file code with below code:
import React from 'react';
import './App.css';
//Importing bootstrap and other modules
import 'bootstrap/dist/css/bootstrap.min.css';
class Home extends React.Component {
render() {
return (
<div className="maincontainer">
<section>
<div class="container py-5">
<header class="text-center mb-5 text-white">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1>Reactjs Bootstrap 4 pricing table</h1>
<p>Easily create a classy pricing table in Bootstrap 4.<br /> <a href="#" class="text-reset">Reactjs Bootstrap snippet by Jassa</a></p>
</div>
</div>
</header>
<div class="row text-center align-items-end">
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="bg-white p-5 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Basic</h1>
<h2 class="h1 font-weight-bold">$199<span class="text-small font-weight-normal ml-2">/ month</span></h2>
<div class="custom-separator my-4 mx-auto bg-primary"></div>
<ul class="list-unstyled my-5 text-small text-left">
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Lorem ipsum dolor sit amet</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> At vero eos et accusamus</li>
<li class="mb-3 text-muted">
<i class="fa fa-times mr-2"></i>
<del>Nam libero tempore</del>
</li>
<li class="mb-3 text-muted">
<i class="fa fa-times mr-2"></i>
<del>Sed ut perspiciatis</del>
</li>
<li class="mb-3 text-muted">
<i class="fa fa-times mr-2"></i>
<del>Sed ut perspiciatis</del>
</li>
</ul>
<a href="#" class="btn btn-primary btn-block p-2 shadow rounded-pill">Subscribe</a>
</div>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="bg-white p-5 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Pro</h1>
<h2 class="h1 font-weight-bold">$399<span class="text-small font-weight-normal ml-2">/ month</span></h2>
<div class="custom-separator my-4 mx-auto bg-primary"></div>
<ul class="list-unstyled my-5 text-small text-left font-weight-normal">
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Lorem ipsum dolor sit amet</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> At vero eos et accusamus</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Nam libero tempore</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
<li class="mb-3 text-muted">
<i class="fa fa-times mr-2"></i>
<del>Sed ut perspiciatis</del>
</li>
</ul>
<a href="#" class="btn btn-primary btn-block p-2 shadow rounded-pill">Subscribe</a>
</div>
</div>
<div class="col-lg-4">
<div class="bg-white p-5 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Enterprise</h1>
<h2 class="h1 font-weight-bold">$899<span class="text-small font-weight-normal ml-2">/ month</span></h2>
<div class="custom-separator my-4 mx-auto bg-primary"></div>
<ul class="list-unstyled my-5 text-small text-left font-weight-normal">
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Lorem ipsum dolor sit amet</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> At vero eos et accusamus</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Nam libero tempore</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis</li>
</ul>
<a href="#" class="btn btn-primary btn-block p-2 shadow rounded-pill">Subscribe</a>
</div>
</div>
</div>
</div>
</section>
</div>
)
};
}
export default Home;
4. Now friends, we need to below code into our reacttable/src/App.css file for some custom styling:
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.rounded-lg {
border-radius: 1rem !important;
}
.text-small {
font-size: 0.9rem !important;
}
.custom-separator {
width: 5rem;
height: 6px;
border-radius: 1rem;
}
.text-uppercase {
letter-spacing: 0.2em;
}
/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
body {
background: #00B4DB;
background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);
background: linear-gradient(to right, #0083B0, #00B4DB);
color: #514B64;
min-height: 100vh;
}
5. Now friends, we need to below code into our reacttable/public/index.html file for some custom styling:
... <head> ... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Montserrat:600,7"> </head>
Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.
Jassa
Thanks
Leave a Reply