WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to add Twitter Bootstrap CSS in WordPress using Shortcodes

How to add Twitter Bootstrap CSS in WordPress using Shortcodes

Last updated on July 10th, 2013 by Editorial Staff
58 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

58 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

9 Comments

Leave a Reply
  1. kezzy says:
    Apr 3, 2016 at 5:51 am

    Thanks for this post. I have been using theme built on bootstrap framework and the process is straight forward rather than to input shortcodes here and there. Anyway will it not be easier to enqueue bootstrap script and style to a theme header and achieve the same result?

    Reply
  2. Thiago says:
    Aug 6, 2014 at 10:13 pm

    Thank you so much! This can help me a lot.

    Reply
  3. Deprito says:
    Dec 7, 2013 at 12:52 pm

    I’m using genesis, but when i try this plugin.. My css gone crazy..
    How to fix it? little bit confuse..

    Reply
    • WPBeginner Support says:
      Dec 8, 2013 at 2:27 pm

      Deprito, Genesis is itself a Theme Framework and getting Twitter Bootstrap to work on Genesis would require additional steps. Try Genesis support forums, someone must have already done that.

      Reply
  4. James Matthews says:
    Jul 29, 2013 at 9:18 pm

    Amazing tutorial. Cleared up a lot of confusion that I had about twitter bootstrap. Parts of bootstrap are still difficult for me to understand, but this will definitely be really useful as I start to become more familiar with it.

    Reply
  5. Steven Blake mba says:
    Jul 11, 2013 at 5:41 am

    Thanks for what I am sure must be a good article. I find it quite frustrating the amount of articles I could really be interested in that forget or don’t realise that the use of buzz words that you deal with every day might not be understood by anyone who hasn’t come across it before. I try not to do this in my own work as a life coach, which if I advertised as being an NLP practitioner I would put off 90% of people who don’t know what that is.

    So unfortunately until I understand what a twitter boot strap is I really don’t need the detail of how to install it. It may be I am missing out, but I don’t have the time to research any more than I already do and I did arrive here at your article, I just don’t want to have to look up several more before I return!

    Just one line explaining what it does and the benefits of having a twitter boot strap would be the difference between me reading on instead of moving on.

    This is constructive criticism by the way, add the description in this and any subsequent blogs and watch your outcomes improve. Best wishes, Steven

    Reply
    • Noumaan Yaqoob says:
      Jul 11, 2013 at 5:44 pm

      @Steven Twitter bootstrap is a set of predefined design tools which helps other designers and developers to use those elements in their own projects.

      The purpose of this article and the plugin is to help users like yourself to use twitter bootstrap without learning code or css.

      Reply
  6. Richie says:
    Jul 11, 2013 at 2:36 am

    Great tutorial.

    Reply
  7. craig grella says:
    Jul 10, 2013 at 11:46 am

    great post, thanks. I’ve used bootstrap and ported it for thesis and a few other themes, but this will be handy for sites that dont need the framework – just the buttons and icons.

    nice catch!

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
JustHost
JustHost Coupon
Get hosting for $3.95 / month and a free domain registration for life. Can't get any better.
Complianz
Complianz GDPR Coupon
Get 15% OFF on Complianz GDPR premium WordPress privacy suite plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.