How To Add Bootstrap To WordPress: A Beginner’s Guide

When building a WordPress website, you want it to look great on all devices, from small phones to big computer screens. This is where Bootstrap helps. Bootstrap is a popular tool that makes websites mobile-friendly and easy to style. Many developers use it because it saves time and provides a ready-made design system.

Now, you may wonder why you should use Bootstrap in WordPress. WordPress themes come with styles, but you may need more control over your site’s appearance. Bootstrap provides a flexible design system with built-in styles, layouts, and features like navigation bars, buttons, grids, and forms. You don’t have to write a lot of CSS or worry about making your site responsive; Bootstrap handles it for you.

There are different ways to add Bootstrap to WordPress, each with advantages. The easiest method is using a CDN, which loads Bootstrap directly from the internet without requiring downloads. Another approach is enqueuing Bootstrap in WordPress, the proper way of integrating it using WordPress’s built-in functions.

Alternatively, you can download Bootstrap manually and add its files directly to your theme for complete control. In this guide we explore these methods step by step, making it easy for you to start using Bootstrap. If you’re a newbie or an experienced user, this tutorial will help you create a modern, stylish, and user-friendly website.

KEY TAKEAWAYS

• Bootstrap helps make WordPress websites look modern and work well on all devices.
• You can add Bootstrap to WordPress using a CDN, enqueueing in functions.php, or manually downloading files.
• A CDN is the easiest method, as it loads Bootstrap from the internet without extra setup.
• The best practice is to enqueue Bootstrap in functions.php, which ensures proper loading and avoids conflicts.
• If you manually download and add Bootstrap to WordPress, it gives you more control over customization.
• If Bootstrap is not working, check for missing files, theme conflicts, or JavaScript errors.
• Use browser developer tools (F12) to troubleshoot Bootstrap loading issues.

Understand Bootstrap & WordPress

Two tools can make the process easier when creating a website: Bootstrap and WordPress. Both are popular and widely used, but they serve different purposes. Let’s look at what they are and how they help in website development.

Bootstrap

This open-source front-end framework helps developers create beautiful, mobile-friendly websites. It was developed to facilitate web design and is now used by millions of websites worldwide.

According to W3Techs, Bootstrap powers 18.3% of all websites, giving it a 22.3% share of the JavaScript library market.

One of Bootstrap’s biggest strengths is its mobile-first approach. This means websites built with Bootstrap automatically adjust to different screen sizes, from small phones to large desktops.

It comes with pre-styled components, such as buttons, forms, and navigation menus, so you don’t have to write a lot of CSS from scratch. It also includes a grid system, which allows you to organize your website layout. Bootstrap is like a toolbox for designing modern websites without spending hours writing complex code.

WordPress

WordPress is a content management system (CMS) that lets you build and manage websites without needing advanced coding skills. It started as a blogging platform but has become a powerful tool for creating all kinds of websites, from business sites to online stores.

One of the reasons WordPress is so popular is because of its flexibility and ease of use. It includes a simple graphical user interface (GUI) to add pages, posts, images, and other content. You can also extend its features by installing themes and plugins to customize your site without coding.

WordPress is used by over 43.4% of all websites on the internet, making it the most widely used website-building tool. Below are the precise statistics showing the growth of WordPress’s market share over the years based on data from W3Techs.

Here, powering 43.4% of all websites means a 61.6% share of the content management system market.

Source: W3Techs

If you’re a beginner or advanced, WordPress lets you build a professional website with little effort.

How do They Work Together?

Using Bootstrap and WordPress together to create stunning websites works well. WordPress handles the content and site management, while Bootstrap assists with design and layout. When you add Bootstrap to WordPress, you get a responsive, visually appealing website that looks great on any device.

How to Add Bootstrap to WordPress

In the next section, we explore 3 different ways to add Bootstrap to WordPress:

1. Add Bootstrap to WordPress via CDN
2. Enqueue Bootstrap in the WordPress Theme
3. Manually Download and Add Bootstrap to WordPress.

Then, we’ll learn how to verify it.

