What is the best way to install bootstrap with rails app?

1.

rails new bootstrappy

2.

cd bootstrappy

3.

yarn add bootstrap jquery popper.js

4.

in environment.js

config/webpack/environment.js

add the following:

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}))

5.

in application.js

location: app/javascript/packs/application.js add:

import "bootstrap"
import "../stylesheets/application"

document.addEventListener("turbolinks:load", () => {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()
})

6.

create stylesheets folder in app/javascript

mkdir app/javascript/stylesheets

in stylesheets folder create file: application.scss

7.

in app/javascript/stylesheets/application.scss add :

@import "~bootstrap/scss/bootstrap";

8. update: app/views/layouts/application.html.erb

add:

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>   

application.html.erb looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrappy</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

9. test it out:

add navbar, tooltips, popover to:

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrappy</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 
    'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 
    'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>   

  <!-- add navbar -->

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
      target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- 
      expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
            role="button" 
            data-toggle="  dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria- 
            disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria- 
          label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" 
          type="submit">Search</button>
      </form>
    </div>
  </nav>

  <!-- add tooltips -->

  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="top" title="Tooltip on top">
    Tooltip on top
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="right" title="Tooltip on right">
    Tooltip on right
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
  </button>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data- 
    placement="left" title="Tooltip on left">
    Tooltip on left
  </button>

  <!-- add popover -->

  <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" 
    title="Popover title"   data-content="And here's some amazing content. It's very 
    engaging. Right?">Click to toggle popover</button>
  <%= yield %>
  </body>
</html>

10.

rails g controller main index

11.

update app/config/routes.rb

like this:

Rails.application.routes.draw do
  root to: 'main#index'
end

12.

run start rails server

13. follow this link:

http://localhost:3000/ and enjoy!


Why install the bootstrap gem?

Since rails uses the asset pipeline to minify and compress stylesheets, javascripts, and images, using a sass version of bootstrap is the preferred way of including bootstrap over simply including bootstrap in your application layout view. In addition, if you simply included bootstrap in a header file, that included file would have to be a compiled version of bootstrap (it would simply be a css file). However, since we'll include the sass version of bootstrap in your app, you'll have access to bootstrap's sass variables, mixins, and other sass-related awesomeness. You couldn't get that functionality by including a compiled asset in your application layout view. By importing sass in your application.scss file, rails will compile your bootstrap and assets on the fly and will allow you a lot more flexibility in the design of your apps.

Adding Bootstrap to your rails app

According to the bootstrap-sass gem, you need to add

'gem 'bootstrap-sass'

to your Gemfile and then run

bundle install

Next, you'll want to import the bootstrap stylesheets in your application css manifest file. However, by default, the manifest file is named:

app/assets/stylesheets/application.css

but you should rename it to use a .scss extension (or .sass extension) like so:

app/assets/stylesheets/application.scss

Now, remove everything in your application.scss file and add the following two lines:

@import "bootstrap-sprockets";
@import "bootstrap";

You'll need to manually handle the imports of your scss files from now on.

Next, to make bootstrap's javascript helpers available, you'll need to add this line:

//= require bootstrap-sprockets

to your

app/assets/javascripts/application.js

You'll want to add that line is such a way that your application.js file looks like this:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory,   lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

In Bootstrap 4 now you can simply add your @import 'bootstrap'; to your application.scss. You should rename your application.css to application.scss if you have not already.

@import 'bootstrap';

After you have added the gem to your Gem file

...
# Bootstrap
gem 'bootstrap', '~> 4.1.1'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
...

Advantages of using the Sass version is

  1. You can change the default bootstrap variables to your own custom variables
  2. And you can write your own function and mixing without the need to recompile and worry about updates/fix from Bootstrap.