I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]

Who is the target of this article

--For those who are starting to learn Ruby on Rails6 (hereinafter Rails6) --Those who want to use Bootstrap 4 with Rails 6 --Programming beginner (the person who writes is also a beginner) --Those who are creating a portfolio aiming to be an engineer and want to apply CSS that feels crisp and good --Those who want to use Bootstrap 4 for Rails 6 but are wondering which method to install because the description differs depending on the article.

↑ I was in such a state myself, so I decided to write an article.

** (Addition: Precautions 2020/12/25) ** In the local development environment, it can be applied as follows. However, since Bootstrap cannot be reflected in the production environment (production) such as heroku and AWS, we are checking the permanent support method.

The method that is provisionally supported is described near the end.


--Standing on the starting line to use Bootstrap 4 with Rails 6

Therefore, this article describes the procedure to install Bootstrap 4 on the Rails 6 app and check the operation.

What is Bootstrap in the first place?

Bootstrap is a web design framework that uses HTML, CSS, and JavaScript. Responsive design also supports terminal display such as smartphones. Therefore, it is recommended when you want to make the app look crisp and nice. Bootstrap official website

It seems that the α version of Bootstrap 5 = test version is also available (as of December 2020) This article is an article of "Introduction to Bootstrap 4". Please be careful.

How to install Bootstrap 4

There are multiple ways to install Bootstrap 4 in Rails 6, one is to install it with gem and the other is to use webpacker, but this time I decided to use the latter "webpacker".

When I googled before the introduction, there were some articles saying that Bootstrap could not be customized if gem was introduced (?), Or I introduced it once by myself using the gem method and it didn't feel right ...

I will try to follow the advantages and disadvantages of each if I have time.

Now let's work.

Oops, before the introduction work ...

We will proceed on the assumption that yarn is already installed (though many people have already installed it) Also, create a Rails project (application) to which Bootstrap 4 is applied with rails new.

Working environment (reference)

For reference, my working environment is as follows.

Bootstrap 4 related set to be introduced (reference)

The Bootstrap 4 related files to be installed this time are as follows. Along with Bootstrap4, we will also introduce related files jQuery and popper.js. (As of December 2020)



Execute by typing yarn add bootstrap jquery popper.js in the terminal.

With the above command, not only Bootstrap4 but also jQuery and popper.js could be installed together. (If you want to specify the version strictly, it may be better to write something like yarn add [email protected] [email protected] [email protected])

Describe the contents to read Bootstrap in application.js.

It looks like the following.


# <abridgement>

#Add the following 2 lines
import 'bootstrap'  # <-Postscript
import 'bootstrap/scss/bootstrap.scss'  # <-Postscript

# <abridgement>

Changed the style sheet extension.

(Addition: 2020/12/23) This work may not be necessary for those who normally use CSS instead of SCSS.

App/assets/stylesheets/application.css → Change the extension like application.scss. All the items listed by default have been deleted.

If you want to read other CSS files, please add them to application.scss as appropriate.


@import "hogehoge.css";

Operation check

After installing it, check the operation. In index.html.erb, write the wording to which the Bootstrap class is applied. If the description is as below, it has been applied when the characters are actually displayed and the characters are displayed in yellow and the background is displayed in blue. Bootstrap installation work is complete.


<!--Letter color:Yellow, background color:Blue-->
<p class="text-warning bg-primary">Bootstrap test</p>

Provisional support when Bootstrap is not reflected in the production environment

** (Addition: 2020/12/25) ** When I deployed to the production environment (production. In my case, I used AWS EC2), I encountered that Bootstrap was not reflected. I checked with my browser's verification tool and found that Bootstrap related files may not be loaded properly. (Something related to the asset pipeline?)

Therefore, although it is a brute force, I decided to temporarily support it by referring to the external library only in the production environment. I decided to load the Bootstrap official jsdelivr tag directly.


<!DOCTYPE html>
    <title>Fishing Archive</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all' %>

    <%#=From here, provisional measures to reflect Bootstrap production. Reflect only during production.%>

    <% if Rails.env.production? %>
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <% end %>

    <%#=Up to this point, provisional measures to reflect Bootstrap production%>

    <%= javascript_pack_tag 'application' %>

I will add it when I find a permanent countermeasure.


Bootstrap is useful for small designs. I'm going to play with it!

Since this is my first post on Qiita, I wrote it as a practice for markdown notation. Since both Rails and Bootstrap are beginners, I would appreciate it if you could point out any lack of explanation or mistakes.

Recommended Posts

I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
I tried to introduce CircleCI 2.0 to Rails app
[Rails] I tried to raise the Rails version from 5.0 to 5.2
I tried to organize the session in Rails
Rails6 I tried to introduce Docker to an existing application
[Rails] I tried using the button_to method for the first time
[Rails] [bootstrap] I want to change the font size responsively
[Rails] I tried to create a mini app with FullCalendar
I tried to explain the method
[Rails] I tried deleting the application
[Beginner] What I learned when trying to introduce bootstrap to the rails6 app without using a CDN [Asset pipeline]
[For Swift beginners] I tried to summarize the messy layout cycle of ViewController and View
I want to create a chat screen for the Swift chat app!
I tried to sort the data in descending order, ascending order / Rails
I tried to implement the image preview function with Rails / jQuery
I tried to understand how the rails method "redirect_to" is defined
I tried to understand how the rails method "link_to" is defined
I tried to summarize the methods used
Change the default timezone for the rails app
I tried to implement the Iterator pattern
I tried to summarize the Stream API
[Must-see for beginners] rails_12factor is not required to publish Rails app to Heroku
I want to introduce the committee with Rails without getting too dirty
[Rails] Articles for beginners to organize and understand the flow of form_with
I tried using Docker for the first time
[For beginners] I tried using DBUnit in Eclipse
[Rails] Add page nation to table [For beginners]
[Rails] I tried to summarize the passion and functions of the beginners who created the share house search site!
[For beginners] I tried using JUnit 5 in Eclipse
[For beginners] How to implement the delete function
I tried to create a LINE clone app
The code I used to connect Rails 3 to PostgreSQL 10
I tried touching Docker for the first time
I summarized the naming conventions for each Rails
I tried to set tomcat to run the Servlet.
Rails beginners tried to get started with RSpec
Unify the Rails app time zone to Japan time
[Azure] I tried to create a Java application for free-Web App creation- [Beginner]
Introducing Bootstrap to Rails 5
Introducing Bootstrap to Rails !!
Introduce Vue.js to Rails
How to implement login request processing (Rails / for beginners)
I tried to organize the cases used in programming
I tried to summarize the state transition of docker
I tried to decorate the simple calendar a little
[Rails] I tried playing with the comment send button
05. I tried to stub the source of Spring Boot
I tried to reduce the capacity of Spring Boot
I want to know the answer of the rock-paper-scissors app
I tried using the Migration Toolkit for Application Binaries
[Rails] I don't know how to use the model ...
I want to dark mode with the SWT app
What should I use for the testing framework [Rails]
App development beginners tried to make an Android calculator app
I tried to implement the Euclidean algorithm in Java
[Must-see for beginners] I changed the display of the posting time to Japanese time [l method]
[Beginner's point of view] I tried to solve the FizzBuzz problem "easily" with Ruby!
When I tried to reproduce Progate's Rails app on my PC (local environment), I got stuck at the image display
I tried unit testing Rails app using RSpec and FactoryBot
I tried to implement the like function by asynchronous communication
Tutorial to create a blog with Rails for beginners Part 1