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>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-sm-6 col-md-5 col-md-offset-3">
<img alt="Google" class="logo" src="//ssl.gstatic.com/accounts/ui/logo_2x.png"/>
<div class="account-wall accountchooser">
<h1 class="title">
Choose an account</h1>
<ol class="accounts">
<li>
<button type="submit" name="Email" value="[email protected]">
<img class="account-image" alt="" src="https://bootdey.com/img/Content/avatar/avatar1.png"/>
<span class="account-name">Bhaumik Patel</span> <span class="account-email">[email protected]
</span>
</button>
</li>
<li>
<button type="submit" name="Email" value="[email protected]">
<img class="account-image" alt="" src="https://bootdey.com/img/Content/avatar/avatar1.png"/>
<span class="account-name">Bhaumik Patel</span> <span class="account-email">[email protected]
</span>
</button>
</li>
</ol>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-md-offset-3">
<div class="account-wall accountchooser action">
<ul>
<li><a href="#/">Add account </a></li>
<li><a href="#/">Remove</a></li></ul>
</div>
</div>
</div>
</div>
<p class="text-center"><a href="http://www.jquery2dotnet.com">By jquery2dotnet.com</a></p>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
padding-top: 5px;
}
.account-wall {
margin-top: 20px;
padding: 20px 25px 30px;
background-color: #f7f7f7;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.logo {
margin: 25px auto 20px;
float: none;
display: block;
height: 38px;
width: 116px;
}
.title {
font-size: 20px;
color: #262626;
margin: 0 0 15px;
font-weight: normal;
}
.accountchooser ol {
width: 100%;
margin: 0;
list-style: none;
padding: 0;
}
.accountchooser ol li {
height: 76px;
border-top: 1px solid #d5d5d5;
}
.accountchooser ol li button {
padding: 15px 0;
display: block;
width: 100%;
height: 100%;
outline: none;
border: 0;
cursor: pointer;
text-align: left;
background: url(//ssl.gstatic.com/accounts/ui/arrow_right_1x.png) right center no-repeat;
background-size: 21px 21px;
}
.accountchooser ol li button img {
float: left;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 46px;
width: 46px;
}
.accountchooser ol li button span.account-name {
font-weight: bold;
font-size: 16px;
padding-top: 3px;
color: #427fed;
}
.accountchooser ol li button span {
display: block;
margin-left: 58px;
padding-right: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.action {
padding: 5px;
}
.action ul {
width: 100%;
margin: 0;
list-style: none;
padding: 0;
}
.action ul li:first-child {
border-right: 1px solid #d5d5d5;
}
.action ul li {
width: 49%;
display: inline-block;
}
.action ul li a {
color: #427fed;
cursor: pointer;
text-decoration: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
display: inline-block;
background: none;
text-align: center;
padding: 12px 0;
outline: none;
text-decoration: none;
border: 0;
}
