1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again
3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings <span class="m-l-5"><i class="fa fa-cog"></i></span></button>
<ul class="dropdown-menu" role="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>
<h4 class="page-title">Buttons</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Default Buttons</h3>
</div>
<div class="panel-body">
<button type="button" class="btn btn-default waves-effect m-b-5">.btn-default</button>
<button type="button" class="btn btn-primary waves-effect waves-light m-b-5">.btn-primary</button>
<button type="button" class="btn btn-success waves-effect waves-light m-b-5">.btn-success</button>
<button type="button" class="btn btn-info waves-effect waves-light m-b-5">.btn-info</button>
<button type="button" class="btn btn-warning waves-effect waves-light m-b-5">.btn-warning</button>
<button type="button" class="btn btn-danger waves-effect waves-light m-b-5">.btn-danger</button>
<button type="button" class="btn btn-inverse waves-effect waves-light m-b-5">.btn-inverse</button>
<button type="button" class="btn btn-purple waves-effect waves-light m-b-5">.btn-purple</button>
<button type="button" class="btn btn-pink waves-effect waves-light m-b-5">.btn-pink</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Button-Custom</h3>
</div>
<div class="panel-body">
<button type="button" class="btn btn-default btn-custom waves-effect m-b-5">.btn-default</button>
<button type="button" class="btn btn-primary btn-custom waves-effect waves-light m-b-5">.btn-primary</button>
<button type="button" class="btn btn-success btn-custom waves-effect waves-light m-b-5">.btn-success</button>
<button type="button" class="btn btn-info btn-custom waves-effect waves-light m-b-5">.btn-info</button>
<button type="button" class="btn btn-warning btn-custom waves-effect waves-light m-b-5">.btn-warning</button>
<button type="button" class="btn btn-danger btn-custom waves-effect waves-light m-b-5">.btn-danger</button>
<button type="button" class="btn btn-inverse btn-custom waves-effect waves-light m-b-5">.btn-inverse</button>
<button type="button" class="btn btn-purple btn-custom waves-effect waves-light m-b-5">.btn-purple</button>
<button type="button" class="btn btn-pink btn-custom waves-effect waves-light m-b-5">.btn-pink</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Button-Rounded</h3>
</div>
<div class="panel-body">
<button type="button" class="btn btn-default btn-rounded waves-effect m-b-5">.btn-default</button>
<button type="button" class="btn btn-primary btn-rounded waves-effect waves-light m-b-5">.btn-primary</button>
<button type="button" class="btn btn-success btn-rounded waves-effect waves-light m-b-5">.btn-success</button>
<button type="button" class="btn btn-info btn-rounded waves-effect waves-light m-b-5">.btn-info</button>
<button type="button" class="btn btn-warning btn-rounded waves-effect waves-light m-b-5">.btn-warning</button>
<button type="button" class="btn btn-danger btn-rounded waves-effect waves-light m-b-5">.btn-danger</button>
<button type="button" class="btn btn-inverse btn-rounded waves-effect waves-light m-b-5">.btn-inverse</button>
<button type="button" class="btn btn-purple btn-rounded waves-effect waves-light m-b-5">.btn-purple</button>
<button type="button" class="btn btn-pink btn-rounded waves-effect waves-light m-b-5">.btn-pink</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Button-Width</h3>
</div>
<div class="panel-body">
<button type="button" class="btn btn-primary waves-effect waves-light w-xs m-b-5">Xs</button>
<button type="button" class="btn btn-purple waves-effect waves-light w-sm m-b-5">Small</button>
<button type="button" class="btn btn-info waves-effect waves-light w-md m-b-5">Middle</button>
<button type="button" class="btn btn-warning waves-effect waves-light w-lg m-b-5">Large</button>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Button-Sizes</h3>
</div>
<div class="panel-body">
<button class="btn btn-primary waves-effect waves-light btn-lg m-b-5">Large button</button>
<button class="btn btn-danger waves-effect waves-light m-b-5">Normal button</button>
<button class="btn btn-success waves-effect waves-light btn-sm m-b-5">Small button</button>
<button class="btn btn-purple waves-effect waves-light btn-xs m-b-5">Extra small button</button>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Button-Disabled</h3>
</div>
<div class="panel-body">
<button class="btn btn-info disabled m-b-5">Info</button>
<button class="btn btn-purple disabled m-b-5">Purple</button>
<button class="btn btn-pink disabled m-b-5">Pink</button>
<button class="btn btn-inverse disabled m-b-5">Inverse</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Icon Button</h3>
</div>
<div class="panel-body">
<button class="btn btn-icon waves-effect btn-default m-b-5"> <i class="fa fa-heart-o"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-danger m-b-5"> <i class="fa fa-remove"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-purple m-b-5"> <i class="fa fa-music"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-primary m-b-5"> <i class="fa fa-star"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-success m-b-5"> <i class="fa fa-thumbs-o-up"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-info m-b-5"> <i class="fa fa-keyboard-o"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-warning m-b-5"> <i class="fa fa-wrench"></i> </button>
<br/>
<button class="btn btn-default waves-effect m-b-5"> <i class="fa fa-heart"></i> <span>Like</span> </button>
<button class="btn btn-inverse waves-effect waves-light m-b-5"> <i class="fa fa-envelope-o"></i> <span>Share</span> </button>
<button class="btn btn-warning waves-effect waves-light m-b-5"> <i class="fa fa-rocket"></i> <span>Launch</span> </button>
<button class="btn btn-info waves-effect waves-light m-b-5"> <i class="fa fa-cloud"></i> <span>Cloud Hosting</span> </button>
<button class="btn btn-pink waves-effect waves-light m-b-5"> <span>Book Flight</span> <i class="fa fa-plane"></i> </button>
<button class="btn btn-purple waves-effect waves-light m-b-5"> <span>Donate Money</span> <i class="fa fa-money"></i> </button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Block Button</h3>
</div>
<div class="panel-body">
<button type="button" class="btn btn-block btn-lg btn-primary waves-effect waves-light">Block Button</button>
<button type="button" class="btn btn-block btn--md btn-pink waves-effect waves-light">Block Button</button>
<button type="button" class="btn btn-block btn-sm btn-success waves-effect waves-light">Block Button</button>
<button type="button" class="btn btn-block btn-xs btn-purple waves-effect waves-light">Block Button</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Button Group</h3>
</div>
<div class="panel-body">
<div class="btn-group m-b-10">
<button type="button" class="btn btn-default waves-effect">Left</button>
<button type="button" class="btn btn-default waves-effect">Middle</button>
<button type="button" class="btn btn-default waves-effect">Right</button>
</div>
<br/>
<div class="btn-group btn-group-justified m-b-10">
<a class="btn btn-primary waves-effect waves-light" role="button">Left</a>
<a class="btn btn-warning waves-effect waves-light" role="button">Middle</a>
<a class="btn btn-danger waves-effect waves-light" role="button">Right</a>
</div>
<div class="btn-group m-b-10">
<button type="button" class="btn btn-default waves-effect">1</button>
<button type="button" class="btn btn-default waves-effect">2</button>
<button type="button" class="btn btn-inverse waves-effect">3</button>
<button type="button" class="btn btn-default waves-effect">4</button>
</div>
<div class="btn-group m-b-10">
<button type="button" class="btn btn-default waves-effect">5</button>
<button type="button" class="btn btn-inverse waves-effect">6</button>
<button type="button" class="btn btn-default waves-effect">7</button>
</div>
<div class="btn-group m-b-10">
<button type="button" class="btn btn-default waves-effect">8</button>
</div>
<br/>
<div class="btn-group m-b-10">
<button type="button" class="btn btn-default waves-effect">1</button>
<button type="button" class="btn btn-primary waves-effect">2</button>
<button type="button" class="btn btn-default waves-effect">3</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li><a href="#/">Dropdown link 1</a></li>
<li><a href="#/">Dropdown link 2</a></li>
<li><a href="#/">Dropdown link 3</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="btn-group-vertical m-b-10">
<button type="button" class="btn btn-default waves-effect">Top</button>
<button type="button" class="btn btn-default waves-effect">Middle</button>
<button type="button" class="btn btn-default waves-effect">Bottom</button>
</div>
</div>
<div class="col-md-3">
<div class="btn-group-vertical m-b-10">
<button type="button" class="btn btn-default waves-effect">Button 1</button>
<button type="button" class="btn btn-default waves-effect">Button 2</button>
<button type="button" class="btn btn-default dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Button 3 <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li><a href="#/">Dropdown link 1</a></li>
<li><a href="#/">Dropdown link 2</a></li>
<li><a href="#/">Dropdown link 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Dropdown</h3>
</div>
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu" role="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 class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu" role="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 class="btn-group">
<button type="button" class="btn btn-pink dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu" role="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 class="btn-group">
<button type="button" class="btn btn-purple dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu" role="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>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Split button dropdown</h3>
</div>
<div class="panel-body">
<div class="btn-group dropdown">
<button type="button" class="btn btn-success waves-effect waves-light">Dropddown</button>
<button type="button" class="btn btn-success dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false"><i class="caret"></i></button>
<ul class="dropdown-menu" role="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 class="btn-group dropdown">
<button type="button" class="btn btn-primary waves-effect waves-light">Dropddown</button>
<button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false"><i class="caret"></i></button>
<ul class="dropdown-menu" role="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 class="btn-group dropdown">
<button type="button" class="btn btn-default waves-effect">Dropddown</button>
<button type="button" class="btn btn-default dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"><i class="caret"></i></button>
<ul class="dropdown-menu" role="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>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Dropup</h3>
</div>
<div class="panel-body">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
<ul class="dropdown-menu" role="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 class="btn-group dropup">
<button type="button" class="btn btn-warning dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
<ul class="dropdown-menu" role="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 class="btn-group dropup">
<button type="button" class="btn btn-success dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
<ul class="dropdown-menu" role="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 class="btn-group dropup">
<button type="button" class="btn btn-default dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
<ul class="dropdown-menu" role="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>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">File upload buttons</h3>
</div>
<div class="panel-body">
<div class="fileupload btn btn-primary waves-effect waves-light">
<span>Upload</span>
<input type="file" class="upload"/>
</div>
<div class="fileupload btn btn-purple waves-effect waves-light">
<span><i class="ion-upload m-r-5"></i>Upload</span>
<input type="file" class="upload"/>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-right">
<div class="container">
<div class="row">
<div class="col-xs-6">
2016 © Moltran.
</div>
<div class="col-xs-6">
<ul class="pull-right list-inline m-b-0">
<li>
<a href="#/">About</a>
</li>
<li>
<a href="#/">Help</a>
</li>
<li>
<a href="#/">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</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;}
/* ==============
Buttons
===================*/
.btn {
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 2px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
font-family: 'Nunito', sans-serif;
letter-spacing: 0.2px;
opacity: 0.93;
}
.btn:hover {
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
opacity: 1;
}
.btn:focus {
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
opacity: 1;
}
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-inverse,
.btn-purple,
.btn-pink {
color: #ffffff !important;
}
.btn-default:hover {
background-color: #f9f9f9;
}
.btn-default:focus {
background-color: #f9f9f9;
}
.btn-default:active {
background-color: #f9f9f9;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open > .dropdown-toggle.btn-primary {
background-color: #6e8cd7 !important;
border: 1px solid #6e8cd7 !important;
}
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.focus,
.btn-success:active,
.btn-success:focus,
.btn-success:hover,
.open > .dropdown-toggle.btn-success {
background-color: #33b86c !important;
border: 1px solid #33b86c !important;
}
.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.focus,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.open > .dropdown-toggle.btn-info {
background-color: #29b6f6 !important;
border: 1px solid #29b6f6 !important;
}
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.focus,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover,
.open > .dropdown-toggle.btn-warning {
background-color: #ffd740 !important;
border: 1px solid #ffd740 !important;
color: #333333 !important;
}
.btn-danger,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.btn-danger.active,
.btn-danger.focus,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.open > .dropdown-toggle.btn-danger {
background-color: #ef5350 !important;
border: 1px solid #ef5350 !important;
}
.btn-inverse,
.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.focus,
.btn-inverse:active,
.btn-inverse:focus,
.btn-inverse:hover,
.open > .dropdown-toggle.btn-inverse {
background-color: #212121 !important;
border: 1px solid #212121 !important;
color: #ffffff;
}
.btn-purple,
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active {
background-color: #7e57c2 !important;
border: 1px solid #7e57c2 !important;
color: #ffffff;
}
.btn-pink,
.btn-pink:hover,
.btn-pink:focus,
.btn-pink:active {
background-color: #ec407a !important;
border: 1px solid #ec407a !important;
color: #ffffff;
}
.btn-custom.btn-default:hover {
color: #333333 !important;
}
.btn-custom.btn-default:active {
color: #333333 !important;
}
.btn-custom.btn-default:focus {
color: #333333 !important;
}
.btn-custom.btn-primary {
color: #6e8cd7 !important;
}
.btn-custom.btn-success {
color: #33b86c !important;
}
.btn-custom.btn-info {
color: #29b6f6 !important;
}
.btn-custom.btn-warning {
color: #ffd740 !important;
}
.btn-custom.btn-danger {
color: #ef5350 !important;
}
.btn-custom.btn-inverse {
color: #212121 !important;
}
.btn-custom.btn-purple {
color: #7e57c2 !important;
}
.btn-custom.btn-pink {
color: #ec407a !important;
}
.btn-rounded {
border-radius: 2em;
padding: 6px 18px;
}
.btn-custom {
-moz-border-radius: 2px;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-webkit-border-radius: 2px;
-webkit-transition: all 400ms ease-in-out;
background: transparent;
background-color: transparent !important;
border-radius: 2px;
border-width: 1px;
transition: all 400ms ease-in-out;
}
.btn-custom:hover {
color: #ffffff !important;
}
.btn-custom:focus {
color: #ffffff !important;
}
.fileupload {
overflow: hidden;
position: relative;
}
.fileupload input.upload {
cursor: pointer;
filter: alpha(opacity=0);
font-size: 20px;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
}
/* ==============
Panels
===================*/
.panel {
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 0px;
border: none;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.panel .panel-body {
padding: 20px;
}
.panel .panel-body p {
margin: 0px;
}
.panel .panel-body p + p {
margin-top: 15px;
}
.panel-heading {
border-radius: 0;
border: none !important;
padding: 10px 20px;
}
.panel-default > .panel-heading {
background-color: #fafafa;
border-bottom: none;
color: #797979;
}
.panel-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 0;
margin-top: 0;
text-transform: uppercase;
}
.panel-footer {
background: #fafafa;
border-top: 0px;
}
.panel-color .panel-title {
color: #ffffff;
}
.panel-primary > .panel-heading {
background-color: #6e8cd7;
}
.panel-success > .panel-heading {
background-color: #33b86c;
}
.panel-info > .panel-heading {
background-color: #29b6f6;
}
.panel-warning > .panel-heading {
background-color: #ffd740;
}
.panel-danger > .panel-heading {
background-color: #ef5350;
}
.panel-purple > .panel-heading {
background-color: #7e57c2;
}
.panel-pink > .panel-heading {
background-color: #ec407a;
}
.panel-inverse > .panel-heading {
background-color: #212121;
}
.panel-border {
border-radius: 3px;
}
.panel-border .panel-heading {
background-color: #ffffff;
border-top: 3px solid #ccc !important;
border-radius: 3px;
padding: 10px 20px 0px;
}
.panel-border .panel-body {
padding: 15px 20px 20px 20px;
}
.panel-border.panel-primary .panel-heading {
border-color: #6e8cd7 !important;
color: #6e8cd7 !important;
}
.panel-border.panel-success .panel-heading {
border-color: #33b86c !important;
color: #33b86c !important;
}
.panel-border.panel-info .panel-heading {
border-color: #29b6f6 !important;
color: #29b6f6 !important;
}
.panel-border.panel-warning .panel-heading {
border-color: #ffd740 !important;
color: #ffd740 !important;
}
.panel-border.panel-danger .panel-heading {
border-color: #ef5350 !important;
color: #ef5350 !important;
}
.panel-border.panel-purple .panel-heading {
border-color: #7e57c2 !important;
color: #7e57c2 !important;
}
.panel-border.panel-pink .panel-heading {
border-color: #ec407a !important;
color: #ec407a !important;
}
.panel-border.panel-inverse .panel-heading {
border-color: #212121 !important;
color: #212121 !important;
}
.panel-fill {
border-radius: 3px;
}
.panel-fill .panel-heading {
background-color: transparent;
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.panel-fill .panel-body {
color: rgba(255, 255, 255, 0.85);
}
.panel-fill.panel-default .panel-body {
color: #666;
}
.panel-fill.panel-default .panel-heading {
background-color: transparent;
color: #333333;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.panel-fill.panel-primary {
background-color: #489ce7;
}
.panel-fill.panel-success {
background-color: #58c386;
}
.panel-fill.panel-info {
background-color: #50c1f4;
}
.panel-fill.panel-warning {
background-color: #fcdc63;
}
.panel-fill.panel-danger {
background-color: #ef7270;
}
.panel-fill.panel-purple {
background-color: #9475cb;
}
.panel-fill.panel-pink {
background-color: #ec6391;
}
.panel-fill.panel-inverse {
background-color: #4a4a4a;
}
.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before {
content: '\f067';
}
.panel-group .panel .panel-heading .accordion-toggle.collapsed:before {
content: '\f067';
}
.panel-group .panel .panel-heading a[data-toggle=collapse] {
display: block;
}
.panel-group .panel .panel-heading a[data-toggle=collapse]:before {
content: '\f068';
display: block;
float: right;
font-family: 'FontAwesome';
font-size: 14px;
text-align: right;
width: 25px;
}
.panel-group .panel .panel-heading .accordion-toggle {
display: block;
}
.panel-group .panel .panel-heading .accordion-toggle:before {
content: '\f068';
display: block;
float: right;
font-family: 'FontAwesome';
font-size: 14px;
text-align: right;
width: 25px;
}
.panel-group .panel .panel-heading + .panel-collapse .panel-body {
border-top: none;
}
.panel-group .panel-heading {
padding: 12px 26px;
}
.panel-group.panel-group-joined .panel + .panel {
border-top: 1px solid #eeeeee;
margin-top: 0;
}
.panel-group-joined .panel-group .panel + .panel {
border-top: 1px solid #eeeeee;
margin-top: 0;
}