How to Add Bootstrap to Your WordPress Theme

Bootstrap is the world’s most well-known web structure for building responsive, mobile-first websites and applications. It is fast, mobile-friendly, and made with high-quality HTML, CSS, and JavaScript. It includes HTML- and CSS-based design templates for Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and other useful website components, as well as optional JavaScript extensions. We all know that WordPress is the most popular website builder. Nearly 75% of the websites are built on WordPress. In this post, I will explain you why is it crucial to add Bootstrap to WordPress. I will also cover some general methods for adding Bootstrap in your WordPress theme.

Bootstrap gives you full hand support to create high-quality responsive web design with fewer efforts.

What is Bootstrap framework?

Bootstrap is a unique, SEO friendly, and responsive framework made with high-quality CSS3, JavaScript, and HTML5. It is a first mobile-friendly front-end framework which is supported by all the web browsers and platforms till now.

The best thing about Bootstrap is that it is a very fast and open source. Frankly speaking, I’ve added Bootstrap on both of the websites of mine and replaced almost all the elements of my theme with Bootstrap. Now my theme is lightweight, super-fast, and SEO friendly.

Bootstrap is 100% FREE to download and use. It is mobile-friendly and open Source framework.

Why should you Add Bootstrap To Your WordPress Theme?

Well, that’s a great question. WordPress was a blogging framework which has now become the most popular website building software on the web. Integrating Bootstrap in the WordPress is very profitable for Blogs. Bootstrap is full of different kinds of elements which are very useful for the detailed analysis of the internet applications.

Bootstrap is becoming more and more popular day-by-day because it is the most powerful among all the frontend languages and it has become one of the major components of web development.

Furthermore, it is the most popular HTML, CSS, and JavaScript like framework for creating responsive & mobile friendly projects on the internet.

Bootstrap is made in such a way, that the sites which have built with it look perfect on every device such as mobile, desktops, laptops and more. It is a lightweight, fast and responsive framework for WordPress too. Now in 2017, it is clear that you should have a mobile-optimised version of your site to rank higher on Google. There are many Bootstrap Responsive Templates which can help you setup your website quickly and easily for all the devices at once.

There are many WordPress websites and themes which are built using Bootstrap framework. Yes, you can use the Bootstrap CSS in your WordPress sites to use the beautiful and active Buttons like this…

adding Bootstrap in your WordPress theme, Use Bootstrap in WordPress

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Jumbotron is used as a focusing content on your website. It can be easily done by adding Bootstrap CSS in your WordPress theme. Jumbotron is a great notifier or header and is configured to easily placed on the homepage.

adding Bootstrap in your WordPress theme, Use Bootstrap in WordPress

Bootstrap consist of the various types of progress bars which can be used for indicating the status or the grades of the work. It is mainly used on Portfolio websites or the professional websites of organisations. Below is the example of toggle animation of Bootstrap.

How to Add Bootstrap to Your WordPress Theme

These simple animation is very light and doesn’t create much cache. Anyways it is a Bootstrap.

How to Add Bootstrap to Your WordPress Theme?

Bootstrap is easy to integrate and use. Let’s start adding this awesome framework to your WordPress theme. Normally there are three particular ways in which you can add Bootstrap to WordPress theme.

METHOD 1 (using Bootstrap via WordPress plugin)

The Bootstrap plugins are integrated with the Bootstrap CSS and less and sass files. They are compiled in the shortcodes. You can use any of the Bootstrap component using this plugin. The name of the Plugin is Bootstrap shortcodes for WordPress. If you know how to use shortcodes, then you can easily use this plugin.

Basically, after the plugin installation and activation, a new button named “Shortcodes” will appear after the “add media” button of WordPress post editor. From there you can quickly select and use any of the Bootstrap elements by just clicking on it once.

Thus, most of the Bloggers prefer to use this method because there is no coding stuff and everything works cool without writing a single line of code.

Another WordPress Bootstrap plugin is BootstrapCDN. This plugin will only include Bootstrap CSS, JS, LESS, SASS and Font Awesome CSS, other files to your WordPress site.There is no shortcode feature available for this plugin.

There is no shortcode feature available for this plugin.

But on the other hand, this plugin is fast and consistent just because the plugin is regularly updated and has more than 500 active installs.

If you would like to implement other shortcode plugins on your WordPress site, please check the link given below.

Read this: Best shortcode plugins for WordPress

METHOD 2 (use Bootstrap in WordPress via CDN)

The next method to add Bootstrap to your WordPress theme is by adding Bootstrap CDN  to your header.php file. Means you’re going to include the Bootstrap CSS and JavaScript files in the opening of the <head> tag so that it will support and run on every page of your site.

You might be thinking how to do this. Don’t worry its pretty easy.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="">

<!-- Latest compiled and minified JavaScript -->
<script src=""></script>

This code will include Bootstrap in your WordPress theme from official Bootstrap CDN network.

It is the easiest way, but it can conflict with some of the other WordPress plugins.

