How to add Bootstrap to WordPress Themes

I created child theme using tweentyseventeen, you can follow the steps here. Once I created child theme, I found that I need to create some layouts and to create it, I would have have to write some CSS from scratch.

But when you have amazing tools like bootstrap, why do we need to write css from scratch.

But how to add bootstrap to WordPress theme ?

You can simple add css and js files in head and footer files but that’s not the proper way. You can add bootstrap to your theme by adding following code to functions.php file of your child theme

function my_scripts_enqueue() {

wp_register_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'), NULL, true );
wp_register_script( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css', false, NULL, 'all' );

wp_enqueue_script( 'popper-js' );
wp_enqueue_script( 'bootstrap-js' );

wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Once done you can see bootstrap in your webpage’s source code. You can start using bootstrap class in your template files.