Add Bootstrap Style Buttons To WordPress Theme

As a front-end developer, I found that Twitter Bootstrap as one of the most powerful, sleek and robust framework. It really helps to cut down the production time working on developing a new website. It was built at Twitter by @mdo and @fat and utilizes LESS CSS.

Currently, Bootstrap with LOTS of awesome features including some cool javascript plugins, comes with 12 grid responsive layout, sleek CSS and many more.

But, what if you already had a WordPress theme but want to use some of the cool features of Bootstrap such as the nice-looking buttons? Currently, there are few WordPress plugins that will you let you to do this.

1. Bootstrap Buttons

Download: Bootstrap Buttons

This is my favorite one. This plugin will let you to use the Bootstrap buttons in your content and includes the shortcode inserter so you do not have to remember every shortcode everytime you want to use it. This makes make inserting your buttons hassle free in both the visual and html editors.

Some of the features are:

  • A total of 5091 variations to use.
  • 3 buttons sizes (Large, Small and Mini).
  • 7 Button styles/colors (Default, Primary, Info, Success, Warning, Danger and Inverse).
  • 140 Icons in both Black and White versions.
Bootstrap Buttons Plugin

Bootstrap Buttons Shortcode Builder from the TinyMCE editor.

2. DW Shortcodes Bootstrap

Download: DW Shortcodes Bootstrap

Another plugin with almost the same features as Bootstrap Buttons plugin. The buttons can be inserted from the rich-editor for TinyMCE along with responsive feature and the sleek twitter bootstrap style. Some of the features included:

  • Can be used in posts, pages and even WordPress widgets.
  • Uses WordPress shortcode API
DW Shortcodes Bootstrap

Easily add Fluid Grid System, Notification, Buttons, Icons, Tabs and Accordian from the TinyMCE editor.

3. WordPress Twitter Bootstrap CSS

Download: WordPress Twitter Bootstrap CSS

This plugin can do more than just shortcode. WordPress Twitter Bootstrap CSS lets you to include the latest Twitter Bootstrap CSS and Javascript libraries in your WordPress site. You can even choose to include the Javascript files in the <head> section of your theme.

Some cool features of this plugin:

  • Works with any WordPress Theme.
  • Fully customizeable with built-in LESS Compiler.
  • Comes with lots of shortcodes.
  • Ability to add your own custom CSS reset file.

The bad thing about this plugin is it does not come with shortcode inserter from the TinyMCE editor but you can find some documentation on how to use the shortcode from the plugin settings page.

WordPress Twitter Bootstrap CSS

Shortcodes documentation

 

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *