headers

Header 1 Header 1 Small
Header 1 Strong

Header 2 Header 2 Small
Header 2 Strong

Header 3 Header 3 Small
Header 3 Strong

Header 4 Header 4 Small
Header 4 Strong

Header 5 Header 5 Small
Header 5 Strong
Header 6 Header 6 Small
Header 6 Strong


p class="lead"

Lead paragraph lorem ipsum dolor sit amet, consectetur.

pargraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim, nulla in dignissim auctor, metus massa porttitor felis, sit amet posuere risus ante vitae elit. Integer pellentesque, dolor et accumsan interdum, nibh tellus finibus dolor, vitae sollicitudin sapien tortor non odio. Mauris in ullamcorper risus, vel luctus elit.

Vestibulum sit amet venenatis mauris. Proin turpis magna, porta eget vulputate sed, laoreet sed velit. Sed cursus porttitor leo sed facilisis. Suspendisse potenti. Aliquam et metus id libero tincidunt pulvinar. Sed tristique ipsum aliquet felis pulvinar rutrum. Nullam elementum, odio nec semper pharetra, lorem leo euismod orci, a viverra turpis eros quis nulla. Sed semper, lectus at dignissim lacinia, nulla lacus condimentum tellus, a condimentum mi neque consequat nibh. Curabitur placerat, turpis nec blandit elementum, ex est viverra sem, vitae dictum velit orci fermentum leo.




text colors

class="text-muted"

class="text-primary" #272E30;

class="text-success"

class="text-info"

class="text-warning"

class="text-danger"

class="text-blue"

class="text-gray-darkest" #43484A

class="text-gray-darker" #5E6263

class="text-gray-dark" #777B7D

class="text-gray" #A9AEB0

class="text-gray-light" #C1C7C9

class="text-gray-lighter" #DCE1E3

class="text-gray-lightest" #EDEFF0

class="text-white"



background colors

class="bg-blue" #36AFFF

class="bg-gray-darkest" #43484A

class="bg-gray-darker" #5E6263

class="bg-gray-dark" #777B7D

class="bg-gray" #A9AEB0;

class="bg-gray-light" #C1C7C9

class="bg-gray-lighter" #DCE1E3

class="bg-gray-lightest" #EDEFF0

class="bg-white"




less variables

@ecogreen-logo-blue: #0D629B;

@ecogreen-logo-green: #236B3E;

@ecogreen-blue: #36AFFF;

@ecogreen-blue-lighter: #5CBEFF;

@ecogreen-blue-darker: #309DE6;


@brand-primary: #36AFFF;

@brand-success: #5cb85c;

@brand-info: #5bc0de;

@brand-warning: #f0ad4e;

@brand-danger: #d9534f;


@gray-base: #272E30;

@gray-darkest: #43484A;

@gray-darker: #5E6263;

@gray-dark: #777B7D;

@gray: #A9AEB0;

@gray-light: #C1C7C9;

@gray-lighter: #DCE1E3;

@gray-lightest: #EDEFF0;




buttons

Button Default a class="btn btn-default"
Button Primary a class="btn btn-primary"
Button success a class="btn btn-success"
Button warning a class="btn btn-warning"
Button danger a class="btn btn-danger"


forms - standard

Example block-level help text here.

<form>
<div class="form-group">
   <label for="exampleInputEmail1">Email address</label>
   <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
   <label for="exampleInputPassword1">Password</label>
   <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
   <label for="exampleInputFile">File input</label>
   <input type="file" id="exampleInputFile">
   <p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
   <label>
   <input type="checkbox"> Check me out
   </label>
</div>
<div class="radio">
   <label>
   <input type="radio"> Check me out
   </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>



blockquote
- quote icon automatically applied when using following markup:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous, Job Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer><strong>Someone famous</strong>, Job Title</footer>
</blockquote>



standalone quote icon

This is a quote at the beginning of a random h3

This is a quote at the beginning of a random paragraph

<h3> <i class="quote-icon"></i> This is a quote at the beginning of a random h3</h3>
<p> <i class="quote-icon"></i> This is a quote at the beginning of a random paragraph</p>




Calls to Action



GET A FREE QUOTE

GET A FREE QUOTE

GET A FREE QUOTE

shortcodes (wordpress)

[cta link='YOUR_LINK_HERE!!' color='blue']
[cta link='YOUR_LINK_HERE!!' color='gray']
[cta link='YOUR_LINK_HERE!!' color='white']

html

<a href="#" class="cta-blue"><p> GET A FREE QUOTE <i class="arrow-blue"></i> </p></a>
<a href="#" class="cta-gray"><p> GET A FREE QUOTE <i class="arrow-gray"></i> </p></a>
<a href="#" class="cta-white"><p class=" bg-blue"> GET A FREE QUOTE <i class="arrow-white"></i> </p></a>



GET A FREE QUOTE
GET A FREE QUOTE
GET A FREE QUOTE

shortcodes (wordpress)

[cta link='YOUR_LINK_HERE!!' color='blue' size='large']
[cta link='YOUR_LINK_HERE!!' color='gray' size='large']
[cta link='YOUR_LINK_HERE!!' color='white' size='large']

html

<a href="#" class="cta-blue"><h5> GET A FREE QUOTE <i class="arrow-blue"></i> </h5></a>
<a href="#" class="cta-gray"><h5> GET A FREE QUOTE <i class="arrow-gray"></i> </h5></a>
<a href="#" class="cta-white"><h5 class="bg-blue"> GET A FREE QUOTE <i class="arrow-white"></i> </h5></a>



to change the text of the call to action:

[cta link='YOUR_LINK_HERE!!' color='gray' size='large' text='LEARN MORE' ]

LEARN MORE

[cta link='YOUR_LINK_HERE!!' text='LEARN MORE' ]

LEARN MORE






text overlaid on images

<h5 class="text-white"> OUTDOOR LEDS </h5>
<h6 class="text-white">Wind N Sea Restaurant</h6>

OUTDOOR LEDS
Wind N Sea Restaurant