Rails6でBootstrapが機能していない

前提

プログラミング学習1ヶ月の初心者です。
下記のプログラミング学習サイトでTwitterのクローンを学習しています。
学習元の投稿は2014年頃らしくアップデートはされていない状況です。
https://cyllabus.jp/courses/LVlXWNb8GcWTKy8x1gHS5g

###・実現したいこと
今構築している環境で学習サイトと同一の画面を再現したいです。

構築している環境
macOS Catalina 10.15.3
Ruby2.7.0
Rails6.0.2.1

発生している問題・エラーメッセージ

会員登録機能を構築しているのですが、トップページのBootstrapが機能していないようで
学習サイトに貼り付けられている画像とフォームのレイアウトやUIが異なり何が原因がわからない状況です。
私の環境で構築した場合の画面になります。（画像は変更しています）

こちらがサイトに乗っている完成画面イメージです。

cssなどのエラーログなどは見つけられていません。

該当のソースコード

ソースコードは基本的に学習サイトのコードを模写し、バージョンが異なるため発生したエラーについては都度調べて反映しています。どのコードを載せて良いかわかりませんでしたので、css関連のコードを記述します。

Gemfile

Gemfile
1source 'https://rubygems.org'
2git_source(:github) { |repo| "https://github.com/#{repo}.git" }
3
4ruby '2.7.0'
5
6# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
7gem 'rails', '~> 6.0.2', '>= 6.0.2.1'
8# Use sqlite3 as the database for Active Record
9gem 'sqlite3', '~> 1.4'
10# Use Puma as the app server
11gem 'puma', '~> 4.1'
12# Use SCSS for stylesheets
13# gem 'sass-rails', '>= 6'
14# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
15gem 'webpacker', '~> 4.0'
16# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
17gem 'turbolinks', '~> 5'
18# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
19gem 'jbuilder', '~> 2.7'
20# Use Redis adapter to run Action Cable in production
21# gem 'redis', '~> 4.0'
22# Use Active Model has_secure_password
23# gem 'bcrypt', '~> 3.1.7'
24
25# Use Active Storage variant
26# gem 'image_processing', '~> 1.2'
27
28# Reduces boot times through caching; required in config/boot.rb
29gem 'bootsnap', '>= 1.4.2', require: false
30
31group :development, :test do
32    
33 gem 'sorcery'
34 gem 'haml-rails'
35 #gem 'bootstrap-sass'
36 gem 'bootstrap'
37 gem 'sass-rails'
38 gem 'jquery-rails'
39 
40  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
41  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
42end
43
44group :development do
45  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
46  gem 'web-console', '>= 3.3.0'
47  gem 'listen', '>= 3.0.5', '< 3.2'
48  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
49  gem 'spring'
50  gem 'spring-watcher-listen', '~> 2.0.0'
51end
52
53group :test do
54  # Adds support for Capybara system testing and selenium driver
55  gem 'capybara', '>= 2.15'
56  gem 'selenium-webdriver'
57  # Easy installation and use of web drivers to run system tests with browsers
58  gem 'webdrivers'
59end
60
61# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
62gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
63

application.js

application
1// This file is automatically compiled by Webpack, along with any other files
2// present in this directory. You're encouraged to place your actual application logic in
3// a relevant structure within app/javascript and only use these pack files to reference
4// that code so it'll be compiled.
5
6require("@rails/ujs").start()
7require("turbolinks").start()
8require("@rails/activestorage").start()
9require("channels")
10require('jquery')
11
12//= require jquery3
13//= require jquery_ujs
14//= require popper
15//= require bootstrap
16//= require bootstrap-sprockets
17
18// Uncomment to copy all static images under ../images to the output folder and reference
19// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
20// or the `imagePath` JavaScript helper below.
21//
22// const images = require.context('../images', true)
23// const imagePath = (name) => images(name, true)

new.html.haml

