Introducing Bootstrap to Rails !!

I will explain how to install Bootstrap in Rails. The procedure is very simple, so please refer to it! !! There are four steps.

procedure

** 1. Install Bootstrap 2. Create SCSS file 3. Modify JS file 4. Restart Rails (Puma) **

1. Install Bootstrap with gem

When using Bootstrap with Rails, it is common to install using gem. Bootstrap uses jQuery internally, so let's install it as well. Add the following to your Gemfile and try running bundle install.

Gemfile


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

Terminal


% bundle install

2. Create an SCSS file

** Next, rename application.css to the file name application.scss. ** ** This is because Bootstrap is written in the notation "SCSS" and is also used in Rails. "SCSS" is a notation that extends CSS, and is a notation that is widely used in the current Web industry. I won't explain it in detail here, but think of it as a notation that is easier to read and write than the CSS description.

Change file extension


Before change app/assets/stylesheets/application.css 
After change app/assets/stylesheets/application.scss

After renaming the file, actually open the file. *** = require_tree. And * = require_self are deleted and Add @import "bootstrap" ;. ** ** The added code will be the setting for loading Bootstrap.

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 .<(Deleted)
 *= require_self <(deleted)
 */
@import "bootstrap";<(Addition)

3. Modify JS file

Set to read related files such as "JavaScript" and "jQuery" used in Bootstrap. Open app / assets / javascripts / application.js and add it above the original code referring to the following.

app/assets/javascripts/application.js


#Added the following three
//= require jquery3
//= require popper
//= require bootstrap

#Original code
//= require rails-ujs
//= require activestorage
//= require turbolinks

4. Restart Rails (Puma)

Please try to access it from your browser once. If you see an error at this stage, restart Rails (Puma). If the error still persists, the version of "node.js" may be out of date. If you built Rails with Docker, please check if the Dockerfile has the following settings.

Dockerfile


#Install the required packages for Rails
RUN apt-get update -qq && apt-get install -y nodejs
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
    && apt-get install -y nodejs

#In the description of the official website below, node.The version of js is low and bootstrap cannot be used
# RUN apt-get update -qq && apt-get install -y nodejs

Summary

You may find the installation procedure difficult, but you can delete the description or follow the procedure described here. It's surprisingly easy because you just need to rewrite it. Please give it a try! !!

that's all.

Recommended Posts

Introducing Bootstrap to Rails 5
Introducing Bootstrap to Rails !!
Introducing CircleCI to Rails
Introducing Bootstrap and Font-Awesome (Rails)
Introducing full calendar to Rails application
How to deploy Bootstrap on Rails
Introducing React to Rails with react-rails
Rails Bootstrap introduced
[Rails] Introducing jquery
[Rails] Introducing devise
[Rails 6] Introducing Google Maps to your portfolio
The process of introducing Vuetify to Rails
How to write Rails
Introducing New Relic to Rails apps on Heroku
[Rails] Introducing Active Hash
Introduce Vue.js to Rails
How to adapt Bootstrap
How to uninstall Rails
[Rails] Bootstrap form-control does not apply to date_select
Introducing Rails6 + Bootswatch / Honoka
[Rails] Introducing pay.jp (from view customization to registration)
[Ruby on Rails] How to install Bootstrap in Rails
[rails] How to post images
Introducing AWS CLI to CentOS 7
[Rails] How to use enum
Introducing past nvidia-driver to Ubuntu
[Rails] How to install devise
[Rails] How to use enum
How to read rails routes
How to use rails join
[Rails] Add column to devise
How to terminate rails server
How to write Rails validation
How to write Rails seed
[Rails] How to use validation
[Rails] How to disable turbolinks
Pass parameters to Rails link_to
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Rails] How to implement scraping
[Rails] How to make seed
Introducing JITSI MEET to CentOS 8
How to write Rails routing
[Rails] How to install simple_calendar
[Rails] How to install reCAPTCHA
Introduced gRPC client to rails
Introduction to RSpec-Everyday Rails Summary-
[Rails] How to use Scope
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
[Rails] [bootstrap] I want to change the font size responsively
[Rails] How to use gem "devise"
How to deploy jQuery on Rails
[Rails] How to install Font Awesome
Rails new fails to install mysql
[Rails] How to use devise (Note)
[Rails] Two ways to write form_with
[Rails] How to use flash messages
[rails] How to display db information
Preparing to create a Rails application
Enable jQuery and Bootstrap in Rails 6 (Rails 6)
[Rails] Learn yield to understand content_for