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 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 [email protected] --save
npm start //For start project again
3. 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>
<div class="container">
<div class="row mb-5">
<div class="col-md-4 mb-5">
<div class="card bg-primary mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-secondary mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-success mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-info mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-warning mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-danger mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-12 mt-4">
<h3>Background Gradient</h3>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-primary bg-gradient mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-secondary bg-gradient mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-success bg-gradient mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-info bg-gradient mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-warning bg-gradient mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card bg-danger bg-gradient mb-3 text-center">
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</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 :
.card:not([class*=card-outline-]) {
border: 0;
}
.card {
height: 100%;
box-shadow: 0 9px 23px rgba(0, 0, 0, 0.09), 0 5px 5px rgba(0, 0, 0, 0.06) !important;
-webkit-transition: box-shadow 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
-moz-transition: box-shadow 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
-o-transition: box-shadow 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
transition: box-shadow 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
-webkit-border-radius: 0.4167rem;
-moz-border-radius: 0.4167rem;
-ms-border-radius: 0.4167rem;
-o-border-radius: 0.4167rem;
border-radius: 0.4167rem;
}
.blockquote {
margin-bottom: 1rem;
font-size: 1.25rem;
}
blockquote {
padding: .5rem 1rem;
font-size: 1.25rem;
border-left: .25rem solid #eceeef;
}
blockquote {
margin: 0 0 1rem;
}
.blockquote p {
font-size: 1.1rem;
}
.card .card-body p {
margin-bottom: 1rem;
}
/* Backgrounds */
.bg-primary {
color: #FFFFFF;
background-color: #07a7e3 !important;
}
.bg-secondary {
color: #FFFFFF;
background-color: #4f5b60 !important;
}
.bg-success {
color: #FFFFFF;
background-color: #0ad251 !important;
}
.bg-info {
color: #FFFFFF;
background-color: #55d3f5 !important;
}
.bg-warning {
color: #ac9a02 !important;
background-color: #fce418 !important;
}
.bg-danger {
color: #FFFFFF;
background-color: #f43a59 !important;
}
.bg-dark {
background-color: #122f3b !important;
}
.bg-light {
background-color: #F7F7FA !important;
}
.bg-tranparent {
background-color: transparent !important;
}
.bg-dark *,
.bg-danger *,
.bg-warning *,
.bg-info *,
.bg-success *,
.bg-secondary *,
.bg-primary *,
.bg-dark .batch-icon,
.bg-danger .batch-icon,
.bg-warning .batch-icon,
.bg-info .batch-icon,
.bg-success .batch-icon,
.bg-secondary .batch-icon,
.bg-primary .batch-icon {
color: #FFFFFF;
}
.bg-gradient [class^="card-"],
.bg-gradient [class^="card-"] * {
color: #FFFFFF !important;
}
/* Highlight Colors - Bottom Border */
.highlight-color-blue {
color: #FFFFFF !important;
background-color: #07a7e3 !important;
}
.highlight-color-green {
color: #FFFFFF !important;
background-color: #0ad251 !important;
}
.highlight-color-orange {
color: #FFFFFF !important;
background-color: #FC9131 !important;
}
.highlight-color-yellow {
color: #FFFFFF !important;
background-color: #F8D800 !important;
}
.highlight-color-red {
color: #FFFFFF !important;
background-color: #EA5455 !important;
}
.highlight-color-purple {
color: #FFFFFF !important;
background-color: #973999 !important;
}
.bg-gradient {
color: #FFFFFF !important;
background: #07a7e3;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #07a7e3 0%, #32dac3 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #07a7e3 0%, #32dac3 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #07a7e3 0%, #32dac3 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=$qp-color-1, endColorstr=$qp-color-2, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.bg-gradient [class^="card-"],
.bg-gradient [class^="card-"] * {
color: #FFFFFF !important;
}
.bg-secondary.bg-gradient {
color: #FFFFFF !important;
background: #4f5b60;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #4f5b60 0%, #97a9b2 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #4f5b60 0%, #97a9b2 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #4f5b60 0%, #97a9b2 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=$qp-color-1, endColorstr=$qp-color-2, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
}
.bg-success.bg-gradient {
color: #FFFFFF !important;
background: #28C76F;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #28C76F 0%, #81FBB8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #28C76F 0%, #81FBB8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #28C76F 0%, #81FBB8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=$qp-color-1, endColorstr=$qp-color-2, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
}
.bg-info.bg-gradient {
color: #FFFFFF !important;
background: #3677FF;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #3677FF 0%, #FFD26F 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #3677FF 0%, #FFD26F 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #3677FF 0%, #FFD26F 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=$qp-color-1, endColorstr=$qp-color-2, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
}
.bg-warning.bg-gradient {
color: #4f5b60 !important;
background: #FC9131;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #FC9131 0%, #FCCF31 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #FC9131 0%, #FCCF31 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #FC9131 0%, #FCCF31 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=$qp-color-1, endColorstr=$qp-color-2, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
}
.bg-danger.bg-gradient {
color: #FFFFFF !important;
background: #EA5455;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #EA5455 0%, #FC9131 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #EA5455 0%, #FC9131 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #EA5455 0%, #FC9131 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=$qp-color-1, endColorstr=$qp-color-2, GradientType=1);
/* IE6-9 fallback on horizontal gradient */
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
}