Twitter Bootstrap

[pgosk]

How to implement Twitter Bootstrap in this theme? By using webpack? How to make it included in theme styles and how to correctly add bootstrap js files?

I do bower install bootstrap-sass and what next?

[torrfura]

I installed bootstrap 4 via bower, then shimmed it in gulp/config/styles.js:

module.exports = {
  options: {
    sass: {
      style: 'nested',
      includePaths: ['./bower_components/bootstrap/scss'],
      errLogToConsole: true
    }
  }
};

and I'm using it as usual in my .scss files:

@import "grid";

I'm not using any of the bootstrap .js files, but I guess it should be no different than this.

[pgosk]

Thanks, its working for me. Now I will try to implement js files.

[torrfura]

Please post your solution here, for other users and if I ever need to use the .js files :) Should be fairly easy though! And before you go on too long, try running gulp build after you've added the .js, so you know everything is compatible.

[pgosk]

Sure! I resolve my problem, but I can't say 'this is what you should do'.

First, like in documentation, add jQuery to gulp/config/scripts.js

var webpack = require('webpack'); module.exports = { options: { webpack: { defaults: { plugins: [ new webpack.ProvidePlugin({ '$': 'jquery', 'jQuery': 'jquery', 'window.jQuery': 'jquery' }) ] } } } };

Then in assets/js/main.js add import '../../bower_components/bootstrap/dist/js/bootstrap.js'; for Bootstrap4 or import '../../bower_components/bootstrap-sass/assets/javascripts/bootstrap.js'; for Bootstrap3.

Bootstrap4 require Tether.js for tooltips. For me, easiest way is add some code in function.php. In theme_script() function replace line with main.js by this two lines:

wp_enqueue_script( 'tether', "//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js", array(), null, true ); wp_enqueue_script( 'main', "$theme_dir/assets/js/main.js", array('tether'), null, true );

And currently thats all. Next days I will try to find another solution.