We build easy to manage, secure and Mobile friendly Websites.

How to Enqueue Bootstrap Files into your Theme


bootstrap logo

Bootstrap is the world most popular Front-end framework Website developers for building responsive, mobile friendly sites. Visit the link to learn more [Bootstrap]

In this tutorial, I will be teaching you how to Enqueue WordPress Files into your WordPress Theme using wp_enqueue_scripts() Function.

To Learn More about wp_enqueue_scripts() Function visit [WordPress].

There are ways to in which you can enqueue bootstrap files.

  • Enqueue Bootstrap Files URL
  • Enqueue Bootstrap Files directly from your WordPress Theme Folder

Enqueue Bootstrap Files URL

Open your function.php file located in your theme folderand add the code below

/**
 * Enqueue scripts and styles.
 */
function themeslug_scripts() {

     /* Add Bootsrap styles */
    wp_enqueue_style('bootstrap-styles, 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css', 4.5.3,'all');
	
	/* Add Boostrap Scrips for JQuery, Popper.js and JQuery Slim */
	wp_enqueue_script('bootstrap-jquery-scripts', 'https://code.jquery.com/jquery-3.5.1.slim.min.js', '3.5.1', 'all');
	wp_enqueue_script('bootstrap-popper-scripts', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js', '1.16.1', 'all');
	wp_enqueue_script('bootstrap-scripts', 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js', '4.5.3', 'all');
	
}
add_action( 'wp_enqueue_scripts', 'themeslug_scripts' );

Adding all the Bootstrap JavaScript depend on your project needs. Components that requires JavaScript are listed below

  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Toasts for displaying and dismissing
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates

How To Enqueue Bootstrap files from your theme folder
To be able to use Bootstrap files from your theme folder you will have to first download Bootstrap from [Bootstrap Website]
Create a folder called asset into your theme folder
Copy the downloaded Bootstrap CSS folder and paste it into your Theme folder
Copy the downloaded Bootstrap JS folder and paste it into your Theme folder

You can now enqueue Bootstrap files by specifying the file path in the wp_enqueue_script() function as shown below.

/**
 * Enqueue scripts and styles.
 */
function themeslug_scripts() {
     /* Add Bootsrap styles */
	wp_enqueue_style('bootstrap-style', get_template_directory_uri() . 'assets/css/bootstrap.min.css', array(), '4.5.2', 'all');
	
	/* Add Boostrap Scrips for JQuery, Popper.js and JQuery Slim */
	wp_enqueue_script('bootstrap-scripts', get_template_directory_uri() . 'assets/css/js/bootstrap.min.js', array('jquery'), '4.5.2', 'true');
	
}
add_action( 'wp_enqueue_scripts', 'themeslug_scripts' );

You have now successfully Enqueue Bootstrap Files into your WordPress Theme Project.

Leave a Reply

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