【Rails】Bootstrapの導入の仕方

はじめに

この記事ではrailsにBootstrapの導入の仕方を説明します。bootstrapを使うためにはjQueryを入れる必要があるのでまだjQueryを入れていない人ははじめに以下の記事からjqueryを導入してください

Bootstrapの導入

まず初めに使うgemを記入します

Gemfile

gem 'bootstrap'

と同時にbundle installを行います

ターミナル

$ bundle install

次にapplication.cssファイルをapplication.scssに変更してください

app/assets/stylesheets/application.css

application.css　→　application.scss

そしたらapplication.scssに必要なものを記入していきます

app/assets/stylesheets/application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 /*
*/
//　↓追加
@import "bootstrap";

scssファイルではインポートに@importを使うので注意

最後にapplication.jsを変更して終わりです

app/assets/javascripts/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()
// ↓追加
//=require bootstrap
require('jquery')

設定は終わりです。これでbootstrapが使えるようになっていると思います
アプリを再起動して実際にできているか確認してみてください

参考資料