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.
- Go to the admin page of your WordPress website
http://YOUR-DOMAIN.com/wp-admin
- Go to “Plugins” -> “Add New” -> search for “Simple Custom CSS and JS” plugin. Install the plugin and make it active.
- (You will see “Custom CSS & JS” on the sidebar), go to the plugin menu called Custom CSS & JS -> “Add Custom HTML”
- Name it as “Header”, check the radio buttons on
Header
andIn Frontend
. - 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">
- Create another “Add Custom HTML” and name it “Footer”. Check the radio buttons on
Footer
andIn Frontend
- 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!