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 bootstrap snippets bootdey">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<h2>
160 results found for: <span class="text-navy">"Bootdey"</span>
</h2>
<small>Request time (0.23 seconds)</small>
<div class="search-form">
<form action="#" method="get">
<div class="input-group">
<input type="text" placeholder="Bootdey" name="search" class="form-control input-lg"/>
<div class="input-group-btn">
<button class="btn btn-lg btn-primary" type="submit">
Search
</button>
</div>
</div>
</form>
</div>
<div class="hr-line-dashed"></div>
<div class="search-result">
<h3><a href="#/">Bootdey</a></h3>
<a href="#/" class="search-link">www.bootdey.com</a>
<p>
</p>
</div>
<div class="hr-line-dashed"></div>
<div class="search-result">
<h3><a href="#/">Bootdey</a></h3>
<a href="#/" class="search-link">https://bootdey.com/</a>
<p>
Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers
</p>
</div>
<div class="hr-line-dashed"></div>
<div class="search-result">
<h3><a href="#/">Bootdey | Facebook</a></h3>
<a href="#/" class="search-link">https://www.facebook.com/bootdey</a>
<p>
Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers
</p>
</div>
<div class="hr-line-dashed"></div>
<div class="search-result">
<h3><a href="#/">Bootdey | Twitter</a></h3>
<a href="#/" class="search-link">www.twitter.com/bootdey</a>
<p>
Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers
</p>
</div>
<div class="hr-line-dashed"></div>
<div class="text-center">
<div class="btn-group">
<button class="btn btn-white" type="button"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button class="btn btn-white">1</button>
<button class="btn btn-white active">2</button>
<button class="btn btn-white">3</button>
<button class="btn btn-white">4</button>
<button class="btn btn-white">5</button>
<button class="btn btn-white">6</button>
<button class="btn btn-white">7</button>
<button class="btn btn-white" type="button"><i class="glyphicon glyphicon-chevron-right"></i> </button>
</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:#eee;
}
.ibox-content {
background-color: #FFFFFF;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #E7EAEC;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
}
.search-form {
margin-top: 10px;
}
.search-result h3 {
margin-bottom: 0;
color: #1E0FBE;
}
.search-result .search-link {
color: #006621;
}
.search-result p {
font-size: 12px;
margin-top: 5px;
}
.hr-line-dashed {
border-top: 1px dashed #E7EAEC;
color: #ffffff;
background-color: #ffffff;
height: 1px;
margin: 20px 0;
}
h2 {
font-size: 24px;
font-weight: 100;
}