Well, these really aren’t “shortcodes” in the traditional sense. They are CSS components built directly into our themes that you can use to beef up the look of your content. Most of them come from Bootstrap, but we have added color swatches that you can use for full-width colored sections and a couple of cool additional buttons.

Color Swatches

bg-white
bg-offwhite
bg-lightgray
bg-gray
bg-darkgray
bg-lightgreen
bg-darkgreen
bg-yellow
bg-blue
bg-darkblue
bg-midnightblue
bg-red
bg-almostblack
bg-notquiteblack
bg-black
<div class="section bg-darkgreen centered">bg-darkgreen</div>

Note that you can also use these colors for text as well. Just use the prefix ‘color-‘ instead of ‘bg-‘. For example, this text is in color-blue.

<span class="color-blue">this text is in color-blue</span>

Buttons, Buttons, and More Buttons

<a href="#" class="btn btn-primary">btn-primary</a>

Progress Bars

Standard (progress-bar)

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Striped (progress-striped)

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated (progress-bar-striped active)

45% Complete

Stacked (all in same “progress” div)

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<div class="progress-bar progress-bar-success" style="width: 40%;" role="progressbar"><span class="sr-only">40% Complete (success)</span></div>

Tabbed Content

This is some text related to settings.
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
...
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">This is some text related to <b>home</b>.</div>
<div class="tab-pane" id="profile">This is some text related to <b>profile</b>.</div>
...
</div>

Collapsible Content Panels

<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">Collapsible Group Item #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">Collapsible Group Item #2
</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">Collapsible Group Item #3
</a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">...</div>
</div>
</div>
</div>

Alerts

This is the text for the alert (alert-success)
This is the text for the alert (alert-info)
This is the text for the alert (alert-warning)
This is the text for the alert (alert-danger)
<div class="alert alert-primary">This is the text for the alert (alert-primary)</div>

Panels

Default Panel (panel-default)

Panel content

Primary Panel (panel-primary)

Panel content

Success Panel (panel-success)

Panel content

Info Panel (panel-info)

Panel content

Warning Panel (panel-warning)

Panel content

Danger Panel (panel-danger)

Panel content
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">Primary Panel (panel-primary)</h3></div>
<div class="panel-body">Panel content</div>
</div>