Bootstrap x Wordpress

Add Bootstrap to Your WordPress Website with a Plugin

There are a few ways to install Bootstrap 4 to your WordPress website for free. One of the popular choices is to activate a Bootstrap 4 pre-installed theme, but this can be little complicated or not efficient as you might want to use a woocommerce compatible theme or some themes of your favorite.

I recommend to use the “Simple Custom CSS and JS” plugin by Silkypress.com and add 3 lines to your html. By doing this, you have a freedom to choose any theme of your favorite and enjoy Bootstrap for free.

Let me show you how to add in steps.

  1. Go to the admin page of your WordPress website http://YOUR-DOMAIN.com/wp-admin
  2. Go to “Plugins” -> “Add New” -> search for “Simple Custom CSS and JS” plugin. Install the plugin and make it active.
  3. (You will see “Custom CSS & JS” on the sidebar), go to the plugin menu called Custom CSS & JS -> “Add Custom HTML”
  4. Name it as “Header”, check the radio buttons on Header and In Frontend.
  5. Add below CSS line into the code field and publish.
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  6. Create another “Add Custom HTML” and name it “Footer”. Check the radio buttons on Footer and In Frontend
  7. Add below JS lines into the code field and publish.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Now you are ready with Bootstrap 4 on your WordPress website. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *