React js UI example. form inputs

React js UI example and template, form inputs! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: form,input

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>
			
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <h5 class="row-title before-pink"><i class="fa fa-expand pink"></i>Input Sizes</h5>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-xs-12">
                    <div class="widget">
                        <div class="widget-header bordered-top bordered-palegreen">
                            <span class="widget-caption">Default Inputs</span>
                        </div>
                        <div class="widget-body">
                            <div class="collapse in">
                                <form role="form">
                                    <div class="form-group">
                                        <label for="xsinput">Extra Small Input</label>
                                        <input type="text" class="form-control input-xs" id="xsinput" placeholder="Extra Small Input"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="sminput">Small Input</label>
                                        <input type="text" class="form-control input-sm" id="sminput" placeholder="Small Input"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="definpu">Default Input</label>
                                        <input type="text" class="form-control" id="definput" placeholder="Default Input"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="lginput">Large Input</label>
                                        <input type="text" class="form-control input-lg" id="lginput" placeholder="Large Input"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="xlginput">Extra Large Input</label>
                                        <input type="text" class="form-control input-xl" id="xlginput" placeholder="Extra Large Input"/>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-xs-12">
                    <div class="widget">
                        <div class="widget-header bordered-top bordered-darkorange">
                            <span class="widget-caption">Disabled Inputs</span>
                        </div>
                        <div class="widget-body">
                            <div class="collapse in">
                                <form role="form">
                                    <div class="form-group">
                                        <label for="xsinput">Extra Small Input</label>
                                        <input type="text" class="form-control input-xs" id="xsinput" placeholder="Extra Small Input" disabled="disabled"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="sminput">Small Input</label>
                                        <input type="text" class="form-control input-sm" id="sminput" placeholder="Small Input" disabled="disabled"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="definpu">Default Input</label>
                                        <input type="text" class="form-control" id="definput" placeholder="Default Input" disabled="disabled"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="lginput">Large Input</label>
                                        <input type="text" class="form-control input-lg" id="lginput" placeholder="Large Input" disabled="disabled"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="xlginput">Extra Large Input</label>
                                        <input type="text" class="form-control input-xl" id="xlginput" placeholder="Extra Large Input" disabled="disabled"/>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="row-title before-sky"><i class="glyphicon glyphicon-plane sky"></i>Inputs With Icons</h5>
            <div class="row">
                <div class="col-lg-4 col-sm-4 col-xs-12">
                    <div class="widget">
                        <div class="widget-header">
                            <span class="widget-caption">Inputs With Default Icons</span>
                        </div>
                        <div class="widget-body bordered-top bordered-pink">
                            <div class="collapse in">
                                <form role="form">
                                    <div class="form-group">
                                        <span class="input-icon icon-right">
                                            <input type="text" class="form-control input-xs"/>
                                            <i class="fa fa-times purple"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon">
                                            <input type="text" class="form-control input-sm"/>
                                            <i class="glyphicon glyphicon-search blue"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon icon-right">
                                            <input type="text" class="form-control"/>
                                            <i class="fa fa-user darkorange"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon">
                                            <input type="text" class="form-control input-lg"/>
                                            <i class="fa fa-envelope palegreen"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon icon-right">
                                            <input type="text" class="form-control input-xl"/>
                                            <i class="glyphicon glyphicon-lock maroon"></i>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-4 col-xs-12">
                    <div class="widget">
                        <div class="widget-header">
                            <span class="widget-caption">Inputs With Circular Icons</span>
                        </div>
                        <div class="widget-body bordered-top bordered-sky">
                            <div class="collapse in">
                                <form role="form">
                                    <div class="form-group">
                                        <span class="input-icon icon-right">
                                            <input type="text" class="form-control input-xs"/>
                                            <i class="fa fa-times sky circular"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon">
                                            <input type="text" class="form-control input-sm"/>
                                            <i class="glyphicon glyphicon-search danger circular"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon icon-right">
                                            <input type="text" class="form-control"/>
                                            <i class="fa fa-user success circular"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon">
                                            <input type="text" class="form-control input-lg"/>
                                            <i class="fa fa-envelope info circular"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon icon-right">
                                            <input type="text" class="form-control input-xl"/>
                                            <i class="glyphicon glyphicon-earphone darkpink circular"></i>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-4 col-xs-12">
                    <div class="widget">
                        <div class="widget-header">
                            <span class="widget-caption">Inputs With Inverted Icons</span>
                        </div>
                        <div class="widget-body bordered-top bordered-yellow">
                            <div class="collapse in">
                                <form role="form">
                                    <div class="form-group">
                                        <span class="input-icon icon-right inverted">
                                            <input type="text" class="form-control input-xs"/>
                                            <i class="fa fa-times bg-purple"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon inverted">
                                            <input type="text" class="form-control input-sm"/>
                                            <i class="glyphicon glyphicon-search bg-blue"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon icon-right inverted">
                                            <input type="text" class="form-control"/>
                                            <i class="fa fa-user bg-darkorange"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon inverted">
                                            <input type="text" class="form-control input-lg"/>
                                            <i class="fa fa-envelope bg-palegreen"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="input-icon icon-right inverted">
                                            <input type="text" class="form-control input-xl"/>
                                            <i class="glyphicon glyphicon-lock bg-pink"></i>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="row-title before-lightred"><i class="fa fa-check-square lightred"></i>Input Groups and Button Addons</h5>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-xs-12">
                    <div class="widget radius-bordered">
                        <div class="widget-header">
                            <span class="widget-caption">Input Groups</span>
                        </div>
                        <div class="widget-body bordered-top bordered-success">
                            <div class="collapse in">
                                <form role="form">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon">@</span>
                                            <input type="text" class="form-control" placeholder="Username"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input type="text" class="form-control"/>
                                            <span class="input-group-addon">.0</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon">$</span>
                                            <input type="text" class="form-control"/>
                                            <span class="input-group-addon">.0</span>
                                        </div>
                                    </div>
                                    <h5>Sizing</h5>
                                    <div class="form-group">
                                        <div class="input-group input-group-xs">
                                            <span class="input-group-addon">@</span>
                                            <input type="text" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-addon">@</span>
                                            <input type="text" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon">@</span>
                                            <input type="text" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-addon">@</span>
                                            <input type="text" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group input-group-xl">
                                            <span class="input-group-addon">@</span>
                                            <input type="text" class="form-control"/>
                                        </div>
                                    </div>
                                    <h5>With Icon</h5>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user darkorange"></i></span>
                                            <input type="text" class="form-control" placeholder="Username"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon bg-blue bordered-blue"><i class="fa fa-envelope-o"></i></span>
                                            <input type="text" class="form-control" placeholder="Email Address"/>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-xs-12">
                    <div class="widget radius-bordered">
                        <div class="widget-header">
                            <span class="widget-caption">Button Addons</span>
                        </div>
                        <div class="widget-body bordered-top bordered-info">
                            <div class="collapse in">
                                <form role="form">
                                    <div class="row">
                                        <div class="col-lg-6 col-sm-6 col-xs-6">
                                            <div class="input-group">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">Go</button>
                                                </span>
                                                <input type="text" class="form-control"/>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-sm-6 col-xs-6">
                                            <div class="input-group">
                                                <input type="text" class="form-control"/>
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default shiny" type="button">Go</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="horizontal-space"></div>
                                    <hr class="wide"/>
                                    <h4>Sizing</h4>
                                    <div class="row">
                                        <div class="col-lg-6 col-sm-6 col-xs-6">
                                            <div class="input-group input-group-xs">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">Go</button>
                                                </span>
                                                <input type="text" class="form-control"/>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-sm-6 col-xs-6">
                                            <div class="input-group input-group-sm">
                                                <input type="text" class="form-control"/>
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">Go</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="horizontal-space"></div>
                                    <div class="row">
                                        <div class="col-lg-6 col-sm-6 col-xs-6">
                                            <div class="input-group input-group-lg">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">Go</button>
                                                </span>
                                                <input type="text" class="form-control"/>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-sm-6 col-xs-6">
                                            <div class="input-group input-group-xl">
                                                <input type="text" class="form-control"/>
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">Go</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <hr class="wide"/>
                                    <h5>Buttons with dropdowns</h5>
                                    <div class="row">
                                        <div class="col-lg-6 col-sm-6 col-xs-6">
                                            <div class="input-group">
                                                <input type="text" class="form-control"/>
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#/">Action</a></li>
                                                        <li><a href="#/">Another action</a></li>
                                                        <li><a href="#/">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#/">Separated link</a></li>
                                                    </ul>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-sm-6 col-xs-6">
                                            <div class="input-group">
                                                <div class="input-group-btn">
                                                    <a class="btn btn-blue" href="#/">Actions</a>
                                                    <a class="btn btn-blue dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
                                                    <ul class="dropdown-menu dropdown-blue">
                                                        <li>
                                                            <a href="#/">Action</a>
                                                        </li>
                                                        <li>
                                                            <a href="#/">Another action</a>
                                                        </li>
                                                        <li>
                                                            <a href="#/">Something else here</a>
                                                        </li>
                                                        <li class="divider"></li>
                                                        <li>
                                                            <a href="#/">Separated link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <input type="text" class="form-control"/>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="widget radius-bordered">
                        <div class="widget-header bordered-bottom bordered-red">
                            <span class="widget-caption">Column Sizing</span>
                        </div>
                        <div class="widget-body">
                            <div class="row">
                                <div class="col-xs-2">
                                    <input type="text" class="form-control" placeholder=".col-xs-2"/>
                                </div>
                                <div class="col-xs-3">
                                    <input type="text" class="form-control" placeholder=".col-xs-3"/>
                                </div>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" placeholder=".col-xs-4"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="row-title before-red"><i class="fa fa-ban red"></i>Validation State</h5>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-xs-12">
                    <div class="widget">
                        <div class="widget-header bordered-left bordered-blue">
                            <span class="widget-caption">Validation States</span>
                        </div>
                        <div class="widget-body bordered-left bordered-blueberry">
                            <form role="form">
                                <div class="form-group has-success has-feedback">
                                    <label class="control-label" for="inputSuccess2">Input with success</label>
                                    <input type="text" class="form-control" id="inputSuccess2" value="Correct Value"/>
                                    <span class="glyphicon glyphicon-thumbs-up form-control-feedback"></span>
                                </div>
                                <div class="form-group has-warning has-feedback">
                                    <label class="control-label" for="inputWarning2">Input with warning</label>
                                    <input type="text" class="form-control" id="inputWarning2" value="Unconvincing Value"/>
                                    <span class="fa fa-warning form-control-feedback"></span>
                                </div>
                                <div class="form-group has-error has-feedback">
                                    <label class="control-label" for="inputError2">Input with error</label>
                                    <input type="text" class="form-control" id="inputError2" value="Wrong Value"/>
                                    <span class="glyphicon glyphicon-fire form-control-feedback"></span>
                                </div>
                                <div class="form-group has-info has-feedback">
                                    <label class="control-label" for="inputinfo2">Input With Info</label>
                                    <input type="text" class="form-control" id="inputinfo2" value="You've Got Mail!"/>
                                    <span class="fa fa-envelope form-control-feedback"></span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-xs-12">
                    <div class="widget">
                        <div class="widget-header bordered-left bordered-red">
                            <span class="widget-caption">Input Group Validation States</span>
                        </div>
                        <div class="widget-body bordered-left bordered-gold">
                            <form role="form">
                                <div class="form-group">
                                    <div class=" input-group has-success">
                                        <span class="input-group-addon">@</span>
                                        <input type="text" class="form-control" placeholder="Username" value="Success"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group has-warning">
                                        <span class="input-group-addon">@</span>
                                        <input type="text" class="form-control" placeholder="Username" value="Warning"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group has-error">
                                        <span class="input-group-addon">@</span>
                                        <input type="text" class="form-control" placeholder="Username" value="Error"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group has-info">
                                        <span class="input-group-addon">@</span>
                                        <input type="text" class="form-control" placeholder="Username" value="Info"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="row-title before-gold"><i class="fa fa-check-square-o gold"></i>Checkboxes, Radio Buttons and Switches</h5>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-xs-12">
                    <div class="widget flat radius-bordered">
                        <div class="widget-header bordered-bottom bordered-blue">
                            <span class="widget-caption">CheckBoxes and Radio Buttons</span>
                        </div>
                        <div class="widget-body bordered-bottom bordered-darkorange">
                            <h5>Checkboxes</h5>
                            <div class="row">
                                <div class="col-lg-4 col-sm-4 col-xs-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" checked="checked"/>
                                            <span class="text">Basic</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-4 col-xs-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" class="inverted" checked="checked"/>
                                            <span class="text">Inverted</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-4 col-xs-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" class="colored-success" checked="checked"/>
                                            <span class="text">Success</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-sm-4 col-xs-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" class="colored-danger" checked="checked"/>
                                            <span class="text">Danger</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-4 col-xs-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" class="colored-blue" checked="checked"/>
                                            <span class="text">Blue</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-4 col-xs-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" class="colored-warning" checked="checked"/>
                                            <span class="text">Warning</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <hr class="wide"/>
                            <h5>Radio Buttons</h5>
                            <div class="control-group">
                                <div class="radio">
                                    <label>
                                        <input name="form-field-radio" type="radio" checked="checked"/>
                                        <span class="text">Basic </span>
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input name="form-field-radio" type="radio" class="inverted"/>
                                        <span class="text">Inverted</span>
                                    </label>
                                </div>
                            </div>
                            <hr class="wide"/>
                            <h5>Colored Radio Buttons</h5>
                            <div class="control-group">
                                <div class="radio">
                                    <label>
                                        <input name="form-field-radio" type="radio" class="colored-blue"/>
                                        <span class="text"> Windows Phone</span>
                                    </label>
                                </div>

                                <div class="radio">
                                    <label>
                                        <input name="form-field-radio" type="radio" class="colored-danger"/>
                                        <span class="text"> IOS</span>
                                    </label>
                                </div>

                                <div class="radio">
                                    <label>
                                        <input name="form-field-radio" type="radio" class="colored-success"/>
                                        <span class="text"> Android</span>
                                    </label>
                                </div>

                                <div class="radio">
                                    <label>
                                        <input name="form-field-radio" type="radio" class="colored-blueberry"/>
                                        <span class="text"> Blackberry</span>
                                    </label>
                                </div>
                            </div>
                            <hr class="wide"/>
                            <h5>Disabled Controls</h5>
                            <div class="row">
                                <div class="col-lg-6 col-sm-6 col-xs-6">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" disabled="disabled"/>
                                            <span class="text">CheckBox</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-sm-6 col-xs-6">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" disabled="disabled"/>
                                            <span class="text">Radio Button</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-xs-12">
                    <div class="widget flat radius-bordered">
                        <div class="widget-header  bordered-bottom bordered-pink">
                            <span class="widget-caption">On/Off Switches</span>
                        </div>
                        <div class="widget-body bordered-bottom bordered-sky">
                            <div class="form-group">
                                <h6>Default Switch Types</h6>
                                <div class="horizontal-space"></div>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                </div>
                                <hr class="wide"/>
                                <h6>YES/NO Switches</h6>
                                <div class="horizontal-space"></div>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider yesno" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon yesno" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle yesno" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                </div>
                                <hr class="wide"/>
                                <h6>Colored Switches</h6>
                                <div class="horizontal-space"></div>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider colored-blue" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon colored-blue" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle colored-blue" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider colored-darkorange" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon colored-darkorange" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle colored-darkorange" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider colored-palegreen" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon colored-palegreen" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle colored-palegreen" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider colored-purple" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon colored-purple" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle colored-purple" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider colored-warning" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon colored-warning" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle colored-warning" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider colored-success" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon colored-success" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle colored-success" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider colored-danger" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon colored-danger" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle colored-danger" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider colored-magenta" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider slider-icon colored-magenta" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                    <div class="col-xs-4">
                                        <label>
                                            <input class="checkbox-slider toggle colored-magenta" type="checkbox"/>
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="row-title before-azure"><i class="fa fa-upload azure"></i>File Uploads</h5>
            <div class="row">
                <div class="col-lg-6 col-sm-6 col-xs-12">
                    <div class="widget radius-bordered">
                        <div class="widget-header">
                            <span class="widget-caption">File Uploads</span>
                        </div>
                        <div class="widget-body">
                            <h5>Standard Button</h5>
                            <span class="file-input btn btn-azure btn-file">
                                Browse <input type="file" multiple=""/>
                            </span>
                            <hr class="wide"/>
                            <h5>Block-level Button</h5>
                            <span class="file-input btn btn-block btn-default btn-file">
                                Browse <input type="file" multiple=""/>
                            </span>
                            <hr class="wide"/>
                            <h5>Button Groups</h5>
                            <div class="btn-group">
                                <a href="#/" class="btn btn-default">Action 1</a>
                                <a href="#/" class="btn btn-default">Action 2</a>
                                <span class="btn btn-azure btn-file">
                                    Browse <input type="file" multiple=""/>
                                </span>
                            </div>
                            <hr class="wide"/>
                            <h5>Input Groups</h5>
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <span class="btn btn-azure btn-file">
                                        Browse <input type="file" multiple=""/>
                                    </span>
                                </span>
                                <input type="text" class="form-control" readonly=""/>
                            </div>
                        </div>
                    </div>
                </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:#eee;
}

