Can't make Bootstrap working in Ruby on rails app - ruby-on-rails

Question

I am struggling to adapt bootstrap 4 working in my Rails application. I have followed the instructions from here and here. I have placed simple navbar
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
in my application.html.erb file but nothing changed. After a few hours of searching I found same questions here but no any working solution.
This is my Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.3.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.0'
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported
runtimes
# gem 'mini_racer', platforms: :ruby
# Build JSON APIs with ease. Read more:
https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false
group :development, :test do
end
group :development do
# Access an interactive console on exception pages or by calling
'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data
gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'pry-rails', group: [:development, :test]
gem 'jquery-rails'
gem 'dotenv-rails', group: [:development, :test]
gem 'rspec-rails', group: [:development, :test]
gem 'capybara', group: [:development, :test]
gem 'launchy', group: [:development, :test]
gem 'factory_bot', group: [:development, :test]
gem 'database_cleaner', group: [:development, :test]
gem 'valid_attribute', group: [:development, :test]
gem 'shoulda-matchers', group: [:development, :test], require: false
gem 'devise'
gem 'bootstrap', '~> 4.1.3'
gem 'webpacker', '~> 3.3'
This is my app/stylesheets/application.scss
/*
* This is a manifest file that'll be compiled into application.css,
which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory,
lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a
relative path.
*
* You're free to add application-wide styles to this file and
they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over
styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after
the
* It is generally better to create a new file per style scope.
*
#import 'bootstrap';
*/
here is my app/javascripts/application.js
// 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, 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 jquery3
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require popper
//= require activestorage
//= require_tree .
Please help if you know how to set it up right. Thank you in advance.

Answer 1

#import 'bootstrap'; should be outside of your comments
/*
* This is a manifest file that'll be compiled into application.css,
which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory,
lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a
relative path.
*
* You're free to add application-wide styles to this file and
they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over
styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after
the
* It is generally better to create a new file per style scope.
*
*/
#import 'bootstrap';