What is the best way to install bootstrap with rails app?

Question

I'm a newbie to rails, so I wanted to ask how to use bootstrap with rails? before learning back-end development I used to simply call it in the head of the html tag of the html file like this:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

So I was wondering what is the right way to do it in rails? Should I do the same and put these calls in the head of the html tag of the application layout view file (except jQuery because it's already implemented)?

Because if it was that simple, then why did people make special gems for bootstrap?

I'm pretty sure there are many points I'm missing or unaware of, so I would appreciate some clarification and guidance.

PS: The rails app already exists, I just wanna use bootstrap to adjust the design..

Answer 1

In Rails 6 using Webpacker and Yarn as the default options, I installed bootstrap without the gem by basically following this nice writeup. Starting with dependency installation:

yarn add bootstrap jquery popper.js

Added the dependency to my app/javascript/packs/application.js:

require("bootstrap")

I changed app/assets/stylesheets/application.css into a .scss. (The writeup instead uses a custom file for that.) I removed all *= require_ lines and added:

@import "bootstrap/scss/bootstrap";

And that was it. Restarting the server allowed me to add a container and a navbar with a dropdown to my layout.

Answer 2

Step 1: Using Yarn:

yarn add [email protected] jquery popper.js

package.json file should look like this

"dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },

Step 2: Head to config/webpack/environment.js file and add these lines

const { environment } = require('@rails/webpacker')

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

Popper: ['popper.js', 'default']

}))

module.exports = environment

Step 3 : Head to app/assets/stylesheets/application.css and add these lines

*= require bootstrap

*= require_tree .

*= require_self

Congratulation! You have successfully installed Bootstrap 4

copied from https://dev.to/somnathpaul/add-bootstrap-4-to-your-ruby-on-rails-6-application-ole