.widget {
    padding: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin: 0 0 30px 0
}

.widget.collapsed .widget-body {
    display: none
}

.widget.collapsed.radius-bordered .widget-header {
    -webkit-border-radius: 3px 3px 3px 3px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 3px 3px 3px 3px;
    -moz-background-clip: padding;
    border-radius: 3px 3px 3px 3px;
    background-clip: padding-box
}

.widget.no-header .widget-header {
    display: none
}

.widget.no-header.radius-bordered .widget-body {
    -webkit-border-radius: 3px 3px 3px 3px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 3px 3px 3px 3px;
    -moz-background-clip: padding;
    border-radius: 3px 3px 3px 3px;
    background-clip: padding-box
}

.widget.maximized {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    margin: 0;
    overflow: auto
}

.widget.maximized .widget-body {
    padding: 12px 0
}

.widget.transparent .widget-header,
.widget.transparent .widget-body {
    background-color: rgba(0, 0, 0, 0);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

.widget.transparent .widget-header {
    border-bottom: 1px solid #ccc
}

.widget.bordered-top {
    border-top: 3px solid #fff
}

.widget.bordered-bottom {
    border-bottom: 3px solid #fff
}

.widget.bordered-left {
    border-left: 3px solid #fff
}

.widget.bordered-right {
    border-right: 3px solid #fff
}

.widget.radius-bordered .widget-header {
    -webkit-border-radius: 3px 3px 0 0;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 3px 3px 0 0;
    -moz-background-clip: padding;
    border-radius: 3px 3px 0 0;
    background-clip: padding-box
}

.widget.radius-bordered .widget-body {
    -webkit-border-radius: 0 0 3px 3px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 0 0 3px 3px;
    -moz-background-clip: padding;
    border-radius: 0 0 3px 3px;
    background-clip: padding-box
}

.widget.flat .widget-body,
.widget.flat .widget-header {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

.widget.lightshadow .widget-body,
.widget.lightshadow .widget-header {
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2)
}

.widget:hover .compact {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2)
}

