How to Use Bootstrap with WordPress

Having a mobile-friendly website stopped being optional years ago. For over five years now, mobile usage has surpassed desktop, which means a lot of your visitors are viewing your website on a small screen.

To make sure they have a good experience, you want to build a responsive website—meaning, a website that displays the same information no matter what type of device a visitor uses, but automatically reorganizes the content to look good no matter the screen size. 

Bootstrap is a popular framework for creating responsive websites. And with WordPress still dominating the web—around 65% of all websites use the CMS (content management system)—many people that use Bootstrap to create a responsive website will want to add Bootstrap to WordPress in order to do so. 

What Is Bootstrap?

Bootstrap bills itself as “the world’s most popular front-end open source toolkit.” It’s a free framework that helps people design mobile-friendly websites quickly and easily using a responsive grid system. Experts can use it to simplify the process of building a responsive site, while non-experts can use it to make building a site more accessible since you only need a basic understanding of HTML and CSS to use Bootstrap.

7 Benefits of Using Bootstrap in WordPress

Bootstrap wasn’t designed with WordPress compatibility in mind, so using the two together isn’t as simple as installing a WordPress Bootstrap plugin. It requires a little more work (as we’ll get into below). Yet using Bootstrap in WordPress offers some key benefits that may make that extra bit of work well worth it. 

1. Bootstrap lets you add responsive functionality, without needing to add more plugins.

One of the big benefits of WordPress is the huge library of plugins you can use to extend your website’s functionality.

But plugins can come at a cost. If you have too many—especially if any of them are low quality—they could slow down your website or introduce security vulnerabilities. And security issues get worse if any of them become out of date, which can happen a lot as WordPress releases its software updates and plugin developers have to scramble to keep up. 

With Bootstrap, you’re able to build responsive functionality into the theme itself, so you don’t have to depend on plugins for it. That makes it easier to keep your plugin list more manageable and avoid tipping over the line into too many plugins. 

2. Like WordPress, Bootstrap is free to download.

WordPress and Bootstrap are both powerful tools for creating a website in just the way you like. Yet for all the value they pack in, they’re both entirely free.

While Bootstrap does sell premium templates you can use to speed up the process of creating your website—it’s always easier to start from a pre-existing design than to build from scratch—that cost is optional. If you’re willing to build a responsive site using Bootstrap yourself, you don’t have to pay anything for the privilege.

And even without a pre-built template, Bootstrap provides source code for a number of the types of website components you’re likely to need, such as sidebars, headers, carousels, and checkout forms. 

3. Bootstrap is relatively easy to use.

You do need at least a basic grasp of HTML and CSS in order to use Bootstrap. But you don’t need to be a web design expert. Bootstrap offers a thorough guide to getting started that walks you through a lot of what you need to know.

And by mixing and matching a lot of the elements and icons they provide, you can save yourself time you would otherwise spend on building each piece on your own. 

4. You can use Bootstrap to build WordPress themes.

WordPress theme development in Bootstrap is common for a reason. You can find plenty of WordPress themes other designers have already built using Bootstrap, or use it to build your own if you want something specific.

5. Both Bootstrap and WordPress are open source.

Both tools are open source, meaning that the vast number of skilled users they both have can (and do) continually create new resources and improvements for each. Plus, for anyone with the proper skills, using an open source software means you have more flexibility and power in how you use Bootstrap in WordPress. 

The more popular an online tool is, the more information you’ll be able to find from other users. Both WordPress and Bootstrap have large user bases, which translates into helpful articles, tutorials, guides, themes, and plugins you can tap into.

As long as you’re willing to devote the time to learn, the answers to most questions you’re likely to have are out there. 

7. Bootstrap works with a lot of different plugins. 

Bootstrap’s functionality can be extended with a number of available plugins that offer features like dropdown menus, ecommerce features, datepickers, and color selectors—just to name a few. Most of these plugins are available for free, it’s just a matter of finding the ones you need. 

How to Add Bootstrap to WordPress

To add Bootstrap to WordPress, you’ll need to start by downloading Bootstrap from the website. The download will come as a compressed file, so unzip it.

Then, using either an FTP client or the File Manager in your cPanel, look for the wp-content folder, then the themes folder within that. This is where you’ll be uploading the Bootstrap files. Before you do, create a new folder there, and name it something easy to remember like bootstrap-theme. Then upload the Bootstrap files you downloaded to that folder. 

how to add bootstrap to wordpress via cpanel

Certain files are required by WordPress for this to work correctly, so check that your Bootstrap files include style.css, index.php, header.php, and footer.php.

Now open up the style.css file in your Bootstrap folder, and edit the information so it matches your site. Specifically, fill in the data between the /* and */ symbols. It will look something like this:

/*

Theme Name: MyBootstrapTheme

Author: YourBusinessName

Description: ThemeDescription

Version: 1.0

Theme URI: yourwebsite.com

*/

Save the updates you’ve made. Then, when you go into your WordPress account, you should be able to see the theme in the Themes section under Appearance. Then you can customize as needed within WordPress.

Bootstrap + WordPress = A User Friendly Combo

By adding Bootstrap to WordPress, you get to keep the powerful flexibility and ease of use WordPress offers, while adding the simple approach to creating a responsive site that Bootstrap promises. It’s not your only option for creating a responsive site in WordPress, but for many website owners it’s one that will make sense. 

Casey is the Senior Director of Marketing for Hosting and has been in the web hosting space for 7 years. He loves the slopes and hanging out with his kids.