Bootstrap navbar not appearing for Ruby on Rails - 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

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

Answer 2

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