.widget:hover .compact i {
    color: #2dc3e8
}

.widget-header {
    position: relative;
    min-height: 35px;
    background: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    color: #555;
    padding-left: 12px;
    text-align: right
}

.widget-header .widget-icon {
    display: block;
    width: 30px;
    height: 32px;
    position: relative;
    float: left;
    font-size: 111%;
    line-height: 32px;
    text-align: center;
    margin-left: -10px
}

.widget-header>.widget-caption {
    line-height: 34px;
    padding: 0;
    margin: 0;
    float: left;
    text-align: left;
    font-weight: 400 !important;
    font-size: 13px
}

.widget-header.lined {
    border: 0;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    padding-left: 2%
}

.widget-header.lined:before {
    content: "";
    position: absolute;
    display: block;
    width: 96%;
    bottom: 0;
    top: 35px;
    height: 1px;
    left: 2%;
    z-index: 1;
    border-bottom: 1px solid #e5e5e5
}

.widget-header.lined .widget-buttons {
    padding-right: 2%
}

.widget-header.lined+.widget-body {
    padding-left: 2%;
    padding-right: 2%
}

.widget-header.separated {
    margin-bottom: 5px
}

.widget-header[class*="bg-"] {
    border: 0
}

.widget-header[class*="bg-"] .widget-caption,
.widget-header[class*="bg-"] i {
    color: #fff
}

.widget-header.bordered-left {
    border-left: 3px solid #fff
}

.widget-header.bordered-right {
    border-right: 3px solid #fff
}

.widget-header.bordered-top {
    border-top: 3px solid #fff
}

.widget-header.bordered-bottom {
    border-bottom: 3px solid #fff
}

.widget-header.header-large {
    min-height: 49px;
    padding-left: 18px
}

.widget-header.header-large h5 {
    line-height: 48px;
    font-size: 16px
}

.widget-header.header-large>.widget-buttons {
    line-height: 48px;
    height: 48px
}

.widget-header.header-large>.widget-buttons a {
    min-width: 26px
}

.widget-header.header-large>.widget-buttons a i {
    font-size: 20px
}

.widget-header.header-small {
    min-height: 29px;
    padding-left: 10px
}

.widget-header.header-small h5 {
    line-height: 28px;
    font-size: 12px
}

.widget-header.header-small>.widget-buttons {
    line-height: 29px;
    height: 29px
}

.widget-header.header-small>.widget-buttons a {
    min-width: 16px;
    height: 16px
}

.widget-header.header-small>.widget-buttons a i {
    font-size: 14px
}

.widget-buttons {
    display: inline-block;
    padding: 0 5px;
    line-height: 34px;
    position: relative;
    text-align: left;
    height: 36px
}

.widget-buttons.buttons-bordered {
    border-left: 1px solid #e5e5e5
}

