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">
<section id="content" class="current">
<div class="container text-center">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h2>Beautiful Design</h2>
<h2 style={{/*font-size: 60px;line-height: 60px;margin-bottom: 20px;font-weight: 900;*/}}>With <span class="highlight">Impressive Features</span></h2>
<p>All the features you need to create an amazing website.</p>
</div>
</div>
<div class="row">
<div class="col-lg-offset-1 col-sm-12 col-md-12 col-lg-10">
<div class="features-list">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4">
<div class="feature-block bootdey" style={{/*visibility: visible;*/}}>
<div class="ico fa fa-magic"></div>
<div class="name">
Premium Design
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div>
<div class="more">
<a href="#/" class="btn btn-default btn-sm">Read more</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<div class="feature-block bootdey" style={{/*visibility: visible;*/}}>
<div class="ico fa fa-magnet"></div>
<div class="name">
SEO Optimized
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div>
<div class="more">
<a href="#/" class="btn btn-default btn-sm">Read more</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<div class="feature-block bootdey" style={{/*visibility: visible;*/}}>
<div class="ico fa fa-gift"></div>
<div class="name">
Bonus: PSDs Included
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div>
<div class="more">
<a href="#/" class="btn btn-default btn-sm">Read more</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<div class="feature-block bootdey" style={{/*visibility: visible;*/}}>
<div class="ico fa fa-cubes"></div>
<div class="name">
Custom UI Elements
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div>
<div class="more">
<a href="#/" class="btn btn-default btn-sm">Read more</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<div class="feature-block bootdey" style={{/*visibility: visible;*/}}>
<div class="ico fa fa-expand"></div>
<div class="name">
Fully Responsive
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div>
<div class="more">
<a href="#/" class="btn btn-default btn-sm">Read more</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<div class="feature-block bootdey" style={{/*visibility: visible;*/}}>
<div class="ico fa fa-send-o"></div>
<div class="name">
Contact Form
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames </div>
<div class="more">
<a href="#/" class="btn btn-default btn-sm">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
h2 {
font-size: 50px;
font-weight: 300;
margin-bottom: 10px;
line-height: 50px;
}
.highlight {
color: #2ac5ed;
}
#content {
padding: 70px 0;
}
#content .features-list {
padding-top: 35px;
}
.features-list .feature-block {
margin-bottom: 18px;
}
.features-list .feature-block .ico {
font-size: 37px;
line-height: 70px;
width:70px;
height: 70px;
background: #5accff;
display: inline-block;
border-radius: 50%;
color: #FFFFFF;
margin-bottom: 10px;
}
.features-list .feature-block.bottom-line .ico {
width: auto;
height: auto;
background: transparent;
color: #5accff;
text-align: center;
font-size: 41px;
vertical-align: top;
margin-top: -10px;
}
.features-list .feature-block.bottom-line .fa-github {
font-size: 50px;
}
.features-list .feature-block.bottom-line .fa-dashboard {
font-size: 45px;
margin-top: -15px;
}
.features-list .feature-block.bottom-line .ico {
float: left;
margin-right: 15px;
margin-left: 21px;
}
.features-list .feature-block.bottom-line .features-content {
padding-right: 15px;
display: table;
}
.features-list .feature-block.bottom-line .features-content .name {
margin-bottom: 5px;
}
.features-list .feature-block.bottom-line .features-content .subname {
font-size: 16px;
margin-bottom: 12px;
}
.features-list .feature-block .name {
font-size: 20px;
line-height: 1.25em;
font-weight: bold;
margin-bottom: 10px;
}
.features-list .feature-block .text {
font-size: 12px;
line-height: normal;
margin-bottom: 15px;
}
