Integrating Bootstrap CSS and JS into our WordPress theme

This tutorial will go over how to integrate the Bootstrap framework into our WordPress theme. We will first download the Bootstrap framework from, copy the files into the correct directories, and then edit the functions.php file to add the Bootstrap files to our WordPress theme. You need to have an active subscription to view […]

You need to have an active subscription to view this content.

Register Here!
  • This is way better than hacking up my

  • Guest

    Hi everybody, can someone help me out with the wp-enqueue function. When I view the page source the files are being called but my pages are not styling.

    wp_enqueue_style( ‘bootstrap-styles’, get_template_directory_uri() . ‘/css/bootstrap.min.css’, array(), ‘3.2.0’, ‘all’ );

    • You need to complete the next tutorials to add the correct markup/classes to the WordPress theme.

  • Andreas Kviby

    My sidebar is stuck on the bottom, what did I miss to get the widget working?

    • You probably missed a closing divs. Be sure to go over your code and make sure it is the same as the tutorial.

      • Andreas Kviby

        Hey, but how can I have missed a DIV, there have been no coding so far in the tutorial and I have only uploaded the template as in the tutorial.

        • Continue the tutorials and when you start adding the grid classes. It will be fixed.

  • Fonai

    Hey it’s rather nice but it would have be nice to show how to integrate jquery as well or .. is it already in ?

    • It’s included if you follow the markup and enqueue the scripts like the tutorial explains.

      • Fonai

        hey, thanks i just did it just after …

  • Dony P

    The video gone …

    • The video is displaying on my end. Can you see the written section of the tutorial? Make sure you are logged in and your account is active.

  • crewneck

    video doesn’t work. Tried loggin and out several times…

    • Seems Vimeo has had some downtime over the weekend. Everything seems to be back up and running just fine. For future reference you can find vimeo status here:

      Please send me a screenshot of what you see if you are still not able to watch the videos.

  • John Christenbury

    I’ve run against an issue where jquery isn’t being loaded and I am getting an error in Web Inspector “Uncaught Error: Bootstrap’s JavaScript requires jQuery”. I thought that Underscores (and WP itself) loaded jquery with no additional code from our side.

    • John Christenbury

      Wait, nevermind. I got to that point in the video. Thanks! problem solved.

  • Hi Brad, The download link is not working! Can you please fix it?

  • Stéphane Najman

    Hi, I don’t understand why I get an error on my console saying that it doesn’t find the “bootstrap.min.js” and “bootstrap.min.css”.

    I did everything like the tutorial and verified many times … all looks ok, but instead of linking the files to:


    it adds a directory /style.css/ like:


    Any idea ? Thanks in advance.

    • Look back over your code. Notice one says get_template_directory_uri() and the other says get_stylesheet_uri(). This makes a difference. Be sure to follow the tutorials and review your code.

      Moving forward please ask your support questions in the forum. Thanks!

      • Stéphane Najman

        Oups, I’m ashamed 😉 Thanks !

  • Jatin Johny

    Correct me if I’m wrong, Isn’t Boostrap JS File require jQuery file first?
    Had it already loaded mysteriously ?

    PS: Got my answer in last 30 seconds.
    But you haven’t specified any version of jQuery.

    • You don’t need to specify a version. WP ships with a set version that works great with Bootstrap.

  • At the end of this video, should I have my front page like this? In the next lesson, your front page looks different than mine.

    • Your theme should look like the one in the video if you are following along. If you have any issues or have support questions, please ask theme in the forum.

  • Todd Burnes

    Im using bootstrap 3.3.5, following all the enqueue steps, and all my code looks the same with only the versions (‘3.3.5’) being different. Once I save the functions.php file and reload my front page, the source is telling me that the bootstrap.min.css is not linking. Is there a new or different step that I should be taking to get this linked up?

    • No, the version of Bootstrap shouldn’t matter. You will enqueue scripts the same way no matter what it is.

      What do you mean “the source is telling me that the bootstrap.min.css in not linking”? Do you mean you don’t see it in the source code? Or maybe you mean, it is there but the path is wrong?

      Either way go back over your code, you probably are just missing a forward slash or have it pointed to the wrong directory.

      If you continue to have problems, please open a topic in the support forum.

  • Admin

    Now time has come to integrate material design within WordPress 🙂

  • kulkarni

    Hi Brad

    I see some people using wp_register_style() and then wp_enqueue_style() what will be the advantage of this?


    • kulkarni

      Ya I just found the answer!

  • Stephen B

    The new WP uses Normalize instead of Reset. Still okay to delete all of that? There’s a bunch more in there than what Reset had. Thanks.

    • Yes, we will be using the resets that Bootstrap provides within its framework out of box.

      • Stephen B

        Looks like they both include normalize.css which is the new Reset.

  • Somiarta

    Hi why I cannot access the video? and if I open it on mozilla appear this message “You have asked Firefox to connect

    securely to, but we can’t confirm that your connection is secure.”

  • Andrew

    For whatever reason, now local host doesn’t show anything… says un local host page isn’t working. ….. what happen?
    I followed your code, line for line. 🙁

    • Are you sure you were doing it right? The way the codex says to do it should work perfectly. It has nothing to do with the underscores theme version. Enqueue scripts is always the same.

      Also you probably want to turn WP_DEBUG to true in your wp-config.php so you can see your PHP errors as you make coding mistakes.

      Please use to the support forum moving forward.

  • Day Dreamer

    Are all your tutorials free?

  • Mike

    My page looks nothing like yours.. It looks like the styles are not applying. When I go to the menu tutorial my menu is just showing up not styled .

    • Are you following the tutorials in order? I go over how to upload sample data. I would recommend starting from the beginning and going step by step. If you continue to have issues please create a topic in the support forum.

      • Mike

        Thank You!!!!!

        • leandro

          Hi Mike, I have your same problem. How did you resolve it please?

          • Mike

            There is a section to upload demo data found in the ‘Installing the starter theme and getting ready for local development’ tutorial!

  • Anne Minford

    Hi Brad, is it ok to use Bootstrap 4 with this series of tutorials?


    • I wouldn’t recommend it. You are going to run into issues. I am currently working on a Bootstrap 4 tutorial series. Until then I would recommend getting familiar with the current tutorials so when the Bootstrap 4 tutorials are released you will have a good understanding of how everything works.