.widget-buttons.compact {
    margin-top: 4px;
    background-color: #f5f5f5;
    line-height: 27px;
    -webkit-transition: background-color .218s ease;
    -moz-transition: background-color .218s ease;
    -o-transition: background-color .218s ease;
    transition: background-color .218s ease;
    -webkit-transition: -webkit-box-shadow .218s ease;
    -moz-transition: -moz-box-shadow .218s ease;
    -o-transition: box-shadow .218s ease;
    transition: box-shadow .218s ease;
    -webkit-transition: color .318s ease;
    -moz-transition: color .318s ease;
    -o-transition: color .318s ease;
    transition: color .318s ease;
    height: 27px
}

.widget-buttons.compact:hover {
    background-color: #2dc3e8;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2)
}

.widget-buttons.compact:hover i {
    color: #fff
}

.widget-buttons.compact:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -4px;
    width: 4px;
    max-width: 4px;
    overflow: hidden;
    background-color: #2dc3e8
}

.widget-buttons.compact a {
    min-width: 14px;
    line-height: 14px
}

.widget-buttons.compact i {
    color: #ccc;
    font-size: 14px
}

.widget-buttons.no-padding {
    padding: 0
}

.widget-buttons.padding-5 {
    padding: 0 5px
}

.widget-buttons.no-border:before {
    display: none
}

.widget-buttons label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    line-height: 6px
}

.widget-buttons>a {
    font-size: 14px;
    margin: 0 1px;
    display: inline-block;
    padding: 0;
    line-height: 24px;
    min-width: 20px;
    text-align: center
}

.widget-buttons>a:hover {
    text-decoration: none
}

.widget-buttons>a i {
    vertical-align: middle
}

.widget-buttons>[data-toggle]>.fa {
    margin-right: 0
}

.widget-buttons>[data-toggle]:hover {
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.widget-buttons>[data-toggle]:focus {
    text-decoration: none
}

.widget-buttons>[data-toggle="dispose"] {
    color: #777;
    font-size: 14px
}

.widget-buttons>[data-toggle="maximize"] {
    color: #777;
    font-size: 14px
}

.widget-buttons>[data-toggle="collapse"] {
    color: #777;
    font-size: 14px
}

.widget-buttons>[data-toggle="refresh"] {
    color: #777;
    font-size: 14px
}

.widget-buttons>[data-toggle="config"] {
    color: #777;
    font-size: 14px
}

.widget-buttons .progress {
    vertical-align: middle;
    display: inline-block;
    margin: 0;
    min-width: 100px;
    margin-top: -3px
}

.widget-buttons .btn-group {
    margin-top: -2px
}

.widget-buttons .btn-group .dropdown-menu {
    right: 0;
    left: auto
}

.widget-buttons .badge {
    margin-top: -2px
}

.widget-buttons .label {
    padding: 5px 6px 5px 6px
}

.widget-buttons .pagination,
.widget-buttons .pager {
    float: right;
    margin: 5px 2px 1px
}

.widget-buttons .btn {
    margin-top: -2px
}

.widget-body {
    background-color: #fbfbfb;
    -webkit-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
    box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
    padding: 12px
}

.widget-body.bordered-left {
    border-left: 3px solid #fff
}

.widget-body.bordered-right {
    border-right: 3px solid #fff
}

.widget-body.bordered-bottom {
    border-bottom: 3px solid #fff
}

.widget-body.bordered-top {
    border-top: 3px solid #fff
}

.widget-body[class*="bg-"] {
    color: #fff
}

.widget-body.no-padding {
    padding: 0
}

.widget-body.no-padding .accordion {
    border: 0
}

.widget-body.no-padding .dataTables_filter label {
    margin: 10px
}

.widget-body.no-padding .dataTables_length {
    top: 10px;
    right: 10px
}

.widget-body.no-padding .DTTT.btn-group {
    right: 80px;
    top: 10px
}

.widget-body .accordion.panel-group {
    border-top-width: 1px !important
}

.widget-body>table {
    margin-bottom: 0
}

.widget-body hr.wide {
    margin-left: -12px;
    margin-right: -12px
}
.bordered-pink {
    border-color: #e75b8d !important;
}
.bordered-palegreen {
    border-color: #a0d468 !important;
}
.bordered-darkorange {
    border-color: #ed4e2a !important;
}
.bordered-sky {
    border-color: #11a9cc !important;
}
.bordered-yellow {
    border-color: #ffce55 !important;
}
.bordered-success {
    border-color: #53a93f !important;
}
.bordered-info {
    border-color: #57b5e3 !important;
}
.bordered-red {
    border-color: #df5138 !important;
}
.darkorange {
    color: #ed4e2a !important;
}
.bordered-blue {
    border-color: #5db2ff !important;
}
.bg-blue {
    background-color: #5db2ff !important;
}
.bordered-gold {
    border-color: #f9b256 !important;
}
h1.row-title, h2.row-title, h3.row-title, h4.row-title, h5.row-title, h6.row-title {
    line-height: 17px;
    margin: 10px 0;
    padding: 9px 10px 9px 8px;
    display: inline-block;
    color: #646464;
    font-weight: 400;
    background-color: #fff;
    position: relative;
    -webkit-border-radius: 0 2px 2px 0;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 0 2px 2px 0;
    -moz-background-clip: padding;
    border-radius: 0 2px 2px 0;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.3);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}


.widget-body {
    background-color: #fbfbfb;
    -webkit-box-shadow: 1px 0 10px 1px rgba(0,0,0,.3);
    -moz-box-shadow: 1px 0 10px 1px rgba(0,0,0,.3);
    box-shadow: 1px 0 10px 1px rgba(0,0,0,.3);
    padding: 12px;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    -webkit-border-radius: 0 !important;
    -webkit-background-clip: padding-box !important;
    -moz-border-radius: 0 !important;
    -moz-background-clip: padding !important;
    border-radius: 0 !important;
    background-clip: padding-box !important;
    color: #858585;
    background-color: #fbfbfb;
    border: 1px solid #d5d5d5;
    font-family: inherit;
    -webkit-transition: -webkit-box-shadow .45s, border-color .45s ease-in-out;
    -moz-transition: -moz-box-shadow .45s, border-color .45s ease-in-out;
    -o-transition: box-shadow .45s, border-color .45s ease-in-out;
    transition: box-shadow .45s, border-color .45s ease-in-out;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

textarea:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="color"]:hover {
    border-color: rgba(0, 0, 0, .2)
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
    color: #262626;
    background-color: #fff;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    border-color: rgba(0, 0, 0, .25);
    outline: 0
}

.form-control,
select {
    font-size: 13px;
    color: #858585;
    background-color: #fbfbfb;
    border: 1px solid #d5d5d5;
    padding: 6px 12px
}

.form-control:focus,
select:focus {
    color: #262626;
    background-color: #fff;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    border-color: rgba(0, 0, 0, .25)
}

textarea.form-control {
    padding: 5px 9px;
    -webkit-transition: height .2s;
    -moz-transition: height .2s;
    -o-transition: height .2s;
    transition: height .2s
}

