• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

Twitter Bootstrap is a HTML, CSS and Javascript toolkit that provides a framework to develop front-end user interfaces for web applications. Sounds too complex? In easy words it is a collection of HTML, CSS, Javascript code that web developers can use on their own projects.

Engineers at Twitter needed a framework with a set of conventions which they can use throughout their projects to maintain consistency and avoid contradictions among different applications and projects. So they came up with a solution and later they released that solution as an open source project. Twitter Bootstrap is licensed under Apache version v2.0 so any one can use it on their own projects.

Some features of Bootstrap are:

  • Responsive approach to design.
  • Cross browser support for all modern web browsers including smart phones and tablets.
  • Comes with dozens of design components (Forms, Buttons, Menus) ready to be deployed.
  • Supports HTML5, CSS3.
  • Easy to use even for beginner level developers.

How Twitter BootStrap Can be Used on WordPress Sites

WordPress is a web application and WordPress themes are basically the front-end user interfaces for that web application. Using Twitter Bootstrap, WordPress theme developers can quickly build rich user interfaces with lots of design elements readily available for them to use in their design. Bootstrap uses HTML5, CSS3, Javascript and JQuery plugins so it can be used to create feature rich, advance, sophisticated and well programmed themes for WordPress websites.

Free WordPress Themes Based On Bootstrap

StrapPress Theme

StrapPress Theme by BragInteractive is a very simple Twitter Bootstrap based WordPress Theme. To download this theme you need to provide your email address and name to BragInteractive. Once your email address is confirmed you receive an email with the download link. This download contains theme and some documentation. This theme is feature rich and has some serious potential. I think that developer level users might find it more useful than the average WordPress user. Even though it is very simple and easy but the actual theme does not showcase much features as it should be doing.

  • Custom menus on top.
  • Multiple widget areas.
  • Theme options allow you to add extra information in the header and footer areas.
  • Supports sticky/ featured post on the main page.
  • Elegant and easy to install and use.

StrapPress Theme »

WP-Bootstrap by 320press

WP-bootstrap is a simple yet elegant theme built on powerful Bones HTML5 framework and Twitter Bootstrap. It is feature rich and comes with all theme features that come with most useful WordPress themes. This theme is simple enough for an average WordPress user, yet powerful enough for advance level users who might want to play around with its code and functionality a little more.

  • 2 custom menus one on top and one in bottom.
  • 5 Widget areas, with different sidebars for homepage and single posts.
  • Advanced Theme Options Control Panel where you can adjust colors, fonts, etc.
  • WP-BootStrap comes with extra themes by Bootswatch which you can use in your theme.
  • Responsive theme looks great on different devices and screens.
  • Simple shortcodes so that you can use Bootstrap’s awesome UI features anywhere on your website.

WP-BootStrap Theme »

Bootstrap WP Theme

Rachel Baker’s Bootstrap WP is a work in progress but it looks very promising. Anyone can install and use the theme but right now it is intended to be used by other WordPress theme developers. The version I tested v.85, is a very simple theme. The reason I am including it here is because it looks promising and I hope that development continues on the project to include more features and theme options.

Premium WordPress Themes Based on Bootstrap

Free Twitter Bootstrap based WordPress themes are a great effort, as a WordPress user, I really appreciate the contributions these developers make for the community. But in this case, Premium Twitter Bootstrap WordPress themes truly outshine all free themes. The reason I have broken this list into two parts is simply because these two premium themes are far better than the above mentioned themes and it wasn’t fair to compare them with the free themes.

Standard Theme

Standard theme is a Premium WordPress Theme for Professional Blogging, makes heavy use of bootstrap.

Standard Theme »

Synapse Corporate WordPress Theme

This is definitely the most awesome theme that uses Twitter Bootstrap. Developed by Danny Duchaine, Synapse is a ready to use, easy to install and feature rich WordPress Theme. It takes full advantage of Bootstrap’s JQuery and Javascript goodness to create a beautiful user interface for any kind of WordPress website. It has multiple sliders to choose from, this makes the theme very useful for corporate, portfolio, and entertainment related websites. Powered by JQuery and CSS3, the animations are smooth and effortless.

  • Multiple sliders: sliders with small thumbnails, wide slider with thumbnails, Titles, bullets.
  • Beautifully stylized widgets for Twitter and Flickr streams, Video Widget, Testimonials Widget.
  • Filterable portfolio for developing a quick tabbed portfolio section.
  • Theme comes with excellent documentation which makes setting up easier and quick.
  • Theme options panel is simple and self explanatory.
  • Users can easily add User Interface elements following instructions in documentation. This allows users to create bootstrap style buttons, forms, tabs, etc.
  • Synapse also comes with 12 background patterns.

