How to Add Bootstrap to WordPress Websites?

Since its invention in 2003, WordPress has grown immensely and now it is a famous blogging and Content Management Systems available on the global Internet. It allows developers to create a wide range of websites comparable at low-cost. It is so popular that now it accounts 20% of the web.You can easily create a good and interactive WP website with the help of custom site structures, new post types, maps, e-commerce, SEO and social media websites. You can do almost all things on this useful web platform and it if fully customizable. Unluckily, using the same old themes make several WP websites monotonous. Adding Bootstrap to WordPress site makes it eye-catching, attractive and responsive.

What Exactly is Bootstrap?

It’s a famous front-end framework used by bloggers to create responsive websites. It has HTML and CSS templates for common user interface components such as drop-down, navigation’s, buttons, forms, typography, etc. It is available for download that too free of cost.

Advantages of Adding Bootstrap to your Websites:

A. Easy Documentation:
It offers a marvelous demo and illustrations that make documentation easier for all WP developers.

B. Packed JavaScript Plugins:
It offers some useful JavaScript plugins. If you need functionalities such as slider or tabs etc, simply attach some lines of JS code and its done.

C. Support:
Bootstrap works continuously and offers more than500+ contributors (support communities) to address the issues which take place on WP websites from time- to-time.

D. Compatible with All latest Browsers:
It is compatible with a number of browsers such as Internet Explorer, opera, Google chrome and Firefox. It also supports iOS and Android on various mobile applications.

E. Customizable:
Web designs offered by Bootstrap are fully customizable via bootstrap customize page. As per your liking, select common CSS elements such as tables or buttons, grid system, code, Typography and print media styles.

F. Makes your Website Responsive:
Millions of tech-savvy people use mobile devices to browse websites and their numbers are growing rapidly with each passing day. That is why making a mobile friendly website with the help of bootstrap is a profitable deal.Bootstrap has grid system using which you can find out the spots for each column that occupies.

G. Development Speed:
The key benefit of using Bootstrap is that it is easy to use. It has ready-made blocks of code that allow web developers to create new website easily and quickly.

Methods of Adding Bootstrap to your Websites

1. Add Bootstrap CSS, JS via Functions.php file:

Place “Functions.php file” image here

First of all, browse the official bootstrap website and download the newestBootstrap library (not the source files or SASS but the Compiled and minified CSS, JavaScript, and fonts. ) from there,

Now Upload the Bootstrap.min.css file and Bootstrap-theme.min.css file to your theme folder named “CSS” and upload the Bootstrap.js file to the theme folder named “js” of your WordPress theme and now equate the scripts by making use of the WordPress way. Paste the code provided below your function.php file.

Always Remember:
Before pasting the codes, upload files otherwise it may crash.

2. Add Bootstrap to WordPress through CDN:

You can Add Bootstrap in your WordPress theme through CDN to your header.php file. it means that you will have to include the Bootstrap CSS and JavaScript file in the opening of the tag so that it may run on all pages of your website. The code will include Bootstrap in your WordPress theme from official bootstrap CDN network, but it is possible that it may conflict with some other WordPress plugins. All CSS and SASS files of Bootstrap are minified and compressed and it eliminate any chance of your website becoming slow.

Always Remember:
Take the full backup of your WP theme before you add this code to your header.php so that if something wrong happens, you can replace that easily.

WordPress users must add this code below the tag in your header.php file (header.php file must be located in your Appearance > editor > header.php).

HTML users can also make use of this code. They must add the code just below the of their template or index file. Once you place this code at the right place, it will start working properly on your WP website.

3. Add Bootstrap via WordPress Plugin:

The Bootstrap plugins are integrated with the Bootstrap CSS, LESS & SASS files and they are amassed in shortcodes. By making use of this plugin you can utilize any of these Bootstrap components. Its name is Bootstrap shortcodes for WordPress.

When you install this plugin and activate it, a new button named “Shortcodes” will be shown after the “add media” button of WordPress post editor. You can choose any of the Bootstrap elements from here. Majority of the Bloggers like to use this modus operandi is it works smoothly and there is no coding stuff.


There are certain advantages of using Bootstrap for you WP sites. It can help you a lot when you desperately require a clean, responsive and attractive layout or design for your website. Nevertheless, you need to spend some time and learn how to use it before reaping its benefits.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.