.input-xs {
    height: 24px;
    padding: 2px 10px;
    font-size: 11px;
    line-height: 1.5
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-lg {
    font-weight: 300;
    font-size: 18px;
    height: 46px;
    padding: 10px 16px;
    line-height: 1.33
}

.input-xl {
    height: 52px;
    padding: 12px 18px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 300
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #fbfbfb;
    border-color: #e5e5e5
}

.form-control[disabled]:hover,
.form-control[readonly]:hover,
fieldset[disabled] .form-control:hover {
    border-color: #eee;
    background-color: #fff
}

.form-group.has-success input,
.input-group.has-success input,
.form-group.has-success select,
.input-group.has-success select,
.form-group.has-success textarea,
.input-group.has-success textarea {
    border-color: #b0dd9c;
    color: #a0d468;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #f3f7f1
}

.form-group.has-success input:focus,
.input-group.has-success input:focus,
.form-group.has-success select:focus,
.input-group.has-success select:focus,
.form-group.has-success textarea:focus,
.input-group.has-success textarea:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #8cc474;
    border-color: #8cc474
}

.form-group.has-success .form-control-feedback:before,
.input-group.has-success .form-control-feedback:before {
    color: #8cc474 !important;
    color: inherit
}

.form-group.has-success .control-label,
.input-group.has-success .control-label,
.form-group.has-success .help-block,
.input-group.has-success .help-block,
.form-group.has-success .help-inline,
.input-group.has-success .help-inline {
    color: #8cc474
}

.form-group.has-error input,
.input-group.has-error input,
.form-group.has-error .select,
.input-group.has-error .select,
.form-group.has-error textarea,
.input-group.has-error textarea {
    border-color: #e7bebe;
    color: #e46f61;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #fffafa
}

.form-group.has-error input:focus,
.input-group.has-error input:focus,
.form-group.has-error .select:focus,
.input-group.has-error .select:focus,
.form-group.has-error textarea:focus,
.input-group.has-error textarea:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #d73d32;
    border-color: #e46f61
}

.form-group.has-error .form-control-feedback:before,
.input-group.has-error .form-control-feedback:before {
    color: #e46f61 !important;
    color: inherit
}

.form-group.has-error .control-label,
.input-group.has-error .control-label,
.form-group.has-error .help-block,
.input-group.has-error .help-block,
.form-group.has-error .help-inline,
.input-group.has-error .help-inline {
    color: #e46f61
}

.form-group.has-warning input,
.input-group.has-warning input,
.form-group.has-warning .select,
.input-group.has-warning .select,
.form-group.has-warning textarea,
.input-group.has-warning textarea {
    border-color: #fecf49;
    color: #f4b400;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #fefbf1
}

.form-group.has-warning input:focus,
.input-group.has-warning input:focus,
.form-group.has-warning .select:focus,
.input-group.has-warning .select:focus,
.form-group.has-warning textarea:focus,
.input-group.has-warning textarea:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #f4b400;
    border-color: #f4b400
}

.form-group.has-warning .form-control-feedback:before,
.input-group.has-warning .form-control-feedback:before {
    color: #f4b400 !important;
    color: inherit
}

.form-group.has-warning .control-label,
.input-group.has-warning .control-label,
.form-group.has-warning .help-block,
.input-group.has-warning .help-block,
.form-group.has-warning .help-inline,
.input-group.has-warning .help-inline {
    color: #f4b400
}

.form-group.has-info input,
.input-group.has-info input,
.form-group.has-info .select,
.input-group.has-info .select,
.form-group.has-info textarea,
.input-group.has-info textarea {
    border-color: #a4d3fe;
    color: #57b5e3;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #f9fcff
}

.form-group.has-info input:focus,
.input-group.has-info input:focus,
.form-group.has-info .select:focus,
.input-group.has-info .select:focus,
.form-group.has-info textarea:focus,
.input-group.has-info textarea:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #57b5e3;
    border-color: #57b5e3
}

.form-group.has-info .form-control-feedback:before,
.input-group.has-info .form-control-feedback:before {
    color: #57b5e3 !important;
    color: inherit
}

.form-group.has-info .control-label,
.input-group.has-info .control-label,
.form-group.has-info .help-block,
.input-group.has-info .help-block,
.form-group.has-info .help-inline,
.input-group.has-info .help-inline {
    color: #57b5e3
}

span.input-icon {
    display: inline-block
}

.input-icon {
    position: relative;
    width: 100%
}

.input-icon.inverted>[class*="fa-"],
.input-icon.inverted>[class*="glyphicon-"] {
    color: #fff;
    background-color: #262626
}

.input-icon>input {
    padding-left: 36px;
    padding-right: 6px
}

.input-icon>input:focus+[class*="fa-"],
.input-icon>input:focus+[class*="glyphicon-"] {
    zoom: 1;
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1
}

.input-icon>input:focus+.circular {
    -webkit-box-shadow: 0 0 0 .1em rgba(0, 0, 0, .15) inset;
    -moz-box-shadow: 0 0 0 .1em rgba(0, 0, 0, .15) inset;
    box-shadow: 0 0 0 .1em rgba(0, 0, 0, .15) inset
}

.input-icon>input.input-xs {
    padding-left: 26px
}

.input-icon>input.input-xs+[class*="fa-"],
.input-icon>input.input-xs+[class*="glyphicon-"] {
    width: 24px;
    font-size: 10px;
    padding-top: 0;
    line-height: 24px
}

.input-icon>input.input-xs+.circular {
    width: 14px;
    height: 14px;
    font-size: 10px;
    line-height: 14px
}

.input-icon>input.input-sm {
    padding-left: 32px
}

.input-icon>input.input-sm+[class*="fa-"],
.input-icon>input.input-sm+[class*="glyphicon-"] {
    width: 30px;
    font-size: 12px;
    padding-top: 0;
    line-height: 30px
}

.input-icon>input.input-sm+.circular {
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px
}

.input-icon>input.input-lg {
    padding-left: 48px
}

.input-icon>input.input-lg+[class*="fa-"],
.input-icon>input.input-lg+[class*="glyphicon-"] {
    width: 46px;
    font-size: 18px;
    padding-top: 5px;
    line-height: 34px
}

.input-icon>input.input-lg+.circular {
    width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 26px
}

.input-icon>input.input-xl {
    padding-left: 54px
}

.input-icon>input.input-xl+[class*="fa-"],
.input-icon>input.input-xl+[class*="glyphicon-"] {
    width: 52px;
    font-size: 20px;
    padding-top: 8px;
    line-height: 34px
}

.input-icon>input.input-xl+.circular {
    width: 42px;
    height: 42px;
    font-size: 20px;
    line-height: 26px
}

.input-icon>[class*="fa-"],
.input-icon>[class*="glyphicon-"] {
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34px;
    height: 100%;
    line-height: 28px;
    display: inline-block;
    color: #555;
    font-size: 14px;
    text-align: center;
    padding-top: 3px;
    zoom: 1;
    filter: alpha(opacity=70);
    -webkit-opacity: .7;
    -moz-opacity: .7;
    opacity: .7
}

.input-icon>[class*="fa-"].circular,
.input-icon>[class*="glyphicon-"].circular {
    border-radius: 500em !important;
    box-shadow: 0 0 0 .1em rgba(0, 0, 0, .1) inset;
    -webkit-transition: -webkit-box-shadow .3s ease;
    -moz-transition: -moz-box-shadow .3s ease;
    -o-transition: box-shadow .3s ease;
    transition: box-shadow .3s ease;
    padding: 0;
    top: 5px;
    bottom: 5px;
    left: 7px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 24px
}

.input-icon.icon-right>input {
    padding-left: 6px;
    padding-right: 36px
}

.input-icon.icon-right>input.input-xs {
    padding-right: 26px
}

.input-icon.icon-right>input.input-sm {
    padding-right: 32px
}

