Use Bootstrap with WordPress: A Helpful Guide

If you’ve been around the WordPress community long enough, chances are you’ve heard the term WordPress Bootstrap. And there’s an equally likely chance you’ve been confused by the terminology, especially if you have any familiarity with Bootstrap itself.

I’m here to clear up the mystery behind the term, and then offer you an in-depth glimpse into why the two of them work so well together.

Let’s get started.

Table of Contents

What is Bootstrap?
Is WordPress Bootstrap Really a Thing?
Why You Should Consider a WordPress Bootstrap Combo
Getting Started: How to use Bootstrap Code in WordPress
WordPress Bootstrap Modals

What is Bootstrap?

Source: GetBootstrap

Let’s find out from the source. According to GetBootstrap.com, it’s “the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.”

jsDelivr is a “fast, free, and reliable CDN” that supports a number of platforms, including WordPress.

As a whole, Bootstrap is a toolkit of code snippets written in HTML, CSS, and JavaScript. It’s an amazing resource for web developers and designers, giving them the necessary resources to build responsive websites quickly and efficiently.

Think of all the time a developer would need to spend writing code if they were building a site from scratch. Then imagine a library of CSS and other code already at their fingertips, just waiting for a simple copy and paste.

And it’s free!

Here’s an idea of the included CSS:

Source: GetBootstrap Docs

And compiled right along with all that CSS is a variety of source code including JS files.

Interestingly, even though WordPress Bootstrap has become something of a thing, it was originally created by a designer and developer at Twitter in 2010 and was initially known as the Twitter Blueprint. But from that early stage, things quickly changed. It was only a few months after its development that Twitter held its first Hack Week—and developers discovered and added to the core of Bootstrap.

A year later it was up for public release and the rest, as they say, is history.

Okay, so now you know what Bootstrap is. But why is everyone calling it WordPress Bootstrap? Is there a special WordPress Bootstrap toolkit?

No. There isn’t.

Is WordPress Bootstrap Really a Thing?

Technically? No. There really isn’t a WordPress Bootstrap. But since the two kind of go together like peanut butter and jelly, WordPress Bootstrap has, in a sense, become a thing.

However, the WordPress Bootstrap integration isn’t a simple step like installing a plugin or theme. Because Bootstrap wasn’t specifically created to pair with WordPress.

To include Bootstrap with WordPress you need to download and unzip a precompiled cache of resources. If you look at the screenshot below and combine it with the CSS screenshot above, you’ll get a sense of what’s included in the basic form of Bootstrap.

Source: GetBootstrapDocs

The combination of the CSS and JS files is enough to drag and drop into practically any web project. Better yet, you can get compiled or decompiled and minified versions for a selection of developer tools available on specific browsers.

But again, creating a WordPress Bootstrap site isn’t as easy as installing a plugin.

Before moving on, let’s clarify, or further clarify, one important fact. Just like my comparison of peanut butter and jelly above, WordPress and Bootstrap are two entirely different things that just happen to go well together. Where WordPress is a Content Management System (CMS), Bootstrap is simply a design framework.

So you can build your WordPress website using Bootstrap. But should you?

Why You Should Consider a WordPress Bootstrap Combo

There are a few reasons why creating a WordPress Bootstrap combo is an excellent idea.

• Be different – create a unique site
• It’s easy to create a Bootstrap powered WordPress theme
• Using Bootstrap, you can create elements like menus, buttons, grids, tables, and more. Without knowing how to code them yourself
• If you already have a theme that you love, but it isn’t responsive, you can use Bootstrap to modify existing elements to create a responsive site

That last point is an important one.

Google now penalizes sites that aren’t responsive. Why? Because data shows more people are using mobile than ever.

Source: Oberlo

So updating your site is a smart move. With the use of Bootstrap, you can update your theme yourself, or you can hire a developer. And if you hire a developer that uses Bootstrap instead of coding everything from scratch, you’d likely get a better price.

Either way, a WordPress Bootstrap theme should be a value-added exercise.

For many websites, including some of the biggest in the world, WordPress is the CMS of choice. It’s considered by most to be the best of the CMS there is. But combining it with the power of a framework like Bootstrap means you are bringing the strengths of two development approaches together.

And creating something awesome.

And not only create it. With Bootstrap you can test your site against multiple browsers for compatibility.

There are several good reasons to consider a WordPress Bootstrap combo. Here are just a few:

• I mentioned browsers above. Bootstrap is a cross-browser framework that uses Reboot as a CSS baseline.
• If you ever get stuck using or setting up your WordPress Bootstrap combo, Bootstrap provides extensive documentation on their site.
• Since Bootstrap is very popular in the developer community, it’s easy to find tutorials.
• You can create your first WordPress Bootstrap site fairly easily.
• If you feel like you’re over your head, there are tons of starter themes available on sites like Understrap. These will provide a great starting point.

