FullStackEngineer 2022年3月12日更新

bootstrap5 対応Gemを入れる

Index

Bootstrap5対応の Gemを入れる

今回はbootstrap5に対応したGEMを入れていきます。 これを入れる事で、後述するkaminariやdeviceでのテンプレートにもbootstrap5のテンプレートGEMを当てていきます。

Bootstrap rubygem


gem 'bootstrap', '~> 5.1.3' gem 'jquery-rails'

application.css -> .scss

削除
*= require_self
*= require_tree 

追加
@import "bootstrap";

app/assets/javascripts/application.js

下記を追加
//= require jquery3
//= require popper
//= require bootstrap-sprockets
  • レイアウトを少し調整

ちなみにBootstrap5のドキュメントは下記にあります。

5.0ドキュメント

※ GEMでインポートされてるので、この部分に書かれてる設定などは特に必要ありません。

最新記事一覧

続きを見る

関連コンテンツ

カテゴリー一覧

TOP フルスタックエンジニアを目指すに方々へ Deviseのbootstrap5 対応