Introduction
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
Definition from Bootstrap website.
With Boring Generator
Boring Generator installation guide.
> rails generate boring:bootstrap:install
OPTIONS:
No options available.
Without Boring Generator
1. Add Bootstrap via NPM packages
yarn add bootstrap jquery popper.js
2. Configure jQuery and popper.js plugin with webpack
// config/webpack/environment.js
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
3. Import Bootstrap Stylesheets
// app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
4. Require Bootstrap
Require the stylesheet in the application.js
to be available in the entire application. Rails 6 by default adds the javascript_pack_tag
in the application.html.erb
to apply all the JS via webpack on the entire application. Please make sure you have javascript_pack_tag
added in your application layout.
// app/javascript/packs/application.js
import "bootstrap"
import "stylesheets/application"
5. Include stylesheet pack tag
// app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Happy Coding!!!