Help file.
BootstrapPress offers Twitter Bootstrap styles with WordPress Shortcodes. The aim is to make adding elements such as Tabs, Grid, Buttons...) to your WordPress blog as simple as possible.
Just upload the plugin and activate it. BootstrapPress requires WordPress 3.5, but the latest version is always recommended.
You can use the Twitter Bootstrap HTML Code directly or the provided the Shortcodes. The Shortcodes are provided for ease of use especially if you are in the WordPress editor. For more information about Shortcodes.
We are working on a Premium version which will provide a handful of features.
You can sign-up for our announcement newsletter in our BootstrapPress site to get notified when the Premium version is launched
A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
[bs_hero_unit]
... Put content here
[/bs_hero_unit]
<div class="twitter_bs hero-unit">
... Put content here
</div>
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
[bs_page_header]
... Put content here
[/bs_hero_unit]
<div class="twitter_bs page-header">
... Put content here
</div>
Use the well as a simple effect on an element to give it an inset effect.
[bs_well size=""]
... Put content here
[/bs_well]
<div class="twitter_bs well">
... Put content here
</div>
All HTML headings, h1 through h6 are available.
[bs_h1]h1. Heading 1[/bs_h1]
[bs_h2]h2. Heading 2[/bs_h2]
[bs_h3]h3. Heading 3[/bs_h3]
[bs_h4]h4. Heading 4[/bs_h4]
[bs_h5]h5. Heading 5[/bs_h5]
[bs_h6]h6. Heading 6[/bs_h6]
<h1 class="twitter_bs">h1. Header 1<h1>
<h2 class="twitter_bs">h2. Header 2<h2>
<h3 class="twitter_bs">h3. Header 3<h3>
<h4 class="twitter_bs">h4. Header 4<h4>
<h5 class="twitter_bs">h5. Header 5<h5>
<h6 class="twitter_bs">h6. Header 6<h6>
[bs_p type="" color=""]
.. Put content here
[/bs_p]
<p class="twitter_bs">
.. Put Content here
</p>
Make use of HTML's default emphasis tags with lightweight styles.
[bs_small]Highlighted Content[/bs_small]
[bs_bold]Highlighted Content[/bs_bold]
[bs_italic]Highlighted Content[/bs_italic]
<small class="twitter_bs">Highlighted Content<small>
<bold class="twitter_bs">Highlighted Content<bold>
<italic class="twitter_bs">Highlighted Content<italic>
Stylized implementation of HTML's abbr element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
[bs_abbr title="HyperText Markup Language" type=""]HTML[/bs_abbr]
<abbr class="twitter_bs" title="HyperText Markup Language">HTML<abbr>
For quoting blocks of content from another source within your document.
[bs_blockquote display=""]
... Put content here
[/bs_blockquote]
<blockquote class="twitter_bs">
... Put content here
<blockquote>
140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.
[bs_icon icon="search" color=""]
<i class="twitter_bs icon-search"></i>
[bs_label_default]Default[/bs_label_default]
[bs_label_success]Success[/bs_label_success]
[bs_label_warning]Warning[/bs_label_warning]
[bs_label_important]Important[/bs_label_important]
[bs_label_info]Info[/bs_label_info]
[bs_label_inverse]Inverse[/bs_label_inverse]
<span class="twitter_bs label">Default<span>
<span class="twitter_bs label label-success">Success<span>
<span class="twitter_bs label label-warning">Warning<span>
<span class="twitter_bs label label-important">Important<span>
<span class="twitter_bs label label-info">Info<span>
<span class="twitter_bs label label-inverse">Inverse<span>
[bs_badge_default]Default[/bs_badge_default]
[bs_badge_success]Success[/bs_badge_success]
[bs_badge_warning]Warning[/bs_badge_warning]
[bs_badge_important]Important[/bs_badge_important]
[bs_badge_info]Info[/bs_badge_info]
[bs_badge_inverse]Inverse[/bs_badge_inverse]
<span class="twitter_bs badge">Default<span>
<span class="twitter_bs badge badge-success">Success<span>
<span class="twitter_bs badge badge-warning">Warning<span>
<span class="twitter_bs badge badge-important">Important<span>
<span class="twitter_bs badge badge-info">Info<span>
<span class="twitter_bs badge badge-inverse">Inverse<span>
[bs_button href="#" type="" size="" state=""]Button Text[/bs_button]
<a href="#" class="twitter_bs btn">Button Text</a>
[bs_table strip="" border="" highlight="" size=""]
... Table content here
[/bs_table]
<table class="twitter_bs table">
... Table content here
</table>
[bs_head]
... Table header content
[/bs_head]
<thead class="twitter_bs">
... Table header content
</thead>
[bs_head]
... Table body content
[/bs_head]
<tbody class="twitter_bs">
... Table body content
</tbody>
[bs_row type=""]
... Row content here
[/bs_row]
<tr class="twitter_bs">
... Row content here
</tr>
[bs_cell]
... Cell content here
[/bs_cell]
<td class="twitter_bs">
... Table content here
</td>
[bs_table]
[bs_head]
[bs_row]
[bs_cell]First Name[/bs_cell]
[bs_cell]Last Name[/bs_cell]
[bs_cell]User Name[/bs_cell]
[bs_row]
[/bs_head]
[bs_body]
[bs_row]
[bs_cell]Mark[/bs_cell]
[bs_cell]Otto[/bs_cell]
[bs_cell]@mdo[/bs_cell]
[/bs_row]
[bs_row]
[bs_cell]Jacob[/bs_cell]
[bs_cell]Thornton[/bs_cell]
[bs_cell]@fat[/bs_cell]
[/bs_row]
[bs_row]
[bs_cell]Larry[/bs_cell]
[bs_cell]The Bird[/bs_cell]
[bs_cell]@twitter[/bs_cell]
[/bs_row]
[/bs_body]
[/bs_table]
<table class="twitter_bs table ">
<thead><br />
<tr class=""></tr><br />
<td>First Name</td><br />
<td>Last Name</td><br />
<td>User Name</td><br />
<tr class=""></tr><br />
</thead><br />
<tbody><br />
<tr class=""><br />
<td>Mark</td><br />
<td>Otto</td><br />
<td>@mdo</td><br />
</tr><br />
<tr class=""><br />
<td>Jacob</td><br />
<td>Thornton</td><br />
<td>@fat</td><br />
</tr><br />
<tr class=""><br />
<td>Larry</td><br />
<td>The Bird</td><br />
<td>@twitter</td><br />
</tr><br />
</tbody><br />
</table>
[bs_grid display=""]
... Grid content here
[/bs_grid]
<div class="twitter_bs row">
... Grid content here
</div>
[bs_column size=""]
... Column content here
[/bs_column]
<div class="twitter_bs span8">
... Column content here
</div>
<div class="twitter_bs span4">
... Column content here
</div>
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
[bs_tabs]
[bs_tab title="Home" id="home"]
My Home content
[/bs_tab]
[bs_tab title="Profile" id="profile" active="true"]
My Profile content
[/bs_tab]
[bs_tab title="Messages" id="messages"]
My Messages content
[/bs_tab]
[/bs_tabs]
<ul class="twitter_bs nav nav-tabs" id=""><br>
<li class=""><a href="#home" data-toggle="tab">Home</a></li><br>
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li><br>
<li class=""><a href="#messages" data-toggle="tab">Messages</a></li><br>
</ul>
<div class="twitter_bs tab-content"><br>
<div class="tab-pane " id="home"><br>
My Home content<br>
</div><br>
<div class="tab-pane active" id="profile"><br>
My Profile content<br>
</div><br>
<div class="tab-pane " id="messages"><br>
My Messages content<br>
</div><br>
</div>
[bs_tooltip tooltip="Tooltip content" placement="left"]Tooltip Link[/bs_tooltip]
<a href="#" class="twitter_bs bs_tooltip" data-placement="left" data-original-title="Tooltip content">Tooltip Link</a>
[bs_popover tooltip="Popover content" placement="left"]Popover Link[/bs_popover]
<a href="#" class="twitter_bs bs_popover" data-placement="left" data-original-title="Popover content">Popover Link</a>
[bs_accordion id=""]
[bs_accordion_tab title="Collapsible Item 1"]
HTML/ShortCode Content for tab 1 here
[/bs_accordion_tab]
[bs_accordion_tab title="Collapsible Item 2" active="true"]
HTML/ShortCode Content for tab 2 here
[/bs_accordion_tab]
[/bs_accordion]
<div class="twitter_bs accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#zg1m2FM6NY">Collapsible Item 1</a>
</div>
<div class="accordion-body collapse " id="zg1m2FM6NY">
<div class="accordion-inner">
HTML/ShortCode Content for tab 1 here
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#RzmHs2jbLv">Collapsible Item 2</a>
</div>
<div class="accordion-body collapse in" id="RzmHs2jbLv">
<div class="accordion-inner">
HTML/ShortCode Content for tab 2 here
</div>
</div>
</div>
</div>
BootstrapPress is developed and maintained by Abid Omar.
BootstrapPress is licensed under the GPLv3 License. The Twitter Bootstrap CSS code is licensed under the Apache License v2.0. The Apache License v2.0 is compatible with the GPLv3.
We are open to custom development requests for WordPress, PHP and Front-End development (JavaScript). If you are interested you can contact us: contact@omarabid.com.