Synaps Corporate WordPress theme »

Instyle – Responsive Portfolio Theme

The name says it all, Instyle is a responsive theme particularly useful for portfolio and corporate websites. However, when I looked at it, I felt like it is more suitable for personal or professional blogs. The typography is beautiful and it is so clean and easy on eyes. The main feature of Instyle is that it is a responsive theme and looks great on all devices. Another main feature of the theme is the ability to insert different elements using shortcodes. Users can add alerts, buttons, maps, tabs, charts, dividers, etc. I am particularly impressed with the usage of shortcodes to create accordions and tabs.

  • Responsive Twitter Bootstrap based WordPress Theme suitable for all kind of sites even though the developers want to advertise it as a portfolio theme.
  • The reason they want to call it a portfolio theme is that it allows you to create beautiful portfolios.
  • The theme supports portfolios with paginated listings, it can create galleries of images, videos or audio and shows related items too.
  • Another awesome feature is the usage of JQuery – Sandbox plugin to sort portfolio items. This makes browsing between item categories so much fun.
  • Supports Audio and Video post formats.
  • You can upload your own logo, choose custom fonts from 30 fonts, choose colors, custom background, etc.

Instyle – Responsive Portfolio Theme »

WordPress Twitter Bootstrap CSS Plugin

WordPress Twitter Bootstrap CSS plugin makes bootstrap available to be included into any WordPress theme. It is simple and very easy to use and you don’t need to be a developer to use that plugin. Using shortcodes, users can add any bootstrap CSS, Javascript or JQuery element into their themes, posts and pages.

  • Add Twitter Bootstrap CSS and Javascript using shortcodes.
  • Supports buttons, icons, alerts, popovers, tooltip, etc.
  • Also supports icons by Glyphicons.
  • Before using the plugin you will have to enable Twitter Bootstrap Shortcodes from the options page.

WordPress Twitter Bootstrap CSS Plugin »

End Note

Twitter bootstrap is maintained by Mark Otto and Jacob Thornton, learn more about Twitter Bootstrap here. Also checkout some beautiful websites built with bootstrap.


Post Tags

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

27 Comments

  1. Nice really like the twitter bootstrap such a clean design.

  2. Awesome posting … i like this . thanks for shearing

  3. These twitter themes are so creative!! I love the design.

  4. Noumaan, thanks for including our Bootstrap theme. We are going to try and develop a new theme with Bootstrap 2 soon. 
    Thanks again!

  5. Thanks for mentioning us!

  6. Marvin

    Nice overview! What about “Roots Theme”? http://www.rootstheme.com

  7. Really great post and nice to see twitter bootstrap theme, that look pretty decent and interactive. I definitely try this theme. Thank you so much for sharing..

  8. Hey, thanks for the mention of our Twitter Bootstrap WordPress plugin! :)

  9. This is a nice post. . . i like see that, thanks for shearing!

  10. Serradinho Web Services

    I am using WHMCS on my online business website and I have incorporated some of the ‘Twitter Bootstrap’ functionality and it’s easy and great to use. Makes it simple for any kind of users out there, no matter where yo are in terms of knowledge. I love how they also have examples for users to see and use.

  11. Wow awesome!Nice to see twitter bootstrap here …Thanks for sharing your great creativity here with us…

  12. Excellent article. Good to have some good resources and its quite amazing share. Thanks for sharing.

  13. Anonymous

    Check out the Alien Ship theme built with Bootstrap. http://www.johnparris.com/alienship/

  14. I have just started diving into Bootstrap and using it for WordPress based websites. From what I have seen Bootstrap it is amazing and it makes the front end development job so much easier. 

    Thank you for the post and look forward to some more “gayaan” (knowledge in Hindi).

  15. marcremblance

    Great article!

    Could you possibly feature my WordPress theme built on Twitter Bootstrap (Reboot) -

    http://themeforest.net/item/reboot-responsive-bootstrap-html5-portfolio/2690319?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=guuthemes

    Many thanks

  16. Great article Noumaan,

    Can you feature my theme ‘Reboot’, WordPress Theme built on Twitter Bootstrap also -

    http://themeforest.net/item/reboot-responsive-bootstrap-html5-portfolio/2690319?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=guuthemes

    thanks

  17. Well explained how it works, and there are some really good themes, excellent article, cheers!

  18. Thanks for your marvelous posting! I seriously enjoyed reading it,
    you happen to be a great author.I will always bookmark your
    blog and may come back down the road. I want
    to encourage you continue your great job, have a nice day!

  19. Helo to every one, for the reason that I am actually eager of reading this webpage’s ppst to be updated on
    a regular basis. It carries good material.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors