Bootstrap navbar not appearing for Ruby on Rails

Question

I have a ruby on rails application. in the meetings.scss, i have already done

@import 'bootstrap-sprockets';
@import 'bootstrap';

in my gem file i have already bundled installed the below:

gem 'jbuilder', '~> 2.7'
gem "simple_calendar", "~> 2.0"
gem 'bootstrap-sass', '~> 3.3.6' 
gem 'bootstrap', '~> 4.5.0'
gem 'jquery-rails'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

However, in my index.html.erb, I tried to do

<p id="notice"><%= notice %></p>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<h1>Meetings</h1> 

But nothing is happening in the nav bar

In app/javascript/packs, my application.js looks like this

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

Any reason why?

Answer 1

If you are using Rails 5

Rename your app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss then put:

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

Then, remove all the *= require_self and *= require_tree. statements from the sass file. Instead, use @import to import Sass files.

Require Bootstrap Javascripts in app/assets/javascripts/application.js:

//= require jquery
//= require bootstrap-sprockets

Source : https://github.com/twbs/bootstrap-sass

If you Rails 6 with Webpack you can follow these steps:

https://medium.com/@guilhermepejon/how-to-install-bootstrap-4-3-in-a-rails-6-app-using-webpack-9eae7a6e2832

Answer 2

The preferred way to install Bootstrap (or any assets for that matter) in Rails 6 is with yarn. Here are the steps to get it to work:

1. In your terminal

yarn add bootstrap query popper.js

2. In config/webpack/environment.js

const webpack = require(‘webpack’)
environment.plugins.append(‘Provide’, new webpack.ProvidePlugin({
  $: ‘jquery’,
  jquery: ‘jQuery’,
  Popper: [‘popper.js’, ‘default’]
})

3. app/javascript/packs/application.js

require(‘bootstrap/dist/js/bootstrap’)

4. app/assets/stylesheets/application.css

@import bootstrap/scss/bootstrap

5. app/assets/stylesheets/application.css

change to app/assets/stylesheets/application.scss