Using Material Design for Bootstrap with Rails 5.2

What did you do

Carrying out Rails challenges. Regarding decoration, I was supposed to use Material Design for Bootstrap, but it's been a while since I introduced a JS library that is not Webpacker. I forgot a lot, so make a note of the procedure.

The execution environment is as follows.

What is Material Design for Bootstrap?

Material Design for Bootstrap (MDB) is a Bootstrap framework that complies with Google's Material Design.

There were various useful links in the Official Github Repository: relaxed:

-Homepage -Download link for jQuery compatible version, Vue.js compatible version, etc. -Templates using MDB, etc.


From 5.0 series, MDB is no longer based on jQuery. From the Download link here mentioned above, you can get the ones that support various JS frameworks.

This time, we will use MDB 4.1.1, so we will start by introducing jQuery.

jQuery Starting with Rails 5.1, jQuery is not included in Rails by default, so you need to install it separately.

Describe as follows in the Gemfile ,,,


gem 'jquery-rails'

bundle install.

Let's add the following to application.js. (require turbo links has been removed)


//= require jquery  #Postscript
//= require rails-ujs #Postscript
//= require activestorage
//= require_tree .

Introduction of MDB body

Download the MDB itself with npm. There is also a gem, but it doesn't work, so npm was recommended in the curriculum. Looking at the site, it looks a little old. .. ..

$ npm install [email protected]

Read necessary files

I'm sorry, I haven't organized it very deeply from here by copying the model code, but I will read the css file necessary to run MDB.


@import 'bootstrap-material-design/dist/css/bootstrap-material-design';

So far, MDBs for CSS and basic JS have worked in my environment. Perhaps you will also need the dependent library popper.js etc. for certain things like tooltips ^^. I haven't used it in the app yet, so I'd like to add it if possible, but I'll release the article so far. : relaxed:

If there is any excess or deficiency, I would be grateful if you could point it out.

Recommended Posts

Using Material Design for Bootstrap with Rails 5.2
Try using view_component with rails
Japaneseize using i18n with Rails
Preparation for developing with Rails
[Rails] DB design for EC site
Notes for using BLE with iOS apps
Signature verification implementation (Rails) for detecting tampering with request parameters using JWT
Environment construction procedure for using PowerMock with JUnit
Rails Bootstrap introduced
[Ubuntu 18.04] Environment construction for using PyTorch with RTX3090
[Rails] Procedure for linking databases with Ruby On Rails
[Rails] Implementation of image slide show using Bootstrap 3
[For beginners] Procedure for creating a controller using rails
Notes for using BLE with iOS apps
[Ruby] Exception handling basics
Ruby on Rails basics
Stable development environment construction manual for "Rails6" with "Docker-compose"
Multi-tenant with Rails using PostgreSQL's Row Level Security Policy
Using PAY.JP API with Rails ~ Implementation Preparation ~ (payjp.js v2)
Challenge the settings for developing with vue.js on Rails 6
Using PAY.JP API with Rails ~ Card Registration ~ (payjp.js v2)
Build a local development environment for Rails tutorials with Docker-Introduce Bootstrap and Font Awesome with Webpack-
Introducing Bootstrap to Rails 5
Using Pair with OpenJDK
Introducing Bootstrap to Rails !!
Rails deploy with Docker
[Rails 6] RuntimeError with $ rails s
Handle devise with Rails
[Rails] Learning with Rails tutorial
[Rails] Test with RSpec
[Rails] Development with MySQL
Double polymorphic with Rails
Succeeded in loading js manually compiled using webpack with rails6
[Rails] Fade out flash messages with javascript without using jquery
How to set environment variables when using Payjp with Rails
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
Tutorial to create a blog with Rails for beginners Part 1
[Rails] I tried using the button_to method for the first time
Be careful of initialization timing when using MessageEncryptor with Rails 5.2 / 6.0
Get Youtube channel information with Rails app (using Yt gem)
Using another database for phpunit test on Laravel 6 with docker-compose.
Tutorial to create a blog with Rails for beginners Part 2
Things to keep in mind when using Sidekiq with Rails
Tutorial to create a blog with Rails for beginners Part 0
Building an environment for creating apps with Rails and Vue
For beginners! Automatic deployment with Rails6 + CircleCI + Capistrano + AWS (EC2)
[Rails] Implementation of multi-layer category function using ancestry "I tried to make a window with Bootstrap 3"