Buttons

Default Size

Large Size

Small Size

Block Buttons

Default Size

[html] <button class="btn btn-default">Press me!</button> <button class="btn btn-primary">Press me!</button> <button class="btn btn-info">Press me!</button> <button class="btn btn-success">Press me!</button> <button class="btn btn-warning">Press me!</button> <button class="btn btn-danger">Press me!</button> [/html]

Large Size

[html] <button class="btn btn-lg btn-default">Press me!</button> <button class="btn btn-lg btn-primary">Press me!</button> <button class="btn btn-lg btn-info">Press me!</button> <button class="btn btn-lg btn-success">Press me!</button> <button class="btn btn-lg btn-warning">Press me!</button> <button class="btn btn-lg btn-danger">Press me!</button> [/html]

Small Size

[html] <button class="btn btn-sm btn-default">Press me!</button> <button class="btn btn-sm btn-primary">Press me!</button> <button class="btn btn-sm btn-info">Press me!</button> <button class="btn btn-sm btn-success">Press me!</button> <button class="btn btn-sm btn-warning">Press me!</button> <button class="btn btn-sm btn-danger">Press me!</button> [/html]

Block Buttons

[html] <button class="btn btn-block btn-default">Press me!</button> <button class="btn btn-block btn-primary">Press me!</button> <button class="btn btn-block btn-info">Press me!</button> <button class="btn btn-block btn-success">Press me!</button> <button class="btn btn-block btn-warning">Press me!</button> <button class="btn btn-block btn-danger">Press me!</button> [/html]
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Headers

Header level One

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, accusamus.

Header level two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, impedit.

Header level three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, veniam.

Header level four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laboriosam?

Header level five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, expedita.

Header level six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius!

Header level One

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, accusamus.

Header level two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, impedit.

Header level three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, veniam.

Header level four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laboriosam?

Header level five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, expedita.

Header level six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, eius!

Normal Headers

[html] <h1>Header level One</h1> <h2>Header level two</h2> <h3>Header level three</h3> <h4>Header level four</h4> <h5>Header level five</h5> <h6>Header level six</h6> [/html]

Section Titles

[html] <h1 class="section-title">Header level One</h1> <h2 class="section-title">Header level two</h2> <h3 class="section-title">Header level three</h3> <h4 class="section-title">Header level four</h4> <h5 class="section-title">Header level five</h5> <h6 class="section-title">Header level six</h6> [/html]
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

List

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Unordered

[html] <ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul> [/html]

Ordered

[html] <ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ol> [/html]

Description

[html] <dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl> [/html]

Horizontal Description

[html] <dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper</dt> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> </dl> [/html]
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Blockquotes

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

Someone famous in Source Title

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

Someone famous in Source Title
[html] <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote> <blockquote class="pull-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote> [/html]
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Badges

Nav Badges

[html] <a href="#">Inbox <span class="badge">42</span></a> <a href="#">Unread <span class="badge">12</span></a> <a href="#">Messages <span class="badge">42</span></a> [/html]

Nav Badges

[html] <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> Home </a> </li> <li> <a href="#"> <span class="badge pull-right">359</span> Profile </a> </li> <li> <a href="#"> <span class="badge pull-right">3</span> Messages </a> </li> </ul> [/html]
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Labels

Default Primary Success Info Warning Danger

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
[html] <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> <h1>Example heading <span class="label label-default">New</span></h1> <h2>Example heading <span class="label label-primary">New</span></h2> <h3>Example heading <span class="label label-success">New</span></h3> <h4>Example heading <span class="label label-info">New</span></h4> <h5>Example heading <span class="label label-warning">New</span></h5> <h6>Example heading <span class="label label-danger">New</span></h6> [/html]
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Striped

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
[html] <table class="table"> <thead> <tr> <th>...</th> </tr> </thead> <tbody> <tr></tr> </tbody> </table> [/html]

Table Striped

[html] <table class="table table-striped"> <thead> <tr> <th>...</th> </tr> </thead> <tbody> <tr></tr> </tbody> </table> [/html]
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Syntax Code

[js] // SyntaxHighlighter makes your code snippets beautiful without tiring your servers. // http://alexgorbatchev.com var setArray = function(elems) { this.length = 0; push.apply(this, elems); return this; } [/js]
[html] <pre class="brush: js"> // Code... </pre> [/html]

Syntax Highlighter Plugin

[[js]]
// code
// ...
[[/js]]
Change js for html, php, cpp, etc.

CSS

CSS

[html]






[/html]

TAKE A TOUR OF EPIC

002-video
LEARN MORE ABOUT EPIC

Watch a short video on how EPIC works!

001-technology
TAKE A TOUR INSIDE EPIC

Signup for a free 14 day trial
to see how EPIC works

003-call-center-operator
BOOK A LIVE DEMO

Let us show you how EPIC
can change your company!

YOU DON’T NEED ANOTHER SYSTEM

We know you don’t need another system in your office. That’s why we invented EPIC, a cloud-based Software Solution providing a unique employee experience through 360˚ employee and employer evaluations. But EPIC is more than just feedback and survey software. EPIC’s science allows for the evaluation of an employee’s value to the organization and how they are perceived and evaluated by their colleagues. It’s quick, easy to use, and allows your team to express their experiences in a confidential manner. That’s valuable insight for organizations looking to gain more from their employee investment.

PURPOSE + LOVE = LESS MONEY

Contrary to popular belief, money is not the determining factor to a positive employee experience. A job they love, filled with work they find meaningful, is much more important from an employee engagement perspective. An engaged employee is more committed, more invested and happier at work, which reflects in a higher level of performance for your organization.

Start Making your Workplace Better.

Use EPIC to boost retention, productivity, and employee satisfaction.

Get Social With Us