<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-red">Button</a>
<a href="" class="btn btn-sm btn-red">Button</a>
<a href="" class="btn btn-default btn-red">Button</a>
<a href="" class="btn btn-lg btn-red">Button</a>
<code>.btn-red</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lred">Button</a>
<a href="" class="btn btn-default btn-lred">Button</a>
<a href="" class="btn btn-sm btn-lred">Button</a>
<a href="" class="btn btn-xs btn-lred">Button</a>
<code>.btn-lred</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-pink">Button</a>
<a href="" class="btn btn-sm btn-pink">Button</a>
<a href="" class="btn btn-default btn-pink">Button</a>
<a href="" class="btn btn-lg btn-pink">Button</a>
<code>.btn-pink</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lpink">Button</a>
<a href="" class="btn btn-default btn-lpink">Button</a>
<a href="" class="btn btn-sm btn-lpink">Button</a>
<a href="" class="btn btn-xs btn-lpink">Button</a>
<code>.btn-lpink</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-purple">Button</a>
<a href="" class="btn btn-sm btn-purple">Button</a>
<a href="" class="btn btn-default btn-purple">Button</a>
<a href="" class="btn btn-lg btn-purple">Button</a>
<code>.btn-purple</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lpurple">Button</a>
<a href="" class="btn btn-default btn-lpurple">Button</a>
<a href="" class="btn btn-sm btn-lpurple">Button</a>
<a href="" class="btn btn-xs btn-lpurple">Button</a>
<code>.btn-lpurple</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-deep-purple">Button</a>
<a href="" class="btn btn-sm btn-deep-purple">Button</a>
<a href="" class="btn btn-default btn-deep-purple">Button</a>
<a href="" class="btn btn-lg btn-deep-purple">Button</a>
<code>.btn-deep-purple</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-ldeep-purple">Button</a>
<a href="" class="btn btn-default btn-ldeep-purple">Button</a>
<a href="" class="btn btn-sm btn-ldeep-purple">Button</a>
<a href="" class="btn btn-xs btn-ldeep-purple">Button</a>
<code>.btn-ldeep-purple</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-indigo">Button</a>
<a href="" class="btn btn-sm btn-indigo">Button</a>
<a href="" class="btn btn-default btn-indigo">Button</a>
<a href="" class="btn btn-lg btn-indigo">Button</a>
<code>.btn-indigo</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lindigo">Button</a>
<a href="" class="btn btn-default btn-lindigo">Button</a>
<a href="" class="btn btn-sm btn-lindigo">Button</a>
<a href="" class="btn btn-xs btn-lindigo">Button</a>
<code>.btn-lindigo</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-blue">Button</a>
<a href="" class="btn btn-sm btn-blue">Button</a>
<a href="" class="btn btn-default btn-blue">Button</a>
<a href="" class="btn btn-lg btn-blue">Button</a>
<code>.btn-blue</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lblue">Button</a>
<a href="" class="btn btn-default btn-lblue">Button</a>
<a href="" class="btn btn-sm btn-lblue">Button</a>
<a href="" class="btn btn-xs btn-lblue">Button</a>
<code>.btn-blue</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-light-blue">Button</a>
<a href="" class="btn btn-sm btn-light-blue">Button</a>
<a href="" class="btn btn-default btn-light-blue">Button</a>
<a href="" class="btn btn-lg btn-light-blue">Button</a>
<code>.btn-light-blue</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-llight-blue">Button</a>
<a href="" class="btn btn-default btn-llight-blue">Button</a>
<a href="" class="btn btn-sm btn-llight-blue">Button</a>
<a href="" class="btn btn-xs btn-llight-blue">Button</a>
<code>.btn-llight-blue</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-cyan">Button</a>
<a href="" class="btn btn-sm btn-cyan">Button</a>
<a href="" class="btn btn-default btn-cyan">Button</a>
<a href="" class="btn btn-lg btn-cyan">Button</a>
<code>.btn-cyan</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lcyan">Button</a>
<a href="" class="btn btn-default btn-lcyan">Button</a>
<a href="" class="btn btn-sm btn-lcyan">Button</a>
<a href="" class="btn btn-xs btn-lcyan">Button</a>
<code>.btn-lcyan</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-teal">Button</a>
<a href="" class="btn btn-sm btn-teal">Button</a>
<a href="" class="btn btn-default btn-teal">Button</a>
<a href="" class="btn btn-lg btn-teal">Button</a>
<code>.btn-teal</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lteal">Button</a>
<a href="" class="btn btn-default btn-lteal">Button</a>
<a href="" class="btn btn-sm btn-lteal">Button</a>
<a href="" class="btn btn-xs btn-lteal">Button</a>
<code>.btn-lteal</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-green">Button</a>
<a href="" class="btn btn-sm btn-green">Button</a>
<a href="" class="btn btn-default btn-green">Button</a>
<a href="" class="btn btn-lg btn-green">Button</a>
<code>.btn-green</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lgreen">Button</a>
<a href="" class="btn btn-default btn-lgreen">Button</a>
<a href="" class="btn btn-sm btn-lgreen">Button</a>
<a href="" class="btn btn-xs btn-lgreen">Button</a>
<code>.btn-lgreen</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-light-green">Button</a>
<a href="" class="btn btn-sm btn-light-green">Button</a>
<a href="" class="btn btn-default btn-light-green">Button</a>
<a href="" class="btn btn-lg btn-light-green">Button</a>
<code>.btn-light-green</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-llight-green">Button</a>
<a href="" class="btn btn-default btn-llight-green">Button</a>
<a href="" class="btn btn-sm btn-llight-green">Button</a>
<a href="" class="btn btn-xs btn-llight-green">Button</a>
<code>.btn-llight-green</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-lime">Button</a>
<a href="" class="btn btn-sm btn-lime">Button</a>
<a href="" class="btn btn-default btn-lime">Button</a>
<a href="" class="btn btn-lg btn-lime">Button</a>
<code>.btn-lime</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-llime">Button</a>
<a href="" class="btn btn-default btn-llime">Button</a>
<a href="" class="btn btn-sm btn-llime">Button</a>
<a href="" class="btn btn-xs btn-llime">Button</a>
<code>.btn-llime</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-yellow">Button</a>
<a href="" class="btn btn-sm btn-yellow">Button</a>
<a href="" class="btn btn-default btn-yellow">Button</a>
<a href="" class="btn btn-lg btn-yellow">Button</a>
<code>.btn-yellow</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lyellow">Button</a>
<a href="" class="btn btn-default btn-lyellow">Button</a>
<a href="" class="btn btn-sm btn-lyellow">Button</a>
<a href="" class="btn btn-xs btn-lyellow">Button</a>
<code>.btn-lyellow</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-amber">Button</a>
<a href="" class="btn btn-sm btn-amber">Button</a>
<a href="" class="btn btn-default btn-amber">Button</a>
<a href="" class="btn btn-lg btn-amber">Button</a>
<code>.btn-amber</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lamber">Button</a>
<a href="" class="btn btn-default btn-lamber">Button</a>
<a href="" class="btn btn-sm btn-lamber">Button</a>
<a href="" class="btn btn-xs btn-lamber">Button</a>
<code>.btn-lamber</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-orange">Button</a>
<a href="" class="btn btn-sm btn-orange">Button</a>
<a href="" class="btn btn-default btn-orange">Button</a>
<a href="" class="btn btn-lg btn-orange">Button</a>
<code>.btn-orange</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lorange">Button</a>
<a href="" class="btn btn-default btn-lorange">Button</a>
<a href="" class="btn btn-sm btn-lorange">Button</a>
<a href="" class="btn btn-xs btn-lorange">Button</a>
<code>.btn-lorange</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-deep-orange">Button</a>
<a href="" class="btn btn-sm btn-deep-orange">Button</a>
<a href="" class="btn btn-default btn-deep-orange">Button</a>
<a href="" class="btn btn-lg btn-deep-orange">Button</a>
<code>.btn-deep-orange</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-ldeep-orange">Button</a>
<a href="" class="btn btn-default btn-ldeep-orange">Button</a>
<a href="" class="btn btn-sm btn-ldeep-orange">Button</a>
<a href="" class="btn btn-xs btn-ldeep-orange">Button</a>
<code>.btn-ldeep-orange</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-brown">Button</a>
<a href="" class="btn btn-sm btn-brown">Button</a>
<a href="" class="btn btn-default btn-brown">Button</a>
<a href="" class="btn btn-lg btn-brown">Button</a>
<code>.btn-brown</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lbrown">Button</a>
<a href="" class="btn btn-default btn-lbrown">Button</a>
<a href="" class="btn btn-sm btn-lbrown">Button</a>
<a href="" class="btn btn-xs btn-lbrown">Button</a>
<code>.btn-lbrown</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-gray">Button</a>
<a href="" class="btn btn-sm btn-gray">Button</a>
<a href="" class="btn btn-default btn-gray">Button</a>
<a href="" class="btn btn-lg btn-gray">Button</a>
<code>.btn-gray</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lgray">Button</a>
<a href="" class="btn btn-default btn-lgray">Button</a>
<a href="" class="btn btn-sm btn-lgray">Button</a>
<a href="" class="btn btn-xs btn-lgray">Button</a>
<code>.btn-lgray</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-blue-gray">Button</a>
<a href="" class="btn btn-sm btn-blue-gray">Button</a>
<a href="" class="btn btn-default btn-blue-gray">Button</a>
<a href="" class="btn btn-lg btn-blue-gray">Button</a>
<code>.btn-blue-gray</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lblue-gray">Button</a>
<a href="" class="btn btn-default btn-lblue-gray">Button</a>
<a href="" class="btn btn-sm btn-lblue-gray">Button</a>
<a href="" class="btn btn-xs btn-lblue-gray">Button</a>
<code>.btn-lblue-gray</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-black">Button</a>
<a href="" class="btn btn-sm btn-black">Button</a>
<a href="" class="btn btn-default btn-black">Button</a>
<a href="" class="btn btn-lg btn-black">Button</a>
<code>.btn-black</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-lblack">Button</a>
<a href="" class="btn btn-default btn-lblack">Button</a>
<a href="" class="btn btn-sm btn-lblack">Button</a>
<a href="" class="btn btn-xs btn-lblack">Button</a>
<code>.btn-lblack</code>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="" class="btn btn-xs btn-white">Button</a>
<a href="" class="btn btn-sm btn-white">Button</a>
<a href="" class="btn btn-default btn-white">Button</a>
<a href="" class="btn btn-lg btn-white">Button</a>
<code>.btn-white</code>
</div>
<div class="col-md-5">
<a href="" class="btn btn-lg btn-white">Button</a>
<a href="" class="btn btn-default btn-white">Button</a>
<a href="" class="btn btn-sm btn-white">Button</a>
<a href="" class="btn btn-xs btn-white">Button</a>
<code>.btn-white</code>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-5">
<p class="text-red">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lred fr">.text-red</button>
</p>
</div>
<div class="col-md-5">
<p class="text-pink">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lpink fr">.text-pink</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-purple">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lpurple fr">.text-purple</button>
</p>
</div>
<div class="col-md-5">
<p class="text-deep-purple">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-ldeep-purple fr">.text-deep-purple</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-indigo">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lindigo fr">.text-indigo</button>
</p>
</div>
<div class="col-md-5">
<p class="text-blue">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lblue fr">.text-blue</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-light-blue">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-llight-blue fr">.text-light-blue</button>
</p>
</div>
<div class="col-md-5">
<p class="text-cyan">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lcyan fr">.text-cyan</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-teal">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lteal fr">.text-teal</button>
</p>
</div>
<div class="col-md-5">
<p class="text-green">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lgreen fr">.text-green</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-light-green">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-llight-green fr">.text-light-green</button>
</p>
</div>
<div class="col-md-5">
<p class="text-lime">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-llime fr">.text-lime</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-light-green">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-llight-green fr">.text-light-green</button>
</p>
</div>
<div class="col-md-5">
<p class="text-lime">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-llime fr">.text-lime</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-yellow">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lyellow fr">.text-yellow</button>
</p>
</div>
<div class="col-md-5">
<p class="text-amber">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lamber fr">.text-amber</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-orange">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lorange fr">.text-orange</button>
</p>
</div>
<div class="col-md-5">
<p class="text-deep-orange">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-ldeep-orange fr">.text-deep-orange</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-brown">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lbrown fr">.text-brown</button>
</p>
</div>
<div class="col-md-5">
<p class="text-gray">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lgray fr">.text-gray</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="text-blue-gray">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lblue-gray fr">.text-blue-gray</button>
</p>
</div>
<div class="col-md-5">
<p class="text-black">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non
metus auctor fringilla. Maecenas sed diam eget risus varius blandit
sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
<br><button class="btn btn-lblack fr">.text-black</button>
</p>
</div>
</div>
</div>
/*Don't include this section
---------------------------*/
body {
margin-top: 20px;
}
.row {
margin: 30px 0;
}
code {
margin-left: 20px;
}
.fr {
float: right;
}
/*------------------------*/
.btn-red {
color: #f8f8f8;
background-color: #F34235;
border-color: #c3352b;
}
.btn-red:hover {
color: #fff;
background-color: #c3352b;
border-color: #c3352b;
}
.btn-lred {
color: #F34235;
background-color: transparent;
border-color: #F34235;
}
.btn-lred:hover {
color: #fff;
background-color: #F34235;
border-color: #F34235;
}
.btn-pink {
color: #f8f8f8;
background-color: #E81D62;
border-color: #c51954;
}
.btn-pink:hover {
color: #fff;
background-color: #c51954;
border-color: #c51954;
}
.btn-lpink {
color: #E81D62;
background-color: transparent;
border-color: #c51954;
}
.btn-lpink:hover {
color: #fff;
background-color: #E81D62;
border-color: #E81D62;
}
.btn-purple {
color: #f8f8f8;
background-color: #9B26AF;
border-color: #89219b;
}
.btn-purple:hover {
color: #fff;
background-color: #89219b;
border-color: #89219b;
}
.btn-lpurple {
color: #9B26AF;
background-color: transparent;
border-color: #9B26AF;
}
.btn-lpurple:hover {
color: #fff;
background-color: #9B26AF;
border-color: #9B26AF;
}
.btn-deep-purple {
color: #f8f8f8;
background-color: #6639B6;
border-color: #5e35a8;
}
.btn-deep-purple:hover {
color: #fff;
background-color: #5e35a8;
border-color: #5e35a8;
}
.btn-ldeep-purple {
color: #6639B6;
background-color: transparent;
border-color: #6639B6;
}
.btn-ldeep-purple:hover {
color: #fff;
background-color: #6639B6;
border-color: #6639B6;
}
.btn-indigo {
color: #f8f8f8;
background-color: #3E50B4;
border-color: #3949a2;
}
.btn-indigo:hover {
color: #fff;
background-color: #3949a2;
border-color: #3949a2;
}
.btn-lindigo {
color: #3E50B4;
background-color: transparent;
border-color: #3E50B4;
}
.btn-lindigo:hover {
color: #fff;
background-color: #3E50B4;
border-color: #3E50B4;
}
.btn-blue {
color: #f8f8f8;
background-color: #2095F2;
border-color: #1a80d1;
}
.btn-blue:hover {
color: #fff;
background-color: #1a80d1;
border-color: #1a80d1;
}
.btn-lblue {
color: #2095F2;
background-color: transparent;
border-color: #2095F2;
}
.btn-lblue:hover {
color: #fff;
background-color: #2095F2;
border-color: #2095F2;
}
.btn-light-blue {
color: #f8f8f8;
background-color: #02A8F3;
border-color: #0396d8;
}
.btn-light-blue:hover {
color: #fff;
background-color: #0396d8;
border-color: #0396d8;
}
.btn-llight-blue {
color: #02A8F3;
background-color: transparent;
border-color: #02A8F3;
}
.btn-llight-blue:hover {
color: #fff;
background-color: #02A8F3;
border-color: #02A8F3;
}
.btn-cyan {
color: #f8f8f8;
background-color: #00BBD3;
border-color: #009fb3;
}
.btn-cyan:hover {
color: #fff;
background-color: #009fb3;
border-color: #009fb3;
}
.btn-lcyan {
color: #00BBD3;
background-color: transparent;
border-color: #00BBD3;
}
.btn-lcyan:hover {
color: #fff;
background-color: #00BBD3;
border-color: #00BBD3;
}
.btn-teal {
color: #f8f8f8;
background-color: #009587;
border-color: #018175;
}
.btn-teal:hover {
color: #fff;
background-color: #018175;
border-color: #018175;
}
.btn-lteal {
color: #009587;
background-color: transparent;
border-color: #009587;
}
.btn-lteal:hover {
color: #fff;
background-color: #009587;
border-color: #009587;
}
.btn-green {
color: #f8f8f8;
background-color: #4BAE4F;
border-color: #449d47;
}
.btn-green:hover {
color: #fff;
background-color: #449d47;
border-color: #449d47;
}
.btn-lgreen {
color: #4BAE4F;
background-color: transparent;
border-color: #4BAE4F;
}
.btn-lgreen:hover {
color: #fff;
background-color: #4BAE4F;
border-color: #4BAE4F;
}
.btn-light-green {
color: #f8f8f8;
background-color: #8AC249;
border-color: #78a83f;
}
.btn-light-green:hover {
color: #fff;
background-color: #78a83f;
border-color: #78a83f;
}
.btn-llight-green {
color: #8AC249;
background-color: transparent;
border-color: #8AC249;
}
.btn-llight-green:hover {
color: #fff;
background-color: #8AC249;
border-color: #8AC249;
}
.btn-lime {
color: #f8f8f8;
background-color: #CCDB38;
border-color: #bbc933;
}
.btn-lime:hover {
color: #fff;
background-color: #bbc933;
border-color: #bbc933;
}
.btn-llime {
color: #CCDB38;
background-color: transparent;
border-color: #CCDB38;
}
.btn-llime:hover {
color: #fff;
background-color: #CCDB38;
border-color: #CCDB38;
}
.btn-yellow {
color: #f8f8f8;
background-color: #FEEA3A;
border-color: #e4d235;
}
.btn-yellow:hover {
color: #fff;
background-color: #e4d235;
border-color: #e4d235;
}
.btn-lyellow {
color: #FEEA3A;
background-color: transparent;
border-color: #FEEA3A;
}
.btn-lyellow:hover {
color: #fff;
background-color: #FEEA3A;
border-color: #FEEA3A;
}
.btn-amber {
color: #f8f8f8;
background-color: #FEC006;
border-color: #e1aa05;
}
.btn-amber:hover {
color: #fff;
background-color: #e1aa05;
border-color: #e1aa05;
}
.btn-lamber {
color: #FEC006;
background-color: transparent;
border-color: #FEC006;
}
.btn-lamber:hover {
color: #fff;
background-color: #FEC006;
border-color: #FEC006;
}
.btn-orange {
color: #f8f8f8;
background-color: #FE9700;
border-color: #e78a01;
}
.btn-orange:hover {
color: #fff;
background-color: #e78a01;
border-color: #e78a01;
}
.btn-lorange {
color: #FE9700;
background-color: transparent;
border-color: #FE9700;
}
.btn-lorange:hover {
color: #fff;
background-color: #FE9700;
border-color: #FE9700;
}
.btn-deep-orange {
color: #f8f8f8;
background-color: #FE5621;
border-color: #d4481c;
}
.btn-deep-orange:hover {
color: #fff;
background-color: #d4481c;
border-color: #d4481c;
}
.btn-ldeep-orange {
color: #FE5621;
background-color: transparent;
border-color: #FE5621;
}
.btn-ldeep-orange:hover {
color: #fff;
background-color: #FE5621;
border-color: #FE5621;
}
.btn-brown {
color: #f8f8f8;
background-color: #785447;
border-color: #65463b;
}
.btn-brown:hover {
color: #fff;
background-color: #65463b;
border-color: #65463b;
}
.btn-lbrown {
color: #785447;
background-color: transparent;
border-color: #785447;
}
.btn-lbrown:hover {
color: #fff;
background-color: #785447;
border-color: #785447;
}
.btn-gray {
color: #f8f8f8;
background-color: #9D9D9D;
border-color: #888888;
}
.btn-gray:hover {
color: #ffffff;
background-color: #888888;
border-color: #888888;
}
.btn-lgray {
color: #9D9D9D;
background-color: transparent;
border-color: #9D9D9D;
}
.btn-lgray:hover {
color: #fff;
background-color: #9D9D9D;
border-color: #9D9D9D;
}
.btn-blue-gray {
color: #f8f8f8;
background-color: #5F7C8A;
border-color: #516a76;
}
.btn-blue-gray:hover {
color: #fff;
background-color: #516a76;
border-color: #516a76;
}
.btn-lblue-gray {
color: #5F7C8A;
background-color: transparent;
border-color: #5F7C8A;
}
.btn-lblue-gray:hover {
color: #fff;
background-color: #5F7C8A;
border-color: #5F7C8A;
}
.btn-black {
color: #f8f8f8;
background-color: #2d2d2d;
border-color: #000000;
}
.btn-black:hover {
color: #fff;
background-color: #000000;
border-color: #000000;
}
.btn-lblack {
color: #2d2d2d;
background-color: transparent;
border-color: #2d2d2d;
}
.btn-lblack:hover {
color: #fff;
background-color: #2d2d2d;
border-color: #2d2d2d;
}
.btn-white {
color: #000000;
background-color: #ffffff;
border-color: #d3d3d3;
}
.btn-white:hover {
color: #222222;
background-color: #f7f7f7;
border-color: #d3d3d3;
}
.text-red {
color: #F34235;
}
.text-pink {
color: #E81D62;
}
.text-purple {
color: #9B26AF;
}
.text-deep-purple {
color: #6639B6;
}
.text-indigo {
color: #3E50B4;
}
.text-blue {
color: #2095F2;
}
.text-light-blue {
color: #02A8F3;
}
.text-cyan {
color: #00BBD3;
}
.text-teal {
color: #009587;
}
.text-green {
color: #4BAE4F;
}
.text-light-green {
color: #8AC249;
}
.text-lime {
color: #CCDB38;
}
.text-yellow {
color: #FEEA3A;
}
.text-amber {
color: #FEC006;
}
.text-orange {
color: #FE9700;
}
.text-deep-orange {
color: #FE5621;
}
.text-brown {
color: #785447;
}
.text-gray {
color: #9D9D9D;
}
.text-blue-gray {
color: #5F7C8A;
}
.text-black {
color: #2d2d2d;
}
