Bootstrap for WordPress - What Is It And Do I Need It?

So you are looking to create or redesign your WordPress site and someone has mentioned the word “Bootstrap” to you as a buzzword in relation to websites.

Use Bootstrap. Bootstrap’s really cool.

But what is it? And do you need Bootstrap for WordPress?

What is Bootstrap?

Bootstrap is a framework – a skeleton, if you will – to build websites. It was originally known as Twitter Bootstrap.

It’s designed mobile first – websites are built for phones first and then tablets and desktops.

Bootstrap contains three languages that make up web pages:

HTML – for structure
CSS – for presentation
JavaScript – for interactivity

The cool part is that Bootstrap comes with many ready-made components to make web development easier.

What components does Bootstrap have?

Here are some of them. You can find the full list on the Bootstrap site.

Grid layouts

Bootstrap comes with columns of various widths. You can have layouts with equal columns or unequal columns.

See a Bootstrap grid demo here.

Icons

There are 250 free Glyphicons to use.

Buttons

Bootstrap contains a number of buttons with options to group them, add them to form inputs or have button dropdowns.

Tabs

Tabs can be used for navigation or to display more text in an area below, conserving space.

Jumbotron

A large box for highlighting a piece of content.

Progress bars

Bars to indicate progress or percentages. They can be animated.

Modal windows

Pop-up windows which are often activated when a button is pressed.

Accordions

Elements which toggle open or closed on click.

Bootstrap accordion with 3 clickable components

Carousels

Slideshows which can contain images and text.

How can you use Bootstrap with WordPress?

You have 2 main options:

A Bootstrap-based theme, which contains the underlying framework.
A plugin to include Bootstrap.

Bootstrap themes

A search for “bootstrap” on the WordPress.org theme directory brings up 301 results.

Here are two of them.

The WhiteBoard64 theme makes use of Bootstrap for its home page layout.

Whiteboard64 theme uses a Bootstrap slider and 3 column layout for blog posts

BizLight theme also has a home page built with Bootstrap featuring a slider, icon fonts, columns and animations.

Bizlight theme uses a Bootstrap slider, columns, buttons and icons. The icons animate on hover.

Bootstrap plugins

To get more out of Bootstrap, you can add plugins which insert the code into WordPress.The advantage of using a plugin to add Boostrap for WordPress is that you can switch themes and retain the Bootstrap code.

I tried a few different plugins, and the winner was…

Easy Bootstrap Shortcode

This plugin adds a whole heap of buttons to the post editor! Each trigger a popup with options.

Once you have selected your options, the plugin adds a shortcode to your post or page. Not all of these are Bootstrap-specific, and a few of them are for the Pro version only.

With most of the buttons, you get some options.

Tooltip Image Shortcode dialog with dropdowns and text fields for your own values

With a few, like the accordion, there are no options and you’ll need to edit the generated text yourself. Just don’t delete the [ or ] characters, or your shortcode won’t work.

This is what the shortcodes looked like in the editor:

[toggles class="yourcustomclass"]
[toggle title="Accordion Number 1" class="in"]Toggle 1 Content Goes Here.[/toggle]
[toggle title="Accordion Number 2"]Toggle 2 Content Goes Here.[/toggle]
[toggle title="Accordion Number 3"]Toggle 3 Content Goes Here.[/toggle]
[toggle title="Accordion Number 4"]Toggle 4 Content Goes Here.[/toggle]
[/toggles]

[notification type="alert-warning" close="false" class="warning"]Your Notification[/notification]

[list]
[li type="glyphicon-ok"]your list content[/li]
[li type="glyphicon-ok"]your list content[/li]
[li type="glyphicon-ok"]your list content[/li]
[/list]

[progressbar value="50" barstyle="progress-striped" label="Skill"]

[tooltip type="link" link="#" target="_self" tooltip="Tooltip" style="top" ]Hover Me[/tooltip]

And on the page, in Twenty Sixteen theme. You’ll see my text looked tiny!

Bootstrap Shortcodes for accordion, notification, list, progress bar and tooltip

The reason is that the Bootstrap CSS overrode my theme CSS. Ouch!

Solution: go to EBS Settings in the menu and then CSS/JS Settings. Choose No Bootstrap theme for the Bootstrap Styling CSS File if you have a non-Bootstrap theme.

Twenty Sixteen Bootstrap shortcodes normal size

Back to normal size!

You can see that the shortcodes also work in another theme, like Libre.

The styling is slightly different because of the change of theme, but the components are the same.

Just make sure you don’t deactivate the plugin or you’ll lose your Bootstrap goodies! 🙂

What about other Bootstrap plugins?

I also tried WordPress Twitter Bootstrap CSS and Bootstrap Shortcodes, but in both cases, I had the same problem with the tiny text. Tweaking the settings wasn’t able to resolve this, unfortunately.

Any downsides of using Bootstrap for WordPress?

One downside of using Bootstrap is the impact on site speed. Loading in all the Bootstrap code can slow down your site’s performance.

Since all the components are loaded in one go, you may have code that you don’t actually use on your site.

The makers of the Flat Bootstrap theme say:

This is a theme for both users and theme developers with lots of features but without the bloat.

They also recommend a shortcode plugin, Bootstrap Shortcodes for WordPress, which only works with a Bootstrap theme.

The plugin uses Bootstrap 3 and requires PHP 5.3 or later.

Here’s an example of a page using the theme with some shortcodes.

Flat Bootstrap theme with full width template and Jumbotron, button and open modal window

The Bootstrap Shortcodes for WordPress are not quite as intuitive – you have to read the help guide to complete the shortcodes in right way to get the desired effect.

Documentation for Bootstrap Shortcodes for WordPress, Button component

So, do you need Bootstrap in your WordPress site?

The good

There’s a good range of components in Bootstrap to make a site livelier and more interactive.

I was impressed that some of the Bootstrap components were accessible. The accordions and modals worked well with keyboard controls alone.

(Carousels are not accessible: Bootstrap’s own documentation doesn’t recommend them if you want to make an accessible site.)

The not so good

Shortcodes are fiddly for many people to work with. Page builders are a more popular way to build pages now, and they often have their own components. (Note that page builders have their drawbacks too!)

To get the most out of Bootstrap your theme should be Bootstrap-enabled.

Your site may slow down if you are loading Bootstrap code you don’t use.

Verdict

I would say no, it’s not necessary to have a Bootstrap WordPress site.

By all means, use Bootstrap if you find a WordPress theme that you like which incorporates it, but be aware of the negatives.

More thoughts on why not to use Bootstrap:

What is Bootstrap?