How to Add Bootstrap in WordPress: A Step-by-Step Guide

If you have been into web development for a long time, you probably have used Bootstrap. Using Bootstrap in a custom code website is a simple task. You can integrate and use some simple processes. Did you know using it in the WordPress environment, is not as complicated as it seems. Seems interesting right? In this article, we will understand how to add Bootstrap to WordPress in a step-by-step manner.

Why Use Bootstrap in WordPress?

As you know Bootstrap is a CSS framework, that makes creating UI fun. Due to its comprehensive library of components, you can create complex UIs easily.

It streamlines the whole layout creation process and allows you to work efficiently. Since its introduction its popularity has only grown. As we can see it’s likely to grow in the future as well. According to a survey, it holds a whopping 76.9% market share in the CSS framework. Below we have explained why using Bootstrap with WordPress is a great choice.

1. Create Responsive Design Effortlessly

One of the most significant benefits of using Bootstrap is that it’s built on a grid system. It ensures your site looks appealing on all devices. By using Just simple classes, it adds a responsive element to your design. This way the layout automatically adjusts as per desktop, tablet, and mobile. Once you start using Bootstrap, you don’t have to write those media queries and long CSS code.

2. Extensive Component Library

Bootstrap has much more to offer than a grid system. For instance, it has a huge library of pre-built UI components that you can use directly in your design. Here are some UI component examples.

• Accordion
• Alerts
• Badge
• Breadcrumb
• Buttons
• Button group
• Card
• Carousel
• Close button
• Collapse
• Dropdowns
• List group
• Modal

3. Makes Development Much Faster

If you have spent decent time in development, you know creating a responsive layout takes a lot of time. With Bootstrap you don’t have to worry. its pre-built UI components and grid system take care of this. This way you get much more time to work on essential tasks, instead of working on the basic layout.

Methods to Include Bootstrap in WordPress

There are various ways you can use to integrate Bootstrap into WordPress. We will explain each in detail below. At first, we will understand how to add Bootstrap to your theme directly. Later we will discuss some alternate methods as well. For instance, using a Bootstrap plugin or a snippet plugin.

1. Using CDN

This is the simplest way of adding Bootstrap to your WordPress website. You don’t have to install anything on your server to use it. All you have to do is to load a CDN which is a short name of Content Delivery Network. Here’s how you can do it in the WordPress environment.

1. Enqueue Bootstrap in functions.php. You have to add the CDN link to your functions.php file which should look like this –

As you can see in the snippet above we have added two links. The first one loads Bootstrap CSS, while the other one is for JS. If you only want to use CSS, you can remove the second link. Now that you have added Bootstrap, it’s time to check if it’s loaded properly.

Press CTRL + U(Windows)/Cmd + U(Mac) to load the source code. Alternatively, you can view the source code by pressing the right click and selecting source code.

Now look for the file we have included above. To make the process faster, you can press CTRL + F(Windows)/Cmd + F(Mac) and search for bootstrap.min.css. If you have added the code properly you will find the file else re-check the code.

Here is a simple piece of code to check if it’s working in the front-end –

2. Add Bootstrap Files Manually

Another method is to use Bootstrap manually. This method is best when you want to add the bootstrap files locally. Unlike the CDN method, here you download and host the files. Here’s how you can do it.

Visit the official Bootstrap website. Download the latest version of Bootstrap. You can also choose the previous versions but we recommend using the latest to get most out of it.

Now place the bootstrap.min.css and bootstrap.min.js files in your theme’s directory. For instance, wp-content/themes/your-theme/css/ and wp-content/themes/your-theme/js/.
At last, you need to enqueue the files to your theme’s functions.php file –

That’s it, you have successfully added Bootstrap to your theme. Now you can start using its grid system and other UI components.

How to add Bootstrap in WordPress Using a Plugin

Using Bootstrap with the help of a plugin is a straightforward process. We have explained two methods of doing it below.

1. Using a plugin that comes with Bootstrap library.
2. Enqueue Bootstrap using the code snippet plugin.

1. Add Bootstrap using a Bootstrap Plugin

There are several WordPress plugins available to add Bootstrap to your site. Here we are using Bootstrap Blocks for WordPress to show you the process.

1. Go to the WordPress Dashboard.
2. Navigate to Plugins > Add New.
   Search for a plugin such as:
3. Bootstrap Blocks for WordPress
4. Install and activate it.
5. Go to the Plugin Settings: From here head on to Appearance in the dashboard and look for Bootstrap. Most likely you will find it below appearance. Now Select Bootstrap version.
   Some plugins allow you to choose which version of Bootstrap to use (e.g., Bootstrap 5).
6. Load Bootstrap files and ensure that the plugin is set to enqueue both the CSS and JS files of Bootstrap. You can also choose what to include and what not. That’s it! You can start using it right away.

2. Add Bootstrap Using a Code Snippet Plugin.

Another method is to use a snippet plugin, that lets you add code without modifying your files. Here we are using WPCode but you can use any snippet plugin of your choice.

Install and activate the plugin, now you look for Code Snippet in the dashboard. Click “Add Snippet” then “Add Your Custom Code (New Snippet)”. Add the following code to the snippet –

On the right corner, choose HTML, if it’s not already selected by default. Go below and set the location as a site-wide header. This will add Bootstrap to the whole site. Alternatively, you can choose to enqueue the bootstrap files. If you want to do that just add the code as described below. Don’t forget to select PHP from the right corner, and activate the snippet. If you see any error, deactivate the snippet.  and activate it after fixing it. Here is an example –

If you have hosted the files locally, you can add those instead of CDN. This should add the framework successfully. Still, verify before using it.

Wrapping Up

That’s all about adding the Bootstrap in WordPress. Natively WordPress does not include Bootstrap. With just simple steps you can add it and use it without any issues. Believe us you will not regret this decision.

It lets you create visually appealing sites, in much less time. So next time when you do WordPress development, don’t forget to add this comprehensive library to your project. If you enjoyed this article and learned something. You may also want to read our guide on how to add Tailwind in WordPress.