Category: Intermediate
Twitter Bootstrap is a CSS (Cascading Style Sheets) and JavaScript framework which is used to create websites. It involves adding CSS classes to your HTML markup to use the features. It was initially developed at Twitter to create consistency in the design elements. It was, however, made open source soon thereafter and moved to popular site Github. It has since become the most popular project on Github and used by NASA and MSNBC.
Although using native Bootstrap involves coding in HTML and CSS to get the desired effects, this post would explain how to achieve the same effects using short codes, with absolutely no knowledge of HTML and CSS.
Installing the Plugin:
Firstly, head over to the plugin’s page in the wordpress site to install the plugin. Alternately, you can search for “WordPress Twitter Bootstrap CSS” in Plugins > Add New. Activate it after installation.
Finding the list of short codes:
After activation, you would find that a new item “Twitter Bootstrap” has been added to the menu. Also, you would be greeted by the notice below.
You can either click the button in the notice or go to Twitter Bootstrap > Dashboard to go to your dashboard which contains a lot of information, including and not limited to, the list of short codes.
For the moment, do ignore the list of advertisements by the plugin in the dashboard. They tend you throw you off your course, but try to search for the short codes.
Each of these contain links to the plugin’s website, which then show you some usage examples of the short codes.
Configure settings:
Go to Twitter Bootstrap > Bootstrap CSS to configure your settings. Choose the settings that suit you. You can also configure Bootstrap LESS (a stylesheet language) provided you have the LESS compiler installed and configured.
Insert Bootstrap Elements in posts:
So, you are in a position now to add Twitter Bootstrap elements into your WordPress posts and pages. All you need to do is use the shortcodes at proper places.
For example,
[TBS_BUTTON id=”myButton” color=”primary” link=”http://example.com”]My Awesome Thing[/TBS_BUTTON] will show the following output.
Meanwhile, you can change the color from “primary” to “danger” or “success” and change the theme of the button to red or green, respectively.
You can add alerts with the [TBS_ALERT] short code. Alerts would look like this.
Just like buttons, you can add button groups with [TBS_BUTTONGROUP].
You can also add labels, pop overs, progress bars and tooltips. You can also use a wide range of icons that come with Bootstrap.
At this time, however, dropdowns, tab groups and code are not fully supported by the plugin.
Further Reading:
For a more detailed post, you can head over to the plugin’s documentation. They have provided a good amount of detailed demos, which would give you a relatively strong feeling about this plugin and its usage.
Although you can achieve this by directly editing your themes, Twitter Bootstrap provides an easier alternative to direct changes to the theme, something that is good for people who are not comfortable with HTML and CSS. It is a great leap ahead, and saves a lot of time in development.
