Our Bootstrap Theme “Shortcodes”

Well, these really aren’t “shortcodes” in the traditional WordPress 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

These color swatches are all based on the “Flat UI” kit from designmodo, although we’ve renamed their esoteric color names to things that should be easier to remember.

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>

Text Alignment

Of course WordPress has left, center, and right alignment that you can choose from the Visual Editor and that’s the easiest way to do it. However, because this theme is based on Bootstrap, there are some additional ones.

Left aligned text

Center aligned text

Right aligned text

Justified text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p class="alignleft">Left aligned text</p> or <p class="text-left">Left aligned text</p>
<p class="aligncenter">Center aligned text</p> or <p class="text-center">Center aligned text</p>
<p class="alignright">Right aligned text</p> or <p class="text-right">Right aligned text</p>
<p class="text-justify">Justified text</p>

Text Transformation

Transform text in components with text capitalization classes. These are especially useful in our themes, either to add capitalization or remove it from themes like Spot that automatically capitalize certain headings.

LOWERCASED TEXT

uppercased text

capitalized text

<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

Buttons, Buttons, and More Buttons

Progress Bars

Standard (progress-bars)

Striped (progress-striped)

Animated (progress-bar-striped active)

Stacked (all in same “progress” div)

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

Tabbed Content

• Home
• Profile
• Messages
• 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

Panels

<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>