How to Add Bootstrap to WordPress Themes

Bootstrap is currently the most popular framework for building websites templates. Bootstrap provides the easy options to integrate the HTML, CSS, and JS to any website without creating any conflict. This framework is a blessing to the front end developers since you can create complex and eye catching designs without much hard work. Most developers use Bootstrap due to its ability to create responsive and mobile first designs. The ready-made jQuery components and CSS designs can be really handy in tough times for website designers. Despite having tons of advantages, Bootstrap is still one of the most under-used things in WordPress. Learning to use and add Bootstrap in WordPress can save tons of time and space. Bootstrap features can work as the replacement for many highly used WordPress Plugins. So let’s learn how to add Bootstrap to WordPress Themes.

Add Bootstrap to WordPress

How to Add Bootstrap to WordPress Themes

The bootstrap package is mainly composed of two main files JavaScript and CSS files. In order to get access to Bootstrap features, you have to integrate these files with your theme. Bootstrap files can be integrated into the website in mainly two ways. The first way is to use the Bootstrap CDN links. The second way requires you to download the Bootstrap files; copy the required files into your theme and finally enqueue them. If you are not sure how to load normal CSS and JS file in WordPress theme then we recommend you to first check our article on “How to Add Scripts and Styles in WordPress?

First Way: Using CDN Links

In this option, you can add Bootstrap to WordPress using the CDN links of the Bootstrap JS and CSS files. You must have already connected your stylesheet and javascript files. In those places simply add the links to Bootstrap files as shown in the example below. You have to load the bootstrap files before loading your theme files. You can check for the latest links from the official Bootstrap page.

function theme_styles() {
	wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() {		
	wp_enqueue_script( 'jQuery_js', 'https://code.jquery.com/jquery-3.2.1.slim.min.js');
        wp_enqueue_script( 'pooper_js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js');
        wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js');
}
add_action( 'wp_enqueue_scripts', 'theme_js');

Bootstrap Javascript is completely depended on the JQuery library. So it is compulsory to include JQuery links before loading the bootstrap.js file. Similarly, if you will be using poppers on your theme using Bootstrap then you may have to include Popper.js links too.

The Second way: Upload Bootstrap Files to WordPress Theme Folder

The second way to add Bootstrap to WordPress requires you to download the Bootstrap files from the official website of Bootstrap. Extract the downloaded bootstrap zip folder. Among the Bootstrap files, open the CSS folder and copy the main CSS file with names like Bootstrap.css or Bootstrap.min.css. Now paste the CSS file to your Theme’s CSS folder. Similarly, go to Bootstrap’s JS folder and copy the JS file with names like Bootstrap.js or bootstrap.min.js. Again paste those Bootstrap JS file to your theme’s  JS folder.

Also Read:   Create Contact Page with Fast Secure Contact Form in WordPress

bootstrap folder - Add Bootstrap to WordPress

As we had done earlier, we have to enqueue the files to make those files available in your theme. This time we link the files internally instead of using CDN links. Here is how you do it.

function theme_styles() {
	wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() {
	wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
}
add_action( 'wp_enqueue_scripts', 'theme_js');

If your path is correct now then your theme should be able to access the Bootstrap features. Please note that jQuery file is not loaded in this example. If you have not loaded jQuery file previously in your theme then you will need to load jQuery file before bootstrap javascript file. You can download the latest version of jQuery from the official JQuery website.

Conclusion:

Once you have known how to add Bootstrap to WordPress, the next step is to be able to use it. Bootstrap has excellent documentation showing how to implement Bootstrap in the most effective way. We hope our article help you to get started with WordPress. Thanks for reading this article on, “How to add Bootstrap to WordPress”.

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post