.input-icon.icon-right>input.input-lg {
    padding-right: 48px
}

.input-icon.icon-right>input.input-xl {
    padding-right: 54px
}

.input-icon.icon-right>[class*="fa-"],
.input-icon.icon-right>[class*="glyphicon-"] {
    left: auto;
    right: 0
}

.input-icon.icon-right .circular {
    left: auto;
    right: 5px
}

.input-icon~.help-inline {
    padding-left: 8px
}

.input-group .input-group-addon {
    border-radius: 0 !important;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiZmJmYiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(top, #eee 0, #fbfbfb 100%);
    background-image: -moz-linear-gradient(top, #eee 0, #fbfbfb 100%);
    background-image: -o-linear-gradient(top, #eee 0, #fbfbfb 100%);
    background-image: linear-gradient(to bottom, #eee 0, #fbfbfb 100%)
}

.input-group .input-group-addon[class*="bg-"] {
    background-image: none;
    color: #fff
}

.input-group-xl>.form-control,
.input-group-xl>.input-group-addon,
.input-group-xl>.input-group-btn>.btn {
    height: 52px;
    padding: 10px 18px;
    font-size: 20px;
    line-height: 1.4
}

.input-group-xs>.form-control,
.input-group-xs>.input-group-addon,
.input-group-xs>.input-group-btn>.btn {
    height: 24px;
    padding: 2px 6px 2px 7px;
    font-size: 11px;
    line-height: 1.4
}

.has-success .input-group-addon {
    border-color: #b0dd9c !important;
    color: #8cc474;
    background-image: none
}

.has-error .input-group-addon {
    border-color: #e7bebe;
    color: #e46f61;
    background-image: none
}

.has-warning .input-group-addon {
    border-color: #fecf49;
    color: #f4b400;
    background-image: none
}

.has-info .input-group-addon {
    border-color: #a4d3fe;
    color: #57b5e3;
    background-color: #e4f0fc;
    background-image: none
}

.input-group-btn .btn-label {
    padding: 6px 10px !important
}

.input-group-btn>.btn {
    line-height: 20px;
    border-radius: 0 !important
}

.input-group-btn>.btn.dropdown-toggle>[class*="fa-"] {
    margin-right: 0;
    font-size: 14px
}

.input-group>.btn.btn-sm {
    line-height: 22px
}

.input-group>.btn+.btn {
    margin-left: 1px
}

.input-group>.btn-group>.btn {
    line-height: 23px
}

.input-group>.btn-group>.btn.btn-sm {
    line-height: 26px
}

.input-group>.btn>.caret,
.input-group>.btn-group>.btn>.caret,
.input-group>.btn.btn-sm>.caret,
.input-group>.btn-group>.btn.btn-sm>.caret {
    margin-top: 10px
}

.btn-file {
    position: relative;
    overflow: hidden
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: #fff;
    cursor: inherit;
    display: block
}

input[type=checkbox],
input[type=radio] {
    opacity: 0;
    position: absolute;
    left: -9999px;
    z-index: 12;
    width: 18px;
    height: 18px;
    cursor: pointer
}

input[type=checkbox].inverted:checked~.text:before,
input[type=radio].inverted:checked~.text:before {
    background-color: #333;
    border-color: #333;
    color: #fff
}

input[type=checkbox].colored-white~.text,
input[type=radio].colored-white~.text {
    color: #fff
}

input[type=checkbox].colored-white~.text:before,
input[type=radio].colored-white~.text:before {
    border-color: #fafafa
}

input[type=checkbox].colored-white:checked~.text,
input[type=radio].colored-white:checked~.text {
    color: #fff
}

input[type=checkbox].colored-white:checked~.text:before,
input[type=radio].colored-white:checked~.text:before {
    border-color: #333;
    color: #333
}

input[type=checkbox].colored-blue:checked~.text,
input[type=radio].colored-blue:checked~.text {
    color: #5db2ff
}

input[type=checkbox].colored-blue:checked~.text:before,
input[type=radio].colored-blue:checked~.text:before {
    border-color: #5db2ff;
    color: #5db2ff
}

input[type=checkbox].colored-primary:checked~.text,
input[type=radio].colored-primary:checked~.text {
    color: #4374e0
}

input[type=checkbox].colored-primary:checked~.text:before,
input[type=radio].colored-primary:checked~.text:before {
    border-color: #4374e0;
    color: #4374e0
}

input[type=checkbox].colored-danger:checked~.text,
input[type=radio].colored-danger:checked~.text {
    color: #d73d32
}

input[type=checkbox].colored-danger:checked~.text:before,
input[type=radio].colored-danger:checked~.text:before {
    border-color: #d73d32;
    color: #d73d32
}

input[type=checkbox].colored-success:checked~.text,
input[type=radio].colored-success:checked~.text {
    color: #53a93f
}

input[type=checkbox].colored-success:checked~.text:before,
input[type=radio].colored-success:checked~.text:before {
    border-color: #53a93f;
    color: #53a93f
}

input[type=checkbox].colored-warning:checked~.text,
input[type=radio].colored-warning:checked~.text {
    color: #f4b400
}

input[type=checkbox].colored-warning:checked~.text:before,
input[type=radio].colored-warning:checked~.text:before {
    border-color: #f4b400;
    color: #f4b400
}

input[type=checkbox].colored-silver:checked~.text,
input[type=radio].colored-silver:checked~.text {
    color: #777
}

input[type=checkbox].colored-silver:checked~.text:before,
input[type=radio].colored-silver:checked~.text:before {
    border-color: #777;
    color: #777
}

input[type=checkbox].colored-blueberry:checked~.text,
input[type=radio].colored-blueberry:checked~.text {
    color: #6f85bf
}

input[type=checkbox].colored-blueberry:checked~.text:before,
input[type=radio].colored-blueberry:checked~.text:before {
    border-color: #6f85bf;
    color: #6f85bf
}

input[type=checkbox].colored-palegreen:checked~.text,
input[type=radio].colored-palegreen:checked~.text {
    color: #a0d468
}

input[type=checkbox].colored-palegreen:checked~.text:before,
input[type=radio].colored-palegreen:checked~.text:before {
    border-color: #a0d468;
    color: #a0d468
}

input[type=checkbox].colored-orange:checked~.text,
input[type=radio].colored-orange:checked~.text {
    color: #fb6e52
}

input[type=checkbox].colored-orange:checked~.text:before,
input[type=radio].colored-orange:checked~.text:before {
    border-color: #fb6e52;
    color: #fb6e52
}

input[type=checkbox].colored-darkorange:checked~.text,
input[type=radio].colored-darkorange:checked~.text {
    color: #ed4e2a
}

input[type=checkbox].colored-darkorange:checked~.text:before,
input[type=radio].colored-darkorange:checked~.text:before {
    border-color: #ed4e2a;
    color: #ed4e2a
}

input[type=checkbox].colored-magenta:checked~.text,
input[type=radio].colored-magenta:checked~.text {
    color: #bc5679
}

input[type=checkbox].colored-magenta:checked~.text:before,
input[type=radio].colored-magenta:checked~.text:before {
    border-color: #bc5679;
    color: #bc5679
}

input[type=checkbox].colored-purple:checked~.text,
input[type=radio].colored-purple:checked~.text {
    color: #7e3794
}

input[type=checkbox].colored-purple:checked~.text:before,
input[type=radio].colored-purple:checked~.text:before {
    border-color: #7e3794;
    color: #7e3794
}

input[type=checkbox].colored-maroon:checked~.text,
input[type=radio].colored-maroon:checked~.text {
    color: #981b48
}

input[type=checkbox].colored-maroon:checked~.text:before,
input[type=radio].colored-maroon:checked~.text:before {
    border-color: #981b48;
    color: #981b48
}

input[type=checkbox]:checked,
input[type=radio]:checked,
input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: none !important
}

input[type=checkbox]:checked~.text:before,
input[type=radio]:checked~.text:before {
    display: inline-block;
    content: '';
    background-color: #f5f8fc;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 -15px 10px -12px rgba(0, 0, 0, .05), inset 15px 10px -12px rgba(255, 255, 255, .1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 -15px 10px -12px rgba(0, 0, 0, .05), inset 15px 10px -12px rgba(255, 255, 255, .1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 -15px 10px -12px rgba(0, 0, 0, .05), inset 15px 10px -12px rgba(255, 255, 255, .1);
    border-color: #333
}

input[type=checkbox]:hover~.text:before,
input[type=radio]:hover~.text:before {
    border-color: #737373
}

input[type=checkbox]:active~.text:before,
input[type=radio]:active~.text:before {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 3px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 3px rgba(0, 0, 0, .1)
}

input[type=checkbox]:disabled~.text,
input[type=radio]:disabled~.text,
input[type=checkbox][disabled]~.text,
input[type=radio][disabled]~.text,
input[type=checkbox].disabled~.text,
input[type=radio].disabled~.text {
    color: rgba(0, 0, 0, .4)
}

input[type=checkbox]:disabled~.text:before,
input[type=radio]:disabled~.text:before,
input[type=checkbox][disabled]~.text:before,
input[type=radio][disabled]~.text:before,
input[type=checkbox].disabled~.text:before,
input[type=radio].disabled~.text:before {
    background-color: #f5f5f5 !important;
    border-color: #e5e5e5 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    color: #e5e5e5
}

input[type=checkbox]~.text,
input[type=radio]~.text {
    position: relative;
    z-index: 11;
    display: inline-block;
    margin: 0;
    line-height: 20px;
    min-height: 18px;
    min-width: 18px;
    font-weight: normal
}

input[type=checkbox]~.text:before,
input[type=radio]~.text:before {
    font-family: fontAwesome;
    font-weight: bold;
    font-size: 13px;
    color: #333;
    content: " ";
    background-color: #fafafa;
    border: 1px solid #c8c8c8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    border-radius: 0;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    height: 18px;
    line-height: 16px;
    min-width: 18px;
    margin-right: 5px;
    margin-bottom: 2px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

input[type=checkbox]~.text:hover:before,
input[type=radio]~.text:hover:before {
    border-color: #737373
}

input[type=checkbox]~.text:active:before,
input[type=radio]~.text:active:before {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 3px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 3px rgba(0, 0, 0, .1)
}

input[type=radio]~.text:before {
    border-radius: 100%;
    font-size: 10px;
    font-family: FontAwesome;
    line-height: 17px;
    height: 19px;
    min-width: 19px
}

input[type=radio]:checked~.text:before {
    content: ""
}

.radio label,
.checkbox label {
    padding-left: 0
}

input[type=checkbox].checkbox-slider {
    width: 55px;
    height: 25px;
    left: 0
}

input[type=checkbox].checkbox-slider.slider-icon:checked~.text:after {
    font-family: FontAwesome;
    font-size: 15px;
    line-height: 21px;
    content: "";
    border-width: 1px;
    padding-left: 3px;
    background-color: #fff;
    color: #444
}

input[type=checkbox].checkbox-slider.slider-icon~.text:after {
    font-family: FontAwesome;
    font-size: 14px;
    line-height: 20px;
    content: "";
    border-width: 1px;
    padding-left: 4px;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.toggle:checked~.text:after {
    background-color: #fff;
    color: #444
}

input[type=checkbox].checkbox-slider.toggle~.text:after {
    border: 0;
    background-color: #444;
    width: 14px;
    height: 14px;
    top: 3px;
    left: 3px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

input[type=checkbox].checkbox-slider.yesno~.text:before {
    font-family: 'Open Sans', 'Segoe UI';
    content: "YES            NO"
}

input[type=checkbox].checkbox-slider~.text {
    margin: 0 4px;
    min-height: 24px
}

input[type=checkbox].checkbox-slider~.text:before {
    font-family: 'Open Sans', 'Segoe UI';
    content: "ON           OFF";
    background-color: #fff;
    color: #999;
    font-weight: 300;
    font-size: 10px;
    line-height: 18px;
    height: 20px;
    overflow: hidden;
    border-radius: 50rem;
    border: 1px solid #ccc;
    text-align: left;
    float: left;
    padding: 0;
    width: 52px;
    text-indent: -21px;
    margin-right: 0;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

input[type=checkbox].checkbox-slider~.text:after {
    font-family: 'Open Sans', 'Segoe UI';
    content: '';
    font-size: 10px;
    font-weight: 300;
    background-color: #fff;
    border: 5px solid #444;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    line-height: 20px;
    position: absolute;
    top: -2px;
    left: -3px;
    padding: 0;
    -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .3);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

input[type=checkbox].checkbox-slider:checked~.text:before {
    text-indent: 5px;
    background-color: #444;
    border-color: #444;
    color: #fff
}

input[type=checkbox].checkbox-slider:checked~.text:after {
    left: 34px;
    background-color: #444;
    border: 5px solid #fff
}

input[type=checkbox].checkbox-slider.colored-blue~.text:after {
    border-color: #5db2ff
}

input[type=checkbox].checkbox-slider.colored-blue:checked~.text:before {
    background-color: #5db2ff;
    border-color: #5db2ff
}

input[type=checkbox].checkbox-slider.colored-blue:checked~.text:after {
    background-color: #5db2ff;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-blue.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #5db2ff
}

input[type=checkbox].checkbox-slider.colored-blue.slider-icon~.text:after {
    border-color: #fff;
    color: #5db2ff
}

input[type=checkbox].checkbox-slider.colored-blue.toggle:checked~.text:after {
    color: #5db2ff;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-blue.toggle~.text:after {
    background-color: #5db2ff
}

input[type=checkbox].checkbox-slider.colored-primary~.text:after {
    border-color: #4374e0
}

input[type=checkbox].checkbox-slider.colored-primary:checked~.text:before {
    background-color: #4374e0;
    border-color: #4374e0
}

input[type=checkbox].checkbox-slider.colored-primary:checked~.text:after {
    background-color: #4374e0;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-primary.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #4374e0
}

input[type=checkbox].checkbox-slider.colored-primary.slider-icon~.text:after {
    border-color: #fff;
    color: #4374e0
}

input[type=checkbox].checkbox-slider.colored-primary.toggle:checked~.text:after {
    color: #4374e0;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-primary.toggle~.text:after {
    background-color: #4374e0
}

input[type=checkbox].checkbox-slider.colored-danger~.text:after {
    border-color: #d73d32
}

input[type=checkbox].checkbox-slider.colored-danger:checked~.text:before {
    background-color: #d73d32;
    border-color: #d73d32
}

input[type=checkbox].checkbox-slider.colored-danger:checked~.text:after {
    background-color: #d73d32;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-danger.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #d73d32
}

input[type=checkbox].checkbox-slider.colored-danger.slider-icon~.text:after {
    border-color: #fff;
    color: #d73d32
}

input[type=checkbox].checkbox-slider.colored-danger.toggle:checked~.text:after {
    color: #d73d32;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-danger.toggle~.text:after {
    background-color: #d73d32
}

input[type=checkbox].checkbox-slider.colored-success~.text:after {
    border-color: #53a93f
}

input[type=checkbox].checkbox-slider.colored-success:checked~.text:before {
    background-color: #53a93f;
    border-color: #53a93f
}

input[type=checkbox].checkbox-slider.colored-success:checked~.text:after {
    background-color: #53a93f;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-success.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #53a93f
}

input[type=checkbox].checkbox-slider.colored-success.slider-icon~.text:after {
    border-color: #fff;
    color: #53a93f
}

input[type=checkbox].checkbox-slider.colored-success.toggle:checked~.text:after {
    color: #53a93f;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-success.toggle~.text:after {
    background-color: #53a93f
}

input[type=checkbox].checkbox-slider.colored-warning~.text:after {
    border-color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-warning:checked~.text:before {
    background-color: #f4b400;
    border-color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-warning:checked~.text:after {
    background-color: #f4b400;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-warning.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-warning.slider-icon~.text:after {
    border-color: #fff;
    color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-warning.toggle:checked~.text:after {
    color: #f4b400;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-warning.toggle~.text:after {
    background-color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-silver~.text:after {
    border-color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-silver:checked~.text:before {
    background-color: #f4b400;
    border-color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-silver:checked~.text:after {
    background-color: #f4b400;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-silver.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-silver.slider-icon~.text:after {
    border-color: #fff;
    color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-silver.toggle:checked~.text:after {
    color: #f4b400;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-silver.toggle~.text:after {
    background-color: #f4b400
}

input[type=checkbox].checkbox-slider.colored-blueberry~.text:after {
    border-color: #6f85bf
}

input[type=checkbox].checkbox-slider.colored-blueberry:checked~.text:before {
    background-color: #6f85bf;
    border-color: #6f85bf
}

input[type=checkbox].checkbox-slider.colored-blueberry:checked~.text:after {
    background-color: #6f85bf;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-blueberry.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #6f85bf
}

input[type=checkbox].checkbox-slider.colored-blueberry.slider-icon~.text:after {
    border-color: #fff;
    color: #6f85bf
}

input[type=checkbox].checkbox-slider.colored-blueberry.toggle:checked~.text:after {
    color: #6f85bf;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-blueberry.toggle~.text:after {
    background-color: #6f85bf
}

input[type=checkbox].checkbox-slider.colored-palegreen~.text:after {
    border-color: #a0d468
}

input[type=checkbox].checkbox-slider.colored-palegreen:checked~.text:before {
    background-color: #a0d468;
    border-color: #a0d468
}

input[type=checkbox].checkbox-slider.colored-palegreen:checked~.text:after {
    background-color: #a0d468;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-palegreen.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #a0d468
}

input[type=checkbox].checkbox-slider.colored-palegreen.slider-icon~.text:after {
    border-color: #fff;
    color: #a0d468
}

input[type=checkbox].checkbox-slider.colored-palegreen.toggle:checked~.text:after {
    color: #a0d468;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-palegreen.toggle~.text:after {
    background-color: #a0d468
}

input[type=checkbox].checkbox-slider.colored-orange~.text:after {
    border-color: #fb6e52
}

input[type=checkbox].checkbox-slider.colored-orange:checked~.text:before {
    background-color: #fb6e52;
    border-color: #fb6e52
}

input[type=checkbox].checkbox-slider.colored-orange:checked~.text:after {
    background-color: #fb6e52;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-orange.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #fb6e52
}

input[type=checkbox].checkbox-slider.colored-orange.slider-icon~.text:after {
    border-color: #fff;
    color: #fb6e52
}

input[type=checkbox].checkbox-slider.colored-orange.toggle:checked~.text:after {
    color: #fb6e52;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-orange.toggle~.text:after {
    background-color: #fb6e52
}

input[type=checkbox].checkbox-slider.colored-darkorange~.text:after {
    border-color: #ed4e2a
}

input[type=checkbox].checkbox-slider.colored-darkorange:checked~.text:before {
    background-color: #ed4e2a;
    border-color: #ed4e2a
}

input[type=checkbox].checkbox-slider.colored-darkorange:checked~.text:after {
    background-color: #ed4e2a;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-darkorange.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #ed4e2a
}

input[type=checkbox].checkbox-slider.colored-darkorange.slider-icon~.text:after {
    border-color: #fff;
    color: #ed4e2a
}

input[type=checkbox].checkbox-slider.colored-darkorange.toggle:checked~.text:after {
    color: #ed4e2a;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-darkorange.toggle~.text:after {
    background-color: #ed4e2a
}

input[type=checkbox].checkbox-slider.colored-magenta~.text:after {
    border-color: #bc5679
}

input[type=checkbox].checkbox-slider.colored-magenta:checked~.text:before {
    background-color: #bc5679;
    border-color: #bc5679
}

input[type=checkbox].checkbox-slider.colored-magenta:checked~.text:after {
    background-color: #bc5679;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-magenta.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #bc5679
}

input[type=checkbox].checkbox-slider.colored-magenta.slider-icon~.text:after {
    border-color: #fff;
    color: #bc5679
}

input[type=checkbox].checkbox-slider.colored-magenta.toggle:checked~.text:after {
    color: #bc5679;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-magenta.toggle~.text:after {
    background-color: #bc5679
}

input[type=checkbox].checkbox-slider.colored-purple~.text:after {
    border-color: #7e3794
}

input[type=checkbox].checkbox-slider.colored-purple:checked~.text:before {
    background-color: #7e3794;
    border-color: #7e3794
}

input[type=checkbox].checkbox-slider.colored-purple:checked~.text:after {
    background-color: #7e3794;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-purple.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #7e3794
}

input[type=checkbox].checkbox-slider.colored-purple.slider-icon~.text:after {
    border-color: #fff;
    color: #7e3794
}

input[type=checkbox].checkbox-slider.colored-purple.toggle:checked~.text:after {
    color: #7e3794;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-purple.toggle~.text:after {
    background-color: #7e3794
}

input[type=checkbox].checkbox-slider.colored-maroon~.text:after {
    border-color: #981b48
}

input[type=checkbox].checkbox-slider.colored-maroon:checked~.text:before {
    background-color: #981b48;
    border-color: #981b48
}

input[type=checkbox].checkbox-slider.colored-maroon:checked~.text:after {
    background-color: #981b48;
    border-color: #fff
}

input[type=checkbox].checkbox-slider.colored-maroon.slider-icon:checked~.text:after {
    background-color: #fff;
    color: #981b48
}

input[type=checkbox].checkbox-slider.colored-maroon.slider-icon~.text:after {
    border-color: #fff;
    color: #981b48
}

input[type=checkbox].checkbox-slider.colored-maroon.toggle:checked~.text:after {
    color: #981b48;
    background-color: #fff
}

input[type=checkbox].checkbox-slider.colored-maroon.toggle~.text:after {
    background-color: #981b48
}

Similar snippets

React js template and ui example password recovery form

password recovery form

React js template and ui example payment credit card form

payment credit card form

React js template and ui example Form send password

Form send password

React js template and ui example Edit profile page

Edit profile page

React js template and ui example bs5 dark footer

bs5 dark footer

React js template and ui example chat app

chat app

React js template and ui example bs4 Horizontal timeline

bs4 Horizontal timeline

React js template and ui example login box modal

login box modal