How to Include and Use Bootstrap in WordPress Now

In this article, I will show you how to include the framework file and use Bootstrap in WordPress. So you can add its classes via the block/site editor and see the results on the front end of your website. It is a code snippet that you can put in your theme. I also explain how to use this framework’s classes in the block/site editor.

Table of Contents

Download Bootstrap and Put It Inside the Theme

You can download compiled CSS and JS files of the latest version of Bootstrap until the present (before downloading, you can check if it is the newest version and download the latest one). After downloading and extracting the file, go to bootstrap-5.2.3 > dist > css folder and copy the bootstrap.css file. This is the complete framework CSS styles file. You need to paste this file into your parent/child theme folder. In my case, I pasted this file in the root folder > assets > css folder.

How to Include Bootstrap in WordPress Theme

Add the codes below to the functions.php file of the theme (if you are a theme developer). Or in your child theme functions.php file, If you are a theme user. If you don’t have a child theme, follow this article: how to create a WordPress child theme from a parent theme.

functions.php file is in your parent/child theme’s root folder. If there is nothing, create one. If you don’t know how to edit a functions.php file, refer to this article: how to edit functions.php on WordPress themes.

Add these codes after the <?php statement. When you did not paste the Bootstrap file in the parent/child theme’s root folder > assets > css, you should edit the paths to it in the below codes respectively. If you create a functions.php file now, don’t forget to add the <?php statement before the below codes.

// Include Bootstrap CSS on editor
function alvand_bootstrap_editor()
{
    add_editor_style('./assets/css/bootstrap.css');
}
add_action('after_setup_theme', 'alvand_bootstrap_editor');

// Include Bootstrap CSS on frontend
function alvand_bootstrap_frontend()
{
    wp_enqueue_style('bootstrap-style', get_stylesheet_directory_uri() . '/assets/css/bootstrap.css');
}
add_action('wp_enqueue_scripts', 'alvand_bootstrap_frontend', 9);

Some Descriptions About the Code Snippet

The above codes include the Bootstrap CSS file in the editor and the front end. The parameter “9” add_action('wp_enqueue_scripts', 'bootstrap_styles', 9) makes framework styles less priority than style.css or user-defined styles via block/site editor. So they override Bootstrap styles on the front end if there is a conflict. We do not want to let the framework override our styles.

How to Use Bootstrap in WordPress Block/Site Editor

After adding the above codes, click on a block in the block editor. Then click the block tab on the right, and go to the Advanced section. There you can add Bootstrap classes via ADDITIONAL CSS CLASS(ES).

They will apply both in the block editor (as you can see above) and frontend of your website (look at the screenshot below):

The steps for using Bootstrap in the site editor are almost the same.

Conclusion

I hope this article helps you with this task and you enjoy its outcomes. If you liked this post, you will like this article too: A Guide to Easy WordPress Theme Customization