I'm following this tutorials for install Bootstrap with Yarn this was the command for the new version of Bootstrap 4 on rails 5.1 who watch here:
yarn add bootstrap@4.0.0-alpha.6
So I notice it was installed the bootstrap 4 alpha 6, JQuery3 and Tether. So it was already added on .gitignore the:
/node_modules
/yarn-error.log
And was already Set up in my config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')
I need to put on my application.js
//= require rails-ujs
//= require turbolinks
//= require bootstrap/dist/js/bootstrap
//= require_tree .
In my application.scss
/*
*= require bootstrap/dist/css/bootstrap
*= require_tree .
*= require_self
*/
My ask is it's necessary to put on application.js and application.scss the JQuery and Tether for work? How?
Im' trying this: application.js
//= require rails-ujs
//= require turbolinks
//= require bootstrap/dist/js/bootstrap
//= require jquery/dist/jquery
//= require tether/dist/js/tether
//= require_tree .
application.scss
/*
*= require bootstrap/dist/css/bootstrap
*= require tether/dist/css/tether
*= require_tree .
*= require_self
*/
I don't put *= require jquery/dist/jquery because don't have this folder distilled/css like the others for JQuery.
It's that the configuration for install with Yarn?
here is my: tree node_modules
node_modules
├── bootstrap
│ ├── CHANGELOG.md
│ ├── Gruntfile.js
│ ├── LICENSE
│ ├── README.md
│ ├── dist
│ │ ├── css
│ │ │ ├── bootstrap-grid.css
│ │ │ ├── bootstrap-grid.css.map
│ │ │ ├── bootstrap-grid.min.css
│ │ │ ├── bootstrap-grid.min.css.map
│ │ │ ├── bootstrap-reboot.css
│ │ │ ├── bootstrap-reboot.css.map
│ │ │ ├── bootstrap-reboot.min.css
│ │ │ ├── bootstrap-reboot.min.css.map
│ │ │ ├── bootstrap.css
│ │ │ ├── bootstrap.css.map
│ │ │ ├── bootstrap.min.css
│ │ │ └── bootstrap.min.css.map
│ │ └── js
│ │ ├── bootstrap.js
│ │ └── bootstrap.min.js
│ ├── grunt
│ │ ├── change-version.js
│ │ ├── configBridge.json
│ │ ├── gcp-key.json.enc
│ │ ├── npm-shrinkwrap.json
│ │ ├── postcss.js
│ │ ├── sauce_browsers.yml
│ │ └── upload-preview.sh
│ ├── js
│ │ ├── dist
│ │ │ ├── alert.js
│ │ │ ├── button.js
│ │ │ ├── carousel.js
│ │ │ ├── collapse.js
│ │ │ ├── dropdown.js
│ │ │ ├── modal.js
│ │ │ ├── popover.js
│ │ │ ├── scrollspy.js
│ │ │ ├── tab.js
│ │ │ ├── tooltip.js
│ │ │ └── util.js
│ │ ├── src
│ │ │ ├── alert.js
│ │ │ ├── button.js
│ │ │ ├── carousel.js
│ │ │ ├── collapse.js
│ │ │ ├── dropdown.js
│ │ │ ├── modal.js
│ │ │ ├── popover.js
│ │ │ ├── scrollspy.js
│ │ │ ├── tab.js
│ │ │ ├── tooltip.js
│ │ │ └── util.js
│ │ └── tests
│ │ ├── README.md
│ │ ├── unit
│ │ │ ├── alert.js
│ │ │ ├── button.js
│ │ │ ├── carousel.js
│ │ │ ├── collapse.js
│ │ │ ├── dropdown.js
│ │ │ ├── modal.js
│ │ │ ├── phantom.js
│ │ │ ├── popover.js
│ │ │ ├── scrollspy.js
│ │ │ ├── tab.js
│ │ │ └── tooltip.js
│ │ └── vendor
│ │ └── qunit.js
│ ├── package.json
│ └── scss
│ ├── _alert.scss
│ ├── _badge.scss
│ ├── _breadcrumb.scss
│ ├── _button-group.scss
│ ├── _buttons.scss
│ ├── _card.scss
│ ├── _carousel.scss
│ ├── _close.scss
│ ├── _code.scss
│ ├── _custom-forms.scss
│ ├── _custom.scss
│ ├── _dropdown.scss
│ ├── _forms.scss
│ ├── _grid.scss
│ ├── _images.scss
│ ├── _input-group.scss
│ ├── _jumbotron.scss
│ ├── _list-group.scss
│ ├── _media.scss
│ ├── _mixins.scss
│ ├── _modal.scss
│ ├── _nav.scss
│ ├── _navbar.scss
│ ├── _normalize.scss
│ ├── _pagination.scss
│ ├── _popover.scss
│ ├── _print.scss
│ ├── _progress.scss
│ ├── _reboot.scss
│ ├── _responsive-embed.scss
│ ├── _tables.scss
│ ├── _tooltip.scss
│ ├── _transitions.scss
│ ├── _type.scss
│ ├── _utilities.scss
│ ├── _variables.scss
│ ├── bootstrap-grid.scss
│ ├── bootstrap-reboot.scss
│ ├── bootstrap.scss
│ ├── mixins
│ │ ├── _alert.scss
│ │ ├── _background-variant.scss
│ │ ├── _badge.scss
│ │ ├── _border-radius.scss
│ │ ├── _breakpoints.scss
│ │ ├── _buttons.scss
│ │ ├── _cards.scss
│ │ ├── _clearfix.scss
│ │ ├── _float.scss
│ │ ├── _forms.scss
│ │ ├── _gradients.scss
│ │ ├── _grid-framework.scss
│ │ ├── _grid.scss
│ │ ├── _hover.scss
│ │ ├── _image.scss
│ │ ├── _list-group.scss
│ │ ├── _lists.scss
│ │ ├── _nav-divider.scss
│ │ ├── _navbar-align.scss
│ │ ├── _pagination.scss
│ │ ├── _reset-text.scss
│ │ ├── _resize.scss
│ │ ├── _screen-reader.scss
│ │ ├── _size.scss
│ │ ├── _table-row.scss
│ │ ├── _text-emphasis.scss
│ │ ├── _text-hide.scss
│ │ ├── _text-truncate.scss
│ │ ├── _transforms.scss
│ │ └── _visibility.scss
│ └── utilities
│ ├── _align.scss
│ ├── _background.scss
│ ├── _borders.scss
│ ├── _clearfix.scss
│ ├── _display.scss
│ ├── _flex.scss
│ ├── _float.scss
│ ├── _position.scss
│ ├── _screenreaders.scss
│ ├── _sizing.scss
│ ├── _spacing.scss
│ ├── _text.scss
│ └── _visibility.scss
├── jquery
│ ├── AUTHORS.txt
│ ├── LICENSE.txt
│ ├── README.md
│ ├── bower.json
│ ├── dist
│ │ ├── core.js
│ │ ├── jquery.js
│ │ ├── jquery.min.js
│ │ ├── jquery.min.map
│ │ ├── jquery.slim.js
│ │ ├── jquery.slim.min.js
│ │ └── jquery.slim.min.map
│ ├── external
│ │ └── sizzle
│ │ ├── LICENSE.txt
│ │ └── dist
│ │ ├── sizzle.js
│ │ ├── sizzle.min.js
│ │ └── sizzle.min.map
│ ├── package.json
│ └── src
│ ├── ajax
│ │ ├── jsonp.js
│ │ ├── load.js
│ │ ├── parseXML.js
│ │ ├── script.js
│ │ ├── var
│ │ │ ├── location.js
│ │ │ ├── nonce.js
│ │ │ └── rquery.js
│ │ └── xhr.js
│ ├── ajax.js
│ ├── attributes
│ │ ├── attr.js
│ │ ├── classes.js
│ │ ├── prop.js
│ │ ├── support.js
│ │ └── val.js
│ ├── attributes.js
│ ├── callbacks.js
│ ├── core
│ │ ├── DOMEval.js
│ │ ├── access.js
│ │ ├── init.js
│ │ ├── nodeName.js
│ │ ├── parseHTML.js
│ │ ├── ready-no-deferred.js
│ │ ├── ready.js
│ │ ├── readyException.js
│ │ ├── stripAndCollapse.js
│ │ ├── support.js
│ │ └── var
│ │ └── rsingleTag.js
│ ├── core.js
│ ├── css
│ │ ├── addGetHookIf.js
│ │ ├── adjustCSS.js
│ │ ├── curCSS.js
│ │ ├── hiddenVisibleSelectors.js
│ │ ├── showHide.js
│ │ ├── support.js
│ │ └── var
│ │ ├── cssExpand.js
│ │ ├── getStyles.js
│ │ ├── isHiddenWithinTree.js
│ │ ├── rmargin.js
│ │ ├── rnumnonpx.js
│ │ └── swap.js
│ ├── css.js
│ ├── data
│ │ ├── Data.js
│ │ └── var
│ │ ├── acceptData.js
│ │ ├── dataPriv.js
│ │ └── dataUser.js
│ ├── data.js
│ ├── deferred
│ │ └── exceptionHook.js
│ ├── deferred.js
│ ├── deprecated.js
│ ├── dimensions.js
│ ├── effects
│ │ ├── Tween.js
│ │ └── animatedSelector.js
│ ├── effects.js
│ ├── event
│ │ ├── ajax.js
│ │ ├── alias.js
│ │ ├── focusin.js
│ │ ├── support.js
│ │ └── trigger.js
│ ├── event.js
│ ├── exports
│ │ ├── amd.js
│ │ └── global.js
│ ├── jquery.js
│ ├── manipulation
│ │ ├── _evalUrl.js
│ │ ├── buildFragment.js
│ │ ├── getAll.js
│ │ ├── setGlobalEval.js
│ │ ├── support.js
│ │ ├── var
│ │ │ ├── rcheckableType.js
│ │ │ ├── rscriptType.js
│ │ │ └── rtagName.js
│ │ └── wrapMap.js
│ ├── manipulation.js
│ ├── offset.js
│ ├── queue
│ │ └── delay.js
│ ├── queue.js
│ ├── selector-native.js
│ ├── selector-sizzle.js
│ ├── selector.js
│ ├── serialize.js
│ ├── traversing
│ │ ├── findFilter.js
│ │ └── var
│ │ ├── dir.js
│ │ ├── rneedsContext.js
│ │ └── siblings.js
│ ├── traversing.js
│ ├── var
│ │ ├── ObjectFunctionString.js
│ │ ├── arr.js
│ │ ├── class2type.js
│ │ ├── concat.js
│ │ ├── document.js
│ │ ├── documentElement.js
│ │ ├── fnToString.js
│ │ ├── getProto.js
│ │ ├── hasOwn.js
│ │ ├── indexOf.js
│ │ ├── pnum.js
│ │ ├── push.js
│ │ ├── rcssNum.js
│ │ ├── rnothtmlwhite.js
│ │ ├── slice.js
│ │ ├── support.js
│ │ └── toString.js
│ └── wrap.js
└── tether
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── component.json
├── dist
│ ├── css
│ │ ├── tether-theme-arrows-dark.css
│ │ ├── tether-theme-arrows-dark.min.css
│ │ ├── tether-theme-arrows.css
│ │ ├── tether-theme-arrows.min.css
│ │ ├── tether-theme-basic.css
│ │ ├── tether-theme-basic.min.css
│ │ ├── tether.css
│ │ └── tether.min.css
│ └── js
│ ├── tether.js
│ └── tether.min.js
├── docs
│ ├── 1-Overview
│ │ ├── 1-why_you_should_use_tether.md
│ │ ├── 2-repositioning.md
│ │ └── 3-why_we_dont_support_IE_8.md
│ ├── 2-Examples
│ │ ├── 1-list_of_examples.md
│ │ └── 2-projects_using_tether.md
│ ├── 3-Advanced
│ │ ├── 1-embedding_tether.md
│ │ └── 2-extending_tether.md
│ ├── coffee
│ │ └── intro.coffee
│ ├── css
│ │ └── intro.css
│ ├── intro.md
│ ├── js
│ │ ├── intro.js
│ │ └── markAttachment.js
│ ├── sass
│ │ └── intro.sass
│ └── welcome
│ ├── browser-demo.html
│ ├── coffee
│ │ └── welcome.coffee
│ ├── css
│ │ ├── browser-demo.css
│ │ ├── prism.css
│ │ └── welcome.css
│ ├── index.html
│ ├── js
│ │ ├── drop.js
│ │ ├── jquery.js
│ │ ├── log.js
│ │ ├── tether-v0.1.3.js
│ │ └── welcome.js
│ └── sass
│ ├── _inline-block.sass
│ ├── browser-demo.sass
│ └── welcome.sass
├── examples
│ ├── chosen
│ │ ├── chosen-sprite.png
│ │ ├── chosen-sprite@2x.png
│ │ ├── chosen.css
│ │ ├── chosen.js
│ │ └── index.html
│ ├── common
│ │ └── css
│ │ └── style.css
│ ├── content-visible
│ │ └── index.html
│ ├── dolls
│ │ ├── dolls.css
│ │ ├── dolls.js
│ │ └── index.html
│ ├── element-scroll
│ │ └── index.html
│ ├── enable-disable
│ │ └── index.html
│ ├── facebook
│ │ ├── facebook.css
│ │ └── index.html
│ ├── out-of-bounds
│ │ └── index.html
│ ├── pin
│ │ └── index.html
│ ├── resources
│ │ ├── css
│ │ │ └── base.css
│ │ └── js
│ │ ├── jquery.js
│ │ └── log.js
│ ├── scroll
│ │ └── index.html
│ ├── simple
│ │ └── index.html
│ ├── testbed
│ │ └── index.html
│ ├── tooltip
│ │ └── index.html
│ └── viewport
│ ├── colors.css
│ └── index.html
├── gulpfile.js
├── package.json
└── src
├── css
│ ├── helpers
│ │ ├── _tether-theme-arrows.sass
│ │ ├── _tether-theme-basic.sass
│ │ └── _tether.sass
│ ├── mixins
│ │ ├── _inline-block.sass
│ │ └── _pie-clearfix.sass
│ ├── tether-theme-arrows-dark.sass
│ ├── tether-theme-arrows.sass
│ ├── tether-theme-basic.sass
│ └── tether.sass
└── js
├── abutment.js
├── constraint.js
├── markAttachment.js
├── shift.js
├── tether.js
└── utils.js
80 directories, 346 files
You will need Jquery in order for Bootstrap's javascript related features to function properly. I believe you only need Tether if you are using Bootstrap components like tooltips.
The order in application.js matters. Jquery, and Tether if you need it, needs to be loaded in before Bootstrap.
//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery
//= require tether/dist/js/tether
//= require bootstrap/dist/js/bootstrap
//= require_tree .