Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the astra domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/sqrtyhjzaqx471/public_html/wp-includes/functions.php on line 6121
How to add Bootstrap in WordPress theme?

Home Forums WordPress How to add Bootstrap in WordPress theme?

Viewing 0 reply threads
  • Author
    Posts
    • #152
      softechquery
      Keymaster

      When we download the WordPress for our website then by default it has some themes. Which is not have any bootstrap files.
      so if we want to add bootstrap in WordPress theme then it has 3 way to add the bootstrap file in our WordPress theme-
      1. Adding Bootstrap through Function.php file
      2. Link to Bootstrap CDN

      Method 1:- Adding Bootstrap through Function.php file
      STEP 1:- Before we get started, there are a few things we need to do-

      Install WordPress
      Download and Unzip Bootstrap
      Step 2:- Once you have these things ready, open the directory with all your WordPress files and navigate to

      wp-content\themes\twentyseventeen\

      Step 3:- Once you navigate to that folder Inside of that folder paste the bootstrap folder which we unzip before.

      Step 4:- Now open your ” Function.php ” file and copy below code after the ” register_sidebar ” function.

      /…………………………..Copy From Here………………………………………………………./

      function theme_styles() 
      {
          wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );
          wp_enqueue_style( 'bootstrap_responsive_css', get_template_directory_uri() . '/css/bootstrap-responsive.css' );
      }
      add_action( 'wp_enqueue_scripts', 'theme_styles');
      
      function theme_js() 
      {
          global $wp_scripts;
          wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
      }
      add_action( 'wp_enqueue_scripts', 'theme_js');

      /…………………………..Copy To Here………………………………………………………./

      Note:- you can paste this code anywhere in ” function.php ” file but i paste it under the ” register_sidebar ” function.
      Now your code look like it

      
       'before_title'  => '',
          'after_title'   => '',
      ) );
      }
      add_action( 'widgets_init', 'twentyseventeen_widgets_init' );
      
      function theme_styles() 
      {
          wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css' );
          wp_enqueue_style( 'bootstrap_responsive_css', get_template_directory_uri() . '/css/bootstrap-responsive.css' );
      }
      add_action( 'wp_enqueue_scripts', 'theme_styles');
      
      function theme_js() 
      {
          global $wp_scripts;
          wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
      }
      add_action( 'wp_enqueue_scripts', 'theme_js');
      
      /*................................Copy To Here................................................................*/
      
      /**
       * Replaces "[...]" (appended to automatically generated excerpts) with ... and
       * a 'Continue reading' link.

      Step 5:- Now save the “Function.php” file. That’s it now your wordpress theme is fully responsive

      Method 2:-Link to Bootstrap CDN
      STEP 1:- open your ” Function.php ” file and copy below code after the ” register_sidebar ” function.

      /…………………………..Copy From Here………………………………………………………./

      function theme_styles() 
      {
          wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
      }
      add_action( 'wp_enqueue_scripts', 'theme_styles');
      
      function theme_js() 
      {
          global $wp_scripts;
          wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
      }
      add_action( 'wp_enqueue_scripts', 'theme_js');

      …………………………..Copy To Here………………………………………………………./

      Note:- you can paste this code anywhere in ” function.php ” file but i paste it under the ” register_sidebar ” function.
      Now your code look like it

      
            'before_title'  => '',
              'after_title'   => '',
          ) );
      }
      add_action( 'widgets_init', 'twentyseventeen_widgets_init' );
      
      /*................................Copy From Here................................................................*/
      
      function theme_styles() 
      {
          wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
      }
      add_action( 'wp_enqueue_scripts', 'theme_styles');
      
      function theme_js() 
      {
          global $wp_scripts;
          wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
      }
      add_action( 'wp_enqueue_scripts', 'theme_js');
      
      /*................................Copy To Here................................................................*/
      
      /**
       * Replaces "[...]" (appended to automatically generated excerpts) with ... and
       * a 'Continue reading' link.

      Step 2:- Now save the “Function.php” file. That’s it now your wordpress theme is fully responsive

Viewing 0 reply threads
  • You must be logged in to reply to this topic.
Scroll to Top