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-sm-6">
<ul class="nav nav-tabs responsive-tabs">
<li class="active"><a href="#home1">Home</a></li>
<li><a href="#profile1">Profile</a></li>
<li><a href="#messages1">Messages</a></li>
<li><a href="#settings1">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home1">
<p>Home Content ....</p>
</div>
<div class="tab-pane" id="profile1">
<p>Profile Content ....</p>
</div>
<div class="tab-pane" id="messages1">
<p>Messages Content .....</p>
</div>
<div class="tab-pane" id="settings1">
<p>Settings Content ....</p>
</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;}
.responsive-tabs {
margin-top:20px;
}
.responsive-tabs-container .tab-content {
padding:10px 20px;
border:1px solid #ddd;
border-top:none;
}
.responsive-tabs-container[class*="accordion-"] .tab-pane {
margin-bottom: 15px;
}
.responsive-tabs-container[class*="accordion-"] .accordion-link {
display: none;
margin-bottom: 10px;
padding: 10px 15px;
background-color: #f5f5f5;
border-radius: 3px;
border: 1px solid #ddd;
color: #333;
}
.responsive-tabs-container[class*="accordion-"] .accordion-link.active {
border-bottom: medium none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
color: #ff6600;
}
@media (max-width: 767px) {
.responsive-tabs-container.accordion-xs .nav-tabs {
display: none;
}
.responsive-tabs-container.accordion-xs .accordion-link {
display: block;
}
.responsive-tabs-container[class*="accordion-"] .tab-pane {
border:1px solid #ddd;
border-top:none;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-width: medium 1px 1px;
margin-bottom: 10px;
margin-top: -10px;
padding: 10px 10px 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.responsive-tabs-container.accordion-sm .nav-tabs {
display: none;
}
.responsive-tabs-container.accordion-sm .accordion-link {
display: block;
}
.responsive-tabs-container[class*="accordion-"] .tab-pane {
border:1px solid #ddd;
border-top:none;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-width: medium 1px 1px;
margin-bottom: 10px;
margin-top: -10px;
padding: 10px 10px 0;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.responsive-tabs-container.accordion-md .nav-tabs {
display: none;
}
.responsive-tabs-container.accordion-md .accordion-link {
display: block;
}
}
@media (min-width: 1200px) {
.responsive-tabs-container.accordion-lg .nav-tabs {
display: none;
}
.responsive-tabs-container.accordion-lg .accordion-link {
display: block;
}
}