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="col-md-6 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading"><a class="pull-right" href="#/">View all</a> <h4>Google plus Buttons Labels</h4></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4"><a href="#/" class="btn btn-default center-block">Button</a></div>
<div class="col-xs-4"><a href="#/" class="btn btn-primary center-block">Primary</a></div>
<div class="col-xs-4"><a href="#/" class="btn btn-danger center-block">Danger</a></div>
</div>
<br/>
<div class="row">
<div class="col-xs-4"><a href="#/" class="btn btn-warning center-block">Warning</a></div>
<div class="col-xs-4"><a href="#/" class="btn btn-info center-block">Info</a></div>
<div class="col-xs-4"><a href="#/" class="btn btn-success center-block">Success</a></div>
</div>
<hr/>
<div class="btn-group btn-group-sm"><button class="btn btn-default">1</button><button class="btn btn-default">2</button><button class="btn btn-default">3</button></div>
<hr/>
<div class="row">
<div class="col-md-4">
<span class="label label-default">Label</span>
<span class="label label-success">Success</span>
</div>
<div class="col-md-4">
<span class="label label-warning">Warning</span>
<span class="label label-info">Info</span>
</div>
<div class="col-md-4">
<span class="label label-danger">Danger</span>
<span class="label label-primary">Primary</span>
</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 :
.btn, .form-control, .panel, .list-group, .well {
border-radius: 1px;
box-shadow: 0 0 0;
}
.panel .panel-heading {
background-color: #FFFFFF;
border-color: #FFFFFF;
color: #262626;
font-size: 16px;
font-weight: 700;
}
.panel .panel-heading a {
font-size: 11px;
font-weight: 400;
}