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-xl px-4 mt-4">
<nav class="nav nav-borders">
<a class="nav-link ms-0" href="https://www.bootdey.com/snippets/view/bs5-edit-profile-account-details" target="__blank">Profile</a>
<a class="nav-link" href="https://www.bootdey.com/snippets/view/bs5-profile-billing-page" target="__blank">Billing</a>
<a class="nav-link" href="https://www.bootdey.com/snippets/view/bs5-profile-security-page" target="__blank">Security</a>
<a class="nav-link active" href="https://www.bootdey.com/snippets/view/bs5-edit-notifications-page" target="__blank">Notifications</a>
</nav>
<hr class="mt-0 mb-4"/>
<div class="row">
<div class="col-lg-8">
<div class="card card-header-actions mb-4">
<div class="card-header">
Email Notifications
<div class="form-check form-switch">
<input class="form-check-input" id="flexSwitchCheckChecked" type="checkbox" checked=""/>
<label class="form-check-label" for="flexSwitchCheckChecked"></label>
</div>
</div>
<div class="card-body">
<form>
<div class="mb-3">
<label class="small mb-1" for="inputNotificationEmail">Default notification email</label>
<input class="form-control" id="inputNotificationEmail" type="email" value="[email protected]" disabled=""/>
</div>
<div class="mb-0">
<label class="small mb-2">Choose which types of email updates you receive</label>
<div class="form-check mb-2">
<input class="form-check-input" id="checkAccountChanges" type="checkbox" checked=""/>
<label class="form-check-label" for="checkAccountChanges">Changes made to your account</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" id="checkAccountGroups" type="checkbox" checked=""/>
<label class="form-check-label" for="checkAccountGroups">Changes are made to groups you're part of</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" id="checkProductUpdates" type="checkbox" checked=""/>
<label class="form-check-label" for="checkProductUpdates">Product updates for products you've purchased or starred</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" id="checkProductNew" type="checkbox" checked=""/>
<label class="form-check-label" for="checkProductNew">Information on new products and services</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" id="checkPromotional" type="checkbox"/>
<label class="form-check-label" for="checkPromotional">Marketing and promotional offers</label>
</div>
<div class="form-check">
<input class="form-check-input" id="checkSecurity" type="checkbox" checked="" disabled=""/>
<label class="form-check-label" for="checkSecurity">Security alerts</label>
</div>
</div>
</form>
</div>
</div>
<div class="card card-header-actions mb-4">
<div class="card-header">
Push Notifications
<div class="form-check form-switch">
<input class="form-check-input" id="smsToggleSwitch" type="checkbox" checked=""/>
<label class="form-check-label" for="smsToggleSwitch"></label>
</div>
</div>
<div class="card-body">
<form>
<div class="mb-3">
<label class="small mb-1" for="inputNotificationSms">Default SMS number</label>
<input class="form-control" id="inputNotificationSms" type="tel" value="123-456-7890" disabled=""/>
</div>
<div class="mb-0">
<label class="small mb-2">Choose which types of push notifications you receive</label>
<div class="form-check mb-2">
<input class="form-check-input" id="checkSmsComment" type="checkbox" checked=""/>
<label class="form-check-label" for="checkSmsComment">Someone comments on your post</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" id="checkSmsShare" type="checkbox"/>
<label class="form-check-label" for="checkSmsShare">Someone shares your post</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" id="checkSmsFollow" type="checkbox" checked=""/>
<label class="form-check-label" for="checkSmsFollow">A user follows your account</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" id="checkSmsGroup" type="checkbox"/>
<label class="form-check-label" for="checkSmsGroup">New posts are made in groups you're part of</label>
</div>
<div class="form-check">
<input class="form-check-input" id="checkSmsPrivateMessage" type="checkbox" checked=""/>
<label class="form-check-label" for="checkSmsPrivateMessage">You receive a private message</label>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">Notification Preferences</div>
<div class="card-body">
<form>
<div class="form-check mb-2">
<input class="form-check-input" id="checkAutoGroup" type="checkbox" checked=""/>
<label class="form-check-label" for="checkAutoGroup">Automatically subscribe to group notifications</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" id="checkAutoProduct" type="checkbox"/>
<label class="form-check-label" for="checkAutoProduct">Automatically subscribe to new product notifications</label>
</div>
<button class="btn btn-danger-soft text-danger">Unsubscribe from all notifications</button>
</form>
</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{margin-top:20px;
background-color:#f2f6fc;
color:#69707a;
}
.img-account-profile {
height: 10rem;
}
.rounded-circle {
border-radius: 50% !important;
}
.card {
box-shadow: 0 0.15rem 1.75rem 0 rgb(33 40 50 / 15%);
}
.card .card-header {
font-weight: 500;
}
.card-header:first-child {
border-radius: 0.35rem 0.35rem 0 0;
}
.card-header {
padding: 1rem 1.35rem;
margin-bottom: 0;
background-color: rgba(33, 40, 50, 0.03);
border-bottom: 1px solid rgba(33, 40, 50, 0.125);
}
.form-control, .dataTable-input {
display: block;
width: 100%;
padding: 0.875rem 1.125rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1;
color: #69707a;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #c5ccd6;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.35rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.nav-borders .nav-link.active {
color: #0061f2;
border-bottom-color: #0061f2;
}
.nav-borders .nav-link {
color: #69707a;
border-bottom-width: 0.125rem;
border-bottom-style: solid;
border-bottom-color: transparent;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0;
padding-right: 0;
margin-left: 1rem;
margin-right: 1rem;
}
.btn-danger-soft {
color: #000;
background-color: #f1e0e3;
border-color: #f1e0e3;
}