Getting Started: How to use Bootstrap Code in WordPress

Bootstrap is now at version 5 in beta but beginning with version 3 the developers began to incorporate mobile responsiveness into its core code. This means that even if you have only a basic understanding of CSS and HTML, you still have the ability to either build a WordPress Bootstrap site from scratch or take a custom theme that you purchased and tweak it as necessary.

Using Bootstrap also helps you keep your site lean. Often times, adding too many plugins can slow your site down. Of course, there are plugins like WPBlazer that will help you manage your site, so don’t be too quick to start stripping plugins from your unnecessarily.

Here are the steps on how to add Bootstrap to a WordPress theme. Note that these steps are what you need to create your own, brand new theme.

One more note! Please backup as you go. If you are customizing an existing theme, or as you make changes to your new theme. You can use the backup feature in WPBlazer.

Download and Install Bootstrap

1. Download Bootstrap at GetBootstrap.com and unzip it.

2. Connect to your server via FTP

3. Find your wp-content folder, then navigate to the Themes folder. Within the themes folder, create a new directory. You can create a name of your choice, but for the sake of this, I’m going to call the new folder Bootstrap.  Once done, upload your unzipped Bootstrap files to your new folder.

4. You’ll need to create some other files in order for WordPress Bootstrap to work, so the next step is the create the following files:

• footer.php
• functions.php
• header.php
• index.php
• sidebar.php
• style.css

The WordPress Codex details everything you need to know about creating these files.

Configuring WordPress Bootstrap

1. Open up the style.css file you created and configure it as follows, filling in your own information:

1. /*
2. Theme Name: Bootstrap
3. Theme URI: (the URL of your company)
4. Description: New Bootstrap Theme
5. Version:1.0
6. Author: (your company name)
7. Author URI: https://companyname.com

2. In the files you uploaded to your site, find the bootstrap.min.css file in the CSS folder. Copy and paste it into the new style.css you just created.

3. Set up an HTML template by doing the following:

It’s a good idea for your site to have a template where you make changes to your HTML. Perhaps you want to add a script that will impact the entire site. In WordPress, you would use the built-in get header() and get_footer() functions to achieve this.

To do this you will need to extract or cut your HTML code from your first div line down. Then you need to paste that into your header.php file. Then take the rest of your code and cut/paste it into your footer.php file.

Once that is done, find your index.php file and add the following code to it which will activate the changes you just made.

1.	
2.	

Now your site will load both the header and footer features, but of course, at this point, we haven’t added any styling.

4. Then, you need to set up your header and footer elements. To do this, you need to import the Bootstrap stylesheet into your header.php file.

You’ll find the necessary stylesheet in the files you uploaded to your site. In our example, we’ve uploaded to a theme named Bootstrap. It contains a directory called CSS and the first file in it is your Bootstrap stylesheet.

There are a few ways to import your stylesheet. First, you can use the WordPress function echo get_stylesheet_uri(). You can find more details on how to use this in the WordPress Code Reference Guides. Secondly, you can simply add the following to the top of your header.php file:

Then to make it all work, you need to add one more line of code just before your closing body tag:

JAVASCRIPT GOES HERE

Just be sure the replace the Bootstrap theme name in the above code with whatever you named your theme directory.

Once that is all done, your header and footer will be working and you can simply use the settings within your admin dashboard to finish styling your WordPress Bootstrap installation.

Now that you have your WordPress Bootstrap installation in place, let’s take a moment and talk about a few specifics.

WordPress Bootstrap Modals

First of all, what is a WordPress Bootstrap modal?

Modals are popup boxes that appear in the center of a visitor’s screen that are triggered by some action the user makes. They’re built with HTML, JavaScript, and CSS, and they can be customized and styled however you please.

If you have followed the Bootstrap installation like above and uploaded the JS directory to your themes folder, you already have the necessary Bootstrap JavaScript file to make your modal work.

Find your functions.php file, which is inside your theme folder. You should have added it by this point. There are two ways to add the Bootstrap JavaScript file to your functions.php, but I’m just going with the easiest here.

We’re simply going to add it from a remote static CDN. Add the following to your functions.php to call it:

// Remote Bootstrap Modal Javascript file
    wp_enqueue_script( 'modal', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/js/bootstrap-modal.min.js', array(), null, true );

Once you have added this, save your changes. Now go check your WordPress frontend and make sure your site is loading properly.

Now you need to create your modal file.

Inside your theme folder, create a new file named modal.php and then add the following, changing it with your own title and text, and then saving.

    
    

        

            

                
                

                    
WordPress Bootstrap
                
                
                

                    
This is what your modal popup will look like. You can customize it any way you want. 
                
                
                

                    Close
                
                
            
        
    

  
    Test Button