GrantSmithDoddle/Install Bootstrap.md

## Install Bootstrap.md

      
    Raw
  

              Install Bootstrap.md
            
          
    #Install Bootstrap

CD into directory
Install Bootstrap / Jquery / Popper

cd directoryname

npm i bootstrap jquery popper.js --save
##Organise files
Directory/  
├── node_modules/  
    ├── bootstrap/  
    ├── jquery/  
    ├── popper.js/  
├── package-lock.json  

On install the files are not as I would like them, and hence a little reorganising needs to take place. The aim is to reduce the amount of http requests.
Directory/  
├── assets/  
    ├── css/  
        ├── bootstrap/  
        ├── custom/
            ├── _all.sass
            ├── _variables.sass
        ├── main.sass  
    ├── js/  
        ├── jquery/  
        ├── popper.js/  
        ├── app.js  

The above takes the base files and imports them into one Sass file for CSS and one JS file for JQuery and Popper. Plus any other JS can be inserted in app.js.
###main.sass
@charset "utf-8"

@import "custom/all"
@import "bootstrap/scss/bootstrap"

This imports all the custom sass and overides before importing the root bootstrap into our newly created main.sass file.
IMPORTANT
The order in which these files are imported is very important, override variables must come before root bootstrap. I found out the hard way.
###app.js
// @codekit-prepend 'jquery/dist/jquery.js'
// @codekit-prepend 'popper.js/dist/umd/popper.js'
// @codekit-prepend '../css/bootstrap/dist/js/bootstrap.js'

$(document).ready(function(){

// Ready for action!

});

IMPORTANT: The order of the js is important. Jquery, Popper and then Bootstrap
As with our sass file, our app.js file imports the required js for bootstrap to work. note, this is built with codekit and uses the @codekit-prepend to import files.
###index.html
Now we bring it all togther in out index.html file.
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <link rel="stylesheet" href="assets/css/main-min.css">
  </head>
  <body>

    <script src="assets/js/app-min.js"></script>
  </body>
</html>

##Final thoughts
Using this method means you do not need to import the entire Boostrap library, instead of:
@import "bootstrap/scss/bootstrap"

in our main.sass file, we could simply have:
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

Read more about Bootstrap theming here.