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>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container bootstrap snippets bootdey">
<div class="col-md-6">
<div class="header bordered-blueberry">Rounded & Shadowed Alerts</div>
<div class="alert alert-warning fade in radius-bordered alert-shadowed">
<button class="close" data-dismiss="alert">
×
</button>
<span class="badge badge-success graded">
0
</span>
<strong>Warning</strong> Your monthly traffic is reaching limit.
</div>
<div class="alert alert-success fade in radius-bordered alert-shadowed">
<button class="close" data-dismiss="alert">
×
</button>
<span class="badge badge-darkorange graded">
2
</span>
<strong>Success</strong> Two Tasks Are Completed.
</div>
<div class="alert alert-info fade in radius-bordered alert-shadowed">
<button class="close" data-dismiss="alert">
×
</button>
<span class="badge badge-sky graded">
8
</span>
<strong>Info!</strong> You have 8 unread messages.
</div>
<div class="alert alert-danger fade in radius-bordered alert-shadowed">
<button class="close" data-dismiss="alert">
×
</button>
<i class="fa-fw fa fa-times"></i>
<strong>Error!</strong> Update has failed.
</div>
</div>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
.alert.alert-shadowed {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.alert.radius-bordered {
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
-moz-background-clip: padding;
border-radius: 3px;
background-clip: padding-box;
}
.alert {
margin-bottom: 20px;
margin-top: 0;
color: #fff;
border-width: 0;
border-left-width: 5px;
padding: 10px;
border-radius: 0;
}
.alert.alert-warning {
border-color: #ffce55;
color: #555;
background: #fff1a8;
}
.alert.alert-success {
border-color: #8cc474;
background: #a0d468;
}
.alert.alert-info {
border-color: #11a9cc;
background: #57b5e3;
}
.alert.alert-danger {
border-color: #df5138;
background: #e46f61;
}
.label-success.graded, .badge-success.graded {
background: linear-gradient(to right,#53a93f,#b0e0a4)!important;
}
.label-darkorange.graded, .badge-darkorange.graded {
background: linear-gradient(to right,#ed4e2a,#f5a998)!important;
}
.label-darkorange, .badge-darkorange {
background-color: #ed4e2a;
background-image: none!important;
}
.label-sky.graded, .badge-sky.graded {
background: linear-gradient(to right,#11a9cc,#c4e6f6)!important;
}
.label-sky, .badge-sky {
background-color: #11a9cc;
background-image: none!important;
}