All the CSS and Sass files of Bootstrap are minified and compressed, so there is no chance that your website will become slow.

Please note:

Before adding this code to your header.php, take the full backup of your WordPress theme. So, that if anything goes wrong, you can easily replace it.

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

HTML users can also use this code. Add this code just below the <head> of your template or index file. After placing this code in the right place, it will start working smoothly on your WordPress website.

The codes given above will add  Bootstrap to your site (i.e., WordPress or HTML).

METHOD 3 (adding Bootstrap CSS, JS via Functions.php file)

Another way to add Bootstrap to WordPress is via function.php file of your theme. Firstly, go to the official Bootstrap website and download the latest Bootstrap library (not the source files or SASS but the Compiled and minified CSS, JavaScript, and fonts. ) from there.

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 called “js” of your WordPress theme.

Now all you have to do is just enqueuing the scripts using the WordPress way.  Paste the code given below to your function.php file. (Note: first upload the files then paste the codes otherwise there is a chance of crash)

function reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
add_action('wp_enqueue_scripts', 'reg_scripts');

You can also enqueue these styles and scripts in your WordPress theme’s functions.php file without actually uploading the files and scripts.

Here is the code. Get it 🙂

function my_scripts_enqueue() {
    wp_register_script( 'bootstrap-js', '://', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', '://', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

It is the best way to include Bootstrap CSS via Functions.php because it doesn’t create issues in above the fold optimisation of your WordPress blog.

These are some natural methods to use Bootstrap in WordPress.

You may also like: How to Eliminate render-blocking JavaScript in above-the-fold content?

Bootstrap is an awesome framework and which is useful for multipurpose creations. It is easy to use and flexible. Bootstrap is supported by all the browsers like safari, chrome, firefox, IE, etc.

Bootstrap looks amazing on mobiles and tablets too because it is a clean and flat designed layout for the better responsiveness and fast loading of web pages. That’s it, you have successfully created a WordPress-based fully Bootstrapped site.

If you liked this post, don’t forget to share it with your friends on Facebook and Twitter because if you share, it’ll not only help us but more like you.


  1. I’ve been surfing online more than three hours today, yet I never found any interesting article
    like yours. It’s pretty worth enough for me. Personally, if all website owners
    and bloggers made good content as you did, the internet will be much more
    useful than ever before.

  2. Really great article! Thanks so much for posting this. I have a question. I want to implement Bootstrap to Genesis child theme. Can I still use my custom CSS and the child theme’s style.css file or would that be over written? Do you know if Bootstrap-fied child theme would be compatible with plugins such as Genesis Extender? Thanks!

    • Yup. You are free to use any of these methods in order to make your WordPress theme support Bootstrap elements. Bootstrap works smoothly without conflicting with other WordPress plugins. Thank you for visiting.


  3. Thank you prakhar for sharing such a great post really I Learning something more from 3nions daily. I like the manner in which you shared 3 methods to add Boostrap in WP theme. Now I have nothing to clear my doubts about Boostrap as you explained it briefly. Thanks again.

  4. Persons, precisely what you know about %BT%??? It is options reports article activity to
    I`m fully frustrated…. Because I have no clue alternatives ti
    write…. Services?

  5. Teacher in college has been talking in all day every day concerning %BT%.
    He / she didn’t stay away from the following day the particular.

    Will often smb supply everybody with an increase of personal computer?

  6. Excellent beat ! I would like to apprentice at the same time
    as you amend your web site, how could i subscribe for a weblog web site?

    The account aided me a appropriate deal. I have been a little bit familiar of this your broadcast provided brilliant clear concept

  7. Hi Prakhar, thank you very much for detailing how to install Bootstrap with WordPress, it was very useful! Unfortunately, I just downloaded Bootstrap V4 beta and the files are different from the ones in your example. Could you please update this post and explain which files to include in the functions.php? They added Reboot and other files that weren’t there before and I’m quiet lost now… Thanks again for your help! 🙂

    • Hi, James.

      The files are nearly same as they’ve didn’t changed the name. Just upload the V4 files in your theme root and make a call using function.php method.

      function reg_scripts() {
      wp_enqueue_style( ‘bootstrapstyle’, get_template_directory_uri() . ‘/css/bootstrap.min.css’ );
      wp_enqueue_script( ‘bootstrap-script’, get_template_directory_uri() . ‘/js/bootstrap.min.js’, array(), true );

      You can also include the files under section using Bootstrap V4 CDN.

      Let me know if you need more help.
      Thanks for reading 🙂

  8. Howdy I am so happy I found your site, I really found you
    by error, while I was browsing on Digg for something else, Anyways
    I am here now and would just like to say many thanks for a tremendous post and
    a all round exciting blog (I also love the theme/design),
    I don’t have time to read through it all at the
    moment but I have bookmarked it and also
    added your RSS feeds, so when I have time I will be back to read more, Please do keep up
    the fantastic work.


Please enter your comment!
Please enter your name here