1. CDNを利用する
Railsの機能を利用せず直接読み込む方法です。
BootstrapCDNを参考にリンクを挿入します。
※オリジナルのJavascriptやCSSを読み込む場合は順番に注意しましょう。
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<%= yield %>
</body>
</html>
ただしRailsの機能を無視したやり方は綺麗ではないので、以下の方法をオススメします。
2. gemを利用する
※webpackerを利用している場合は「3.webpackerを利用する」の方法を行ってください。（Rails6から始めた方はデフォルトでwebpackerが導入されているので注意しましょう。）
1. Gemfileを編集します。
Gemfileに以下のコードを加えます。
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
※Rails5以下ではjqueryはデフォルトでインストールされています。
※bootstrap-sassはbootstrap2や3で利用するものです。もし記述されていたら削除します。
2. ターミナルからルートディレクトリでbundle installを実行します。
Bundle complete!と出ればOK！
3. app/assets/stylesheets/application.cssの拡張子を変更します。
app/assets/stylesheets/application.cssの拡張子をscssに変えます。
ターミナルで行うには以下のコマンドを実行します。
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
4. 上記のファイルを編集します。
上記で拡張子を変更したファイルを以下のように編集します。
@import "bootstrap";
以下のコメントは削除します。
*= require_tree .
*= require_self
5. app/assets/javascript/application.jsを編集します。
app/assets/javascript/application.jsを以下のように編集します。
こちらは既存のコードは削除せず追加します。
//= require jquery3
//= require popper
//= require bootstrap-sprockets
3. webpackerを利用する
Rails6ではデフォルトで導入されるようになりました。既に導入されている場合は4から行ってください。また、yarnがインストールされている必要があります。
1. Gemfileを編集します。
Gemfileに以下のコードを追加します。
gem 'webpacker', '~> 4.0'
2. ターミナルからルートディレクトリでbundle installを実行します。
Bundle complete!と出ればOK！
3. ターミナルから以下のコマンドを実行します。
bundle exec rails webpacker:install
4. app/javascript/にフォルダを作成します。
app/javascript/にsrcフォルダを作成します。
ターミナルで行うには以下のコマンドを実行します。
mkdir app/javascript/src
5. 上記フォルダにファイルを作成します。
app/javascript/src/にapplication.scssファイルを作成します。
ターミナルで行うには以下のコマンドを実行します。
touch app/javascript/src/application.scss
6. bootstrapとその仲間を導入します。
ターミナルで以下のコマンドを実行します。
yarn add bootstrap@4.3.1 jquery popper.js
7. app/javascript/packs/application.jsを編集します。
app/javascript/packs/application.jsを以下のように編集します。
import 'bootstrap'
import '../src/application.scss'
8. app/javascript/src/application.scssを編集します。
app/javascript/src/application.scssを以下のように編集します。
@import '~bootstrap/scss/bootstrap';
9. app/views/layouts/application.html.erbを編集します。
上記で編集したファイルを読む込むようにします。
app/views/layouts/application.html.erbを以下のように編集します。
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%#=以下の２つを追加する %>
<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>
</head>
<body>
<%= yield %>
</body>
</html>
なお上記のやり方は「RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう」を参考にさせていただきました。