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="container">
<div class="row">
<div class='col-md-6'>
<div class="form-group">
<label for="" class="">Select Colour</label>
<div class="dropdown">
<button class="btn _select_color dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Green<span class="caret _right"></span>
<span _text_display="Green" class="color green"></span></button>
<ul class="dropdown-menu _select_color_drop" aria-labelledby="dropdownMenu1">
<li><span _text_display="Green" class="color green"></span></li>
<li><span _text_display="Red" class="color red"></span></li>
<li><span _text_display="Yellow" class="color yellow"></span></li>
<li><span _text_display="Brown" class="color brown"></span></li>
<li><span _text_display="Orange" class="color orange"></span></li>
<li><span _text_display="Pink" class="color pink"></span></li>
<li><span _text_display="Silver" class="color silver"></span></li>
<li><span _text_display="Bule" class="color blue"></span></li>
<li><span _text_display="TEAL" class="color TEAL"></span></li>
<li><span _text_display="NAVY" class="color NAVY"></span></li>
<li><span _text_display="PURPLE" class="color PURPLE"></span></li>
<li><span _text_display="OLIVE" class="color OLIVE"></span></li>
<li><span _text_display="LIME" class="color LIME"></span></li>
<input type="hidden" name="_color" value="Green"/></ul>
</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;}
._select_color{
font-size: 20px;
padding: 10px 12px;
font-weight: 300;
line-height: 28px;
border-radius: 4px;
border: 1px solid #ccc;
-webkit-appearance: none;
width: 100%;
height: auto;
box-shadow: none;
text-align: left;
background-image: none;
color: #796652;
background: white;
}
._select_color_drop {
margin: 0;
padding: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
top: 99%;
border-top: 0;
width: 100%;
}
._select_color_drop > li {
display: inline-block;
padding: 7px;
border-right: 1px solid rgba(192, 192, 192, 0.55);
cursor: pointer;
float: left;
}
._select_color_drop > li > .color,.btn > span.color{
width: 25px;
height: 25px;
border-radius: 4px;
float: left;
}
.btn > span.color{margin-right:10px}
.btn .caret{
float: right;
border-top: 7px solid;
font-size: 28px;
padding-top: 5px;
vertical-align: middle;
position: absolute;
right: 20px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 20px;
}
._select_color_drop > li > .red ,.btn._select_color > span.red{background-color: red;}
._select_color_drop > li > .green ,.btn._select_color > span.green{background-color: green;}
._select_color_drop > li > .yellow ,.btn._select_color > span.yellow{background-color: yellow;}
._select_color_drop > li > .brown ,.btn._select_color > span.brown{background-color: brown;}
._select_color_drop > li > .orange ,.btn._select_color > span.orange{background-color: orange;}
._select_color_drop > li > .pink ,.btn._select_color > span.pink{background-color: pink;}
._select_color_drop > li > .silver ,.btn._select_color > span.silver{background-color: silver;}
._select_color_drop > li > .blue ,.btn._select_color > span.blue{background-color: blue;}
._select_color_drop > li > .TEAL ,.btn._select_color > span.TEAL{background-color: #008080;}
._select_color_drop > li > .NAVY ,.btn._select_color > span.NAVY{background-color: #000080;}
._select_color_drop > li > .PURPLE ,.btn._select_color > span.PURPLE{background-color: #800080;}
._select_color_drop > li > .OLIVE ,.btn._select_color > span.OLIVE{background-color: #808000;}
._select_color_drop > li > .LIME ,.btn._select_color > span.LIME{background-color: #00FF00;}