Install with bootstrap@4.0.0-alpha.6 yarn on rails 5.1

Question

Install with bootstrap@4.0.0-alpha.6 yarn on rails 5.1

I follow the tutorials for installing Bootstrap with Yarn. This was the command for the new version of Bootstrap 4 on rails 5.1, which look here :

yarn add bootstrap@4.0.0-alpha.6

So, I noticed that bootstrap 4 alpha 6, JQuery3, and Tether were installed. So it has already been added to .gitignore:

/node_modules
/yarn-error.log

And it was already configured in my configuration /initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules')

I need to put on application.js application

//= require rails-ujs
//= require turbolinks
//= require bootstrap/dist/js/bootstrap
//= require_tree .

In my application application.scss

/*
 *= require bootstrap/dist/css/bootstrap
 *= require_tree .
 *= require_self
 */

My question is: do I need to overlay application application.js and application.scss on jQuery and Tether? How?

I try: 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
 */

*= require jquery/dist/jquery, /css, JQuery. , ?

: 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

+4

jquery twitter-bootstrap yarn tether

rld 08 '17 21:20

1

Ziyang Chen · Answer 1 · 2017-06-15T09:45:35+0000

JQuery, , JavaScript, . , Tether, Bootstrap, .

application.js . JQuery Tether, , Bootstrap.

//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery
//= require tether/dist/js/tether
//= require bootstrap/dist/js/bootstrap
//= require_tree .

Install with bootstrap@4.0.0-alpha.6 yarn on rails 5.1

More articles: