How to add Twitter Bootstrap CSS in WordPress using Shortcodes

Adding CSS elements like tooltips, colorful buttons, and roll-over effects can help your content stand out. The problem is that most people don’t know how to use CSS to add colorful buttons, tables, labels, etc. We have shown you how to add colorful widgets and tables in WordPress. In this article, we will show you how to use Twitter Bootstrap CSS in WordPress using shortcodes.

Twitter Bootstrap is a CSS and JavaScript framework that helps boost your site design and functionality quickly. It was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across their internal tools. Later it was released as an open source tool. It is beautiful, simple, and compatible on all browsers.

First thing you need to do is install and activate the WordPress Twitter Bootstrap CSS plugin. Upon activation, the plugin will add a Twitter Bootstrap menu item in your WordPress admin. Clicking on it will take you to plugin’s dashboard.

Bootstrap Menu

On the dashboard, you will see an awful lot of advertisements added by the plugin author. Scroll down past them, and you will see the shortcodes that you can add in your posts. Each shortcode is linked to the plugin’s support page where you can see more usage examples of these shortcodes.

Bootstrap shortcode usage examples

Under the Twitter Bootstrap menu item in your admin, there is a link to configure Bootstrap CSS settings. Clicking on that will take you to the configuration page where you can change the settings to fit your needs. You have the option to choose which Bootstrap CSS version you would like to use. Below that you will find options more suited for advance level users.

Now that we have looked at the configuration, let’s add some bootstrap css elements to a blog post. Simply paste the shortcodes like this in your post or page content:

<!--Shortcodes->
[TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]Download[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]Cancel[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]Learn more[/TBS_BUTTON]
Icons:
[TBS_ICON class="icon-globe"]
[TBS_ICON class="icon-globe"]
[TBS_ICON class="icon-chevron-right"]
[TBS_ICON class="icon-music"]
[TBS_ICON class="icon-film"]
[TBS_ICON class="icon-user"]
[TBS_ICON class="icon-wrench"]
[TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] 
[TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] 
[TBS_LABEL class="success"]Green: Label[/TBS_LABEL] 
[TBS_ALERT class="success"]Settings saved[/TBS_ALERT]

This is how these shortcodes will look like in the blog post:

Twitter bootstrap css elements added to a post

There are many more CSS elements that you can add to your posts. Tooltips, accordian menus, popup boxes, progress bars, etc. This plugin’s website has more documentation on how to use these features. If you are curious about icons, then you can look at Twitter Bootstrap’s official site for the complete set of icons that you can use.

We know that theme frameworks like Genesis and others come with their own options. Do you use CSS elements in your posts? Let us know by leaving a comment below.