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">
<h2>Bootstrap Switch Button</h2>
<p class="page-header">Simple Toggle Buttons for Bootstrap 3</p>
<h4>Large</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-lg btn-default">ON</button>
<button class="btn btn-lg btn-primary active">OFF</button>
</div>
<hr/>
<h4>Medium (default)</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</div>
<hr/>
<h4>Small</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-sm btn-default">ON</button>
<button class="btn btn-sm btn-primary active">OFF</button>
</div>
<hr/>
<h4>Tiny</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-primary active">OFF</button>
</div>
<hr/>
<h4>More Switch Examples</h4>
<ul class="list-inline">
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-success active">OFF</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-danger active">OFF</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-info active">OFF</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-success">Y</button>
<button class="btn btn-xs btn-danger active">N</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">1</button>
<button class="btn btn-xs btn-primary active">0</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-primary active">Preview</button>
<button class="btn btn-xs btn-default">Source Code</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-info">Yes</button>
<button class="btn btn-xs btn-primary active">No</button>
</div>
</li>
</ul>
<hr/>
<h4>Collapse (Show/Hide)</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-default" data-toggle="collapse" data-target="#collapsible">Open</button>
<button class="btn btn-primary active" data-toggle="collapse" data-target="#collapsible">Close</button>
</div>
<div class="well collapse" id="collapsible">
Hello world. Here I am.
</div>
<hr/>
<h4>Form Radio Buttons</h4>
<form class="form">
<div class="btn-group btn-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input name="options" value="option1" type="radio"/> Option 1
</label>
<label class="btn btn-default">
<input name="options" value="option2" checked="" type="radio"/> Option 2
</label>
</div>
<button class="btn btn-default">Submit</button>
</form>
</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;} 
