How to integrate Bootstrap with Worpress

I have tried several options of how to integrate Bootsrap with WordPress. According to Bootstrap guidelines, we need Bootstrap’s css to be loaded before all the other css files.

The scripts for Bootstrap’s JavaScript should be loaded before the closing </body> tag.

The source files can be either downloaded on the server, or accessed via CDN links.

If we want to have the possibility to edit Bootstrap styles, then we have to download source Bootstrap files. However, these files (.scss) have to be compiled to .css to be used in WordPress. For this purpose I use the Happy WP SCSS Compiler plugin. So this is the way I have inserted Bootstrap into this WordPress site.

1. Install Bootstrap in WordPress using Bootstrap source files

This is done in the following steps:

1.1 Child theme

First, I have made a child theme, called blocksy-child, the steps were described in this blog post.

1.2 Bootstrap source files

I have donwloaded the Bootstrap source files from here. I have dowloaded ONLY the source files, not Sass compiler, nor Autoprefixer.

My file structure is the following:


1.3 Scss file for Bootstrap

My bootstrap.scss file looks like this – I have included all of Bootstrap.

@import url("");

$primary: #ff6d00; 
$secondary: #cfa9ef;
$danger: #5a189a;
$success: #4D962B;
$warning: orange;
$info: aqua;
$body-bg: #f3f3f0;

@import "../bootstrap/scss/bootstrap";

1.4 Compiling scss to css in WordPress

I have installed the Happy WP SCSS Compiler plugin. The SCSS Folder Path is set to /scss/ and CSS Folder Path is set to /css/. The Auto Enqueue CSS files is set to NO. The source scss file is compiled to css file every time it has changed.

1.5 Including compiled .css file in WordPress

This was the trickiest part for me. I had two major problems:

a) Bootstrap style file should be loaded as FIRST

The tackling of this problem is described later in this article.

b) The newest version of the css file has to be loaded.

For this purpose, I have used the filemtime() php function, as described here.

My functions.php file is this:

//Child theme
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles',1 );
function my_theme_enqueue_styles() {
	$parenthandle = 'blocksy-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
	$theme        = wp_get_theme();
	wp_enqueue_style( $parenthandle,
		get_template_directory_uri() . '/style.css',
		array(),  // If the parent theme code has a dependency, copy it to here.
		$theme->parent()->get( 'Version' )
	wp_enqueue_style( 'child-style',
		array( $parenthandle ),
		$theme->get( 'Version' ) 

function bootstrap_style() {
    wp_register_style('bootstrap5', get_theme_root_uri().'/blocksy-child/css/style.css',  $deps = array(), $ver = filemtime( get_stylesheet_directory().'/css/style.css'), $media = 'all');
    array_unshift(wp_styles()->queue, 'bootstrap5');
add_action( 'wp_enqueue_scripts', 'bootstrap_style');


2. Using CDN links

Here the last method is correct and working.

2.1 Inserting links to Bootstrap files into header.php and footer.php of the current theme – not correct

Inserting links to Bootstrap files into header.php and footer.php of the current theme, as described in this post, works. But is not recommended as each theme update deletes the files. The result is fine, as we expected:

2.2 Using a plugin to insert links to Bootstrap – not perfect

Using Code snippets WP plugin to inserts links to Bootstrap’s css and scripts. This is a problem, since Bootstrap’s css file is not loaded as first, in fact this stylesheet is loaded as the last one. Therefore, the Bootstrap’s Reboot normalization rewrites my own settings. The result is white background of the page and black heading.

2.3 Using a child theme to insert links Bootstrap using only wp_enqueue_style – not perfect

Making of a child theme was described in this blog post. The proper way to insert links to additional css and js files is using e.g. wp_enqueue_style(), wp_enqueue_script() and then adding it to a hook using add_action(). Usualy wp_enqueue_scripts hook is used . Inspiration on wordpress.stackexchange. From the file functions.php:

function my_scripts() {
    wp_enqueue_style('bootstrap4', '');
    wp_enqueue_script( 'boot1','', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot2','', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot3','', array( 'jquery' ),'',true );
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Still, the Bootstrap’s css is not first, so we have the same problem as in 2.

2.4 Inserting links using wp_register_script() and array_unshift() – correct and working

This solution, from is working. Bootsrap’s css is now loaded as the first one.

function bootstrap_style() {
    wp_register_style('bootstrap5', '');
    array_unshift(wp_styles()->queue, 'bootstrap5');
add_action( 'wp_enqueue_scripts', 'bootstrap_style');

To put Bootstrap JS files just before the closing body tag, we use the wp_footer hook (instructions from

function bootstrap_scripts() {
    wp_enqueue_script( 'boot1','', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot2','', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot3','', array( 'jquery' ),'',true );
add_action( 'wp_footer', 'bootstrap_scripts');

Now all works as it should…as you can see on this webpage.