Method 1: Add Bootstrap to WordPress via CDN (Easiest Way)

One of the fastest ways to add Bootstrap to your WordPress website is by using a Content Delivery Network (CDN). A CDN is an online service that hosts Bootstrap’s files, so you don’t have to download anything. Instead, you link to these files, which load directly from the internet.

This method works so well because:

• It is quick and does not require extra files on your website.
• Bootstrap stays updated automatically when the CDN provider updates it.
• It improves website speed since CDNs deliver files faster than regular hosting.

Now, let’s go step by step to add Bootstrap via CDN.

The first step is to find the header.php file in your WordPress theme. This file is crucial because it contains your website’s <head> section where stylesheets (CSS) and scripts (JS) are loaded.

To find header.php:

Go to WordPress Dashboard → Appearance → Theme File Editor. On the right side, look for header.php under Theme Files. Click to open the file for editing. This file controls how your website loads styles and scripts. Adding Bootstrap ensures it applies to all your site’s pages.

Inside header.php, find the <head> section and add the Bootstrap CDN links right before the <?php wp_head(); ?> line. This ensures that Bootstrap loads before other styles.

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Bootstrap JS Bundle (with Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Ensure you visit Bootstrap’s official website to confirm you use the most updated script and take advantage of the most recent features and improvements.

Then, click Update File to save changes.

Follow these steps to quickly add Bootstrap to WordPress and use its powerful styling and layout features. In the next section, we look at another way to add Bootstrap using the WordPress functions.php file, which is the recommended method for advanced users.

Method 2: Enqueue Bootstrap in WordPress Theme (Best Practice)

If you want to add Bootstrap to WordPress correctly, use the WordPress enqueue system. This method ensures that Bootstrap loads only when required and does not conflict with other themes or plugins.

Instead of adding Bootstrap links directly to header.php, WordPress provides a special file called functions.php where you can enqueue (or load) styles and scripts correctly. This method is more organized and efficient and is recommended for theme development.

IMPORTANT:

Before you edit the functions.php file, ensure you create a website backup. However, if you want to keep the customization even after updating the parent theme, we recommend using a child theme and editing its functions.php file.

Let’s enqueue Bootstrap in WordPress by adding the correct code to functions.php. To do this:

Log in to your WordPress dashboard. Go to Appearance → Theme File Editor. Locate functions.php and click. Scroll to the bottom of functions.php and add the following code:

function add_bootstrap_to_wordpress() {
    // Enqueue Bootstrap CSS
    wp_enqueue_style('bootstrap-css',
     'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');

   // Enqueue Bootstrap JS (with dependency on jQuery)
   wp_enqueue_script('bootstrap-js',
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js',
array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'add_bootstrap_to_wordpress');

Next, click Update File at the bottom.  This will enqueue Bootstrap properly every time your site loads.

Then, we explore how to manually download and add Bootstrap to WordPress for those who want more control over the files. Stay tuned.

Method 3: Manually Download & Add Bootstrap to WordPress

If you prefer control over Bootstrap files, you can download them manually and add them to your WordPress theme. This method is helpful if you want to customize Bootstrap’s styles or scripts without relying on an external CDN.

Here’s how you can do it step by step:

Go to the Bootstrap website and click Download.

Navigate to Compiled CSS and JS and click Download. The file will be downloaded as a ZIP archive.

Next, locate the downloaded ZIP file on your computer. Right-click on it and extract the file.

Inside the extracted folder, you will see subfolders, including:

1. css: Contains Bootstrap styles.
2. js: Contains Bootstrap scripts.

Once you have these Bootstrap files, it’s time to add them to your WordPress theme. Here’s how to do it using the Hosted.com File Manager:

First, login to Hosted.com’s cPanel. Go to Files → File Manager.

Next, navigate to the following directory:

wp-content/themes/your-theme-folder/

Inside your theme folder, create 2 new folders:  assets/css/ and assets/js/.

Now, open the extracted Bootstrap folder on your computer. Copy bootstrap.min.css from the css folder into the following directory:

wp-content/themes/your-theme/assets/css/

After that, copy bootstrap.bundle.min.js from the js folder into:

wp-content/themes/your-theme/assets/js/

TIP: If you’re new to File Manager, refer to the Hosted.com File Manager Guide to learn how to use it efficiently.

Now, you need to enqueue these local Bootstrap files in WordPress. The process is the same as we learned above, in the second method; however, the code will be a little different:

Open functions.php in editor by navigating to Appearance → Theme File Editor and clicking functions.php. Next, add the following code at the end of the functions.php file:

function add_local_bootstrap() {
    // Enqueue Bootstrap CSS
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css');

    // Enqueue Bootstrap JS (with jQuery dependency)
    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'add_local_bootstrap');

After that, click Update File. This informs WordPress to load the local Bootstrap CSS and JS files from your theme folder.

IMPORTANT:

You can also access and edit theme files by connecting to your website using an FTP client (like FileZilla).

Verify if Bootstrap is Working

After adding Bootstrap, you need to check if it is working correctly. You can do this in 2 ways:

1. Using Chrome Browser
2. Adding a Bootstrap Button. 

To verify using Chrome, open your site in the Google Chrome browser. Right-click anywhere on the web page and select Inspect.

Go to Console. If there are no Bootstrap errors, that means it’s loading correctly.

You may also go to Elements and check <head> to confirm the Bootstrap files are linked.

If you wish to test Bootstrap visually, add a button anywhere on your website. To do this:

Open your desired page or post in the editor. Next, add a Custom HTML block where you wish to add a Bootstrap button.

Now, add this code:

<button class="btn btn-primary">Bootstrap Button</button>

Then, preview your page or post. If the button appears blue with rounded corners, Bootstrap is working correctly.

How to Use Bootstrap & WordPress Together

After successfully setting up Bootstrap, you can use it with WordPress to improve your website’s design. Bootstrap provides ready-made buttons, grids, forms, and layouts that make your site look clean and professional. You can easily add these elements to WordPress pages or posts to control layout.

Add Bootstrap Components to WordPress Pages

Bootstrap provides many built-in elements you can add to WordPress without coding. These include buttons, grids (columns), and forms, which help you structure your content. We’ve already discussed how to add a button while verifying Bootstrap, now let’s find out how to add a danger alert:

Open your post or page in the editor. Navigate to the position where you want to add the Bootstrap component. Click + (Add Block) and select Custom HTML.

Paste the following code inside the block to create a danger alert:

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Warning!</strong> Something went wrong. Please try again.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Now save your post or page. If Bootstrap is added correctly, the alert will appear as follows:

Use Bootstrap Grid System

For example, to add a 2-column layout in WordPress, add a Custom HTML block inside your page. Then, write this Bootstrap grid code:

<div class="container">
       <div class="row">
           <div class="col-md-6">
               <h3>Left Column</h3>
               <p>This is the first column.</p>
           </div>
           <div class="col-md-6">
               <h3>Right Column</h3>
               <p>This is the second column.</p>
           </div>
       </div>
</div>

Once you save your page and open it in a new tab, this appears as follows:

IMPORTANT:

The grid system automatically adjusts for mobile screens, so your site looks good on all devices. 

Add a Bootstrap Form

To create a simple contact form using Bootstrap, add this code in a Custom HTML block:

<form>
  <div class="mb-3">
    <label class="form-label">Name</label>
    <input type="text" class="form-control" placeholder="Enter your name">
  </div>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" placeholder="Enter your email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

This form will have a name field, email field, and submit button, all styled with Bootstrap. It appears as follows on the front end:

Follow these steps to create responsive, stylish, and professional WordPress pages without writing lots of CSS. Now, you can explore more Bootstrap features to customize your website further.

FAQS

Other Tutorials of Interest

– How To Migrate A Website From Drupal To WordPress

– How To Migrate A Website From Squarespace To WordPress

– Wix To WordPress: How To Migrate A Website

– How To Migrate A Website From Joomla To WordPress

– How To Clear Cache In WordPress: 5 Quick Methods