new
1#registrations-new
2  .col-xs-6.left-content
3    %h1 テストサイト
4    %p.ex
5    このサイトは、プログラミング学習のためにTwitterをクローンしてます。
6    %p.by
7    開発者: @kuro_sara01 デザイン: @kuro_sara01 企画: @kuro_sara01
8  .col-xs-6.right-content
9    = form_for @user, url: registrations_path, method: :post do |f|
10      %h2
11        会員登録する
12      - @user.errors.each do |attr, message|
13        .alert.alert-danger= message
14      .form-group
15        = f.label :name, "ユーザーID: @cyllabus_jp", class: "control-label"
16        = f.text_field :name, class: "form-control"
17      .form-group
18        = f.label :email,"メールアドレス: hello@cyllabus.jp", class: "control-label"
19        = f.text_field :email, class: "form-control"
20      .form-group
21        = f.label :password, "パスワード: 6文字以上", class: "control-label"
22        = f.password_field :password, class: "form-control"
23      .form-group
24        = f.label :password_confirmation, "確認用パスワード: 6文字以上", class: "control-label"
25        = f.password_field :password_confirmation, class: "form-control"
26      = f.submit "登録する", class: "btn btn-primary"
27      = link_to "ログインする", new_sessions_path, class: "login pull-right"
28      .clear

registrations.css.sass

registrations
1// Place all the styles related to the registrations controller here.
2// They will automatically be included in application.css.
3// You can use Sass (SCSS) here: http://sass-lang.com/
4
5#registrations
6  background-image: asset-url("back.jpg")
7  background-position: center
8  background-size: cover
9  background-color: transparent
10  background-repeat: no-repeat
11  background-color: #050911
12  #registrations-new
13    width: 100%
14    height: 100%
15    .left-content
16      margin-top: 45px
17      padding: 0px 45px
18      color: #fff
19      h1
20        font-size: 50px
21        margin: 0px
22        margin-top: 10px
23      .ex
24        font-size: 18px
25        margin: 45px 0px
26      .right-content
27        padding: 0px 45px
28        form
29          margin: 45px 0px
30          padding: 30px 35px
31          border: 1px solid #fff
32          border-radius: 6px
33          background-color: rgba(0, 0, 0, 0.3)
34          color: #fff
35          h2
36           margin: 0px 0px 20px 0px
37           border-bottom: 1px solid rgba(255, 255, 255, 0.5)
38           padding-bottom: 10px
39           font-size: 20px
40          .control-label
41            font-weight: 400
42          .btn
43            width: 100%
44            padding: 12px
45            margin-top: 10px
46            margin-bottom: 10px
47            font-size: 16px
48          .login
49            color: #fff
50            text-decoration: underline

下記にBootstrapのcss読み込み箇所としてapplication.css.sassを記載します。
/= require_self/の部分ですが、デフォルトは

/*= require_self
*/

と記述されておりましたが、画面読み込み事にエラーが出力されたので
/= require_self/に変更したところ画面が読み込まれたので
その状態にしております。

application
1/* This is a manifest file that'll be compiled into application.css, which will include all the files
2/* listed below.
3/*
4/* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
5/* vendor/assets/stylesheets directory can be referenced here using a relative path.
6/*
7/* You're free to add application-wide styles to this file and they'll appear at the bottom of the
8/* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
9/* files in this directory. Styles in this file should be added after the last require_* statement.
10/* It is generally better to create a new file per style scope.
11/*
12/*= require_tree .
13/*= require_self*/
14
15 @import bootstrap-sprockets
16 @import bootstrap
17 @import example
18
19html, body
20  width: 100%
21  height: 100%
22 
23.clear
24  clear: both

試したこと

BootstrapがRailsに反映しない対策としてGemfileへのgem追加や、application.html.erbの<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>の部分を<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>に変更したりしましたが、反映にはいたりませんでした。

かなり漠然とした質問になってしまっているかもしれませんが、対策についての参考記事や、そもそも違う問題だぞ、などのご指摘をいただけると大変嬉しいです。

よろしくお願い致します。