I have two problems with bootstrap and toastr.js, and I think the problem is coming from javascript configuration, can you please help me?

rubyonrails-talk
1

First, my setup:

  • MX-linux os v.21
  • Ruby V. 3.2.1
  • Rails V.7.0.4
  • Bootstrap V.5.2.3

Second, I am working on a clone for instagram, I’ve added gems for :

  • gem “devise”

  • gem “bootstrap”

  • gem “jquery-rails”

  • gem “sass-rails”

  • gem “turbolinks”

  • gem “erb-formatter”

  • gem “font-awesome-sass”, “~> 6.3.0”

  • gem “toastr-rails”

Third : code snippets 1- application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "./add_jquery"

import "jquery"
import "jquery_ujs"
import "popper"
import "bootstrap"

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap.min
//= require bootstrap-sprockets
//= require_tree
//= require toastr

2- application.css.scss

@import "bootstrap";
@import "font-awesome";
@import "toastr";

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

3- _alerts.html.erb

<div class="container text-center">
    <div class="row">
        <div class="col-9">
        </div>
        <div class="col-3">
            <p class="notice alert alert-success alert-dismissible fade show" role="alert"><%= notice %></p>
        </div>
    </div>
</div>

4- application.html.erb

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Instagram</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application",
    media: "all",
    "data-turbolinks-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbolinks-track": "reload" %>
  </head>

  <body>
    <%= render "/shared/header" if current_user %>
    <%= render "/shared/alerts" %>
    <%= yield %>
    <%= render "/shared/footer" %>

    <%# flash message instead of typical alerts by using toastr.js : %>
    <% if flash.any? %>
      <script type="text/javascript" >
        <% flash.each do |k, v| %>
          <% type = k.to_s.gsub("alert", "error").gsub("notice", "success") %>
          toastr.<%= type %>("<%= v %>")
        <% end %>
      </script>
    <%# end of flash message %>

    <% end %>
  </body>
</html>

5- dummy phone

    <div class="dummy-phone">
    <div class="screen-shot">
        <div
        class="carousel carousel-fade"
        data-bs-ride="carousel"
        id="carouselExampleSlidesOnly"
        >
        <div class="carousel-inner">
            <div class="carousel-item active">
            <%= image_tag "screenshot1.jpg", height: "427", width: "240", alt: "photo_no_1" %>
            </div>
            <div class="carousel-item">
            <%= image_tag "screenshot2.jpg", height: "427", width: "240", alt: "photo_no_2" %>
            </div>
            <div class="carousel-item">
            <%= image_tag "screenshot3.jpg", height: "427", width: "240", alt: "photo_no_3" %>
            </div>
            <div class="carousel-item">
            <%= image_tag "screenshot4.jpg", height: "427", width: "240", alt: "photo_no_4" %>
            </div>
            <div class="carousel-item">
            <%= image_tag "screenshot5.jpg", height: "427", width: "240", alt: "photo_no_5" %>
            </div>
        </div>
        </div>
    </div>
    </div>

now, I have two problems, first with carousel is not working, just fixed image, second, I added toastr.js to replace the devise standard alerts, but it’s not working either.

6- devise/sessions/new.html.erb

<div class="container">
  <div class="row">
    <div class="col-lg-6 landing-left">
      <%= render "devise/shared/dummy_phone" %>
    </div>
    <div class="col-lg-6 landing-right text-center d-flex align-items-center">
      <div>
        <div class="form-login box">
          <h3 class="core-sprite brand-name-img"></h3>

          <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
            <div class="form-group">
              <%= f.email_field :email, autofocus: true, placeholder: "Email", class: "form-control" %>
            </div>
            <br/>
            <div class="form-group">
              <%= f.password_field :password, autocomplete: "off", placeholder: "Password", class: "form-control" %>
            </div>
            <br/>
            <% if devise_mapping.rememberable? -%>
              <div class="form-check">
                <%= f.check_box :remember_me, class: "form-check-input", id: "check-box-one" %>
                <%= f.label :remember_me, class: "form-check-label" %>
              </div>
            <% end -%>
            <br/>
            <div class="actions">
              <%= f.submit "Log in", class: "btn btn-primary" %>
            </div>
            <br>
          <% end %>
        </div>
        <div class="redirect-links box">
          <%= render "devise/shared/links" %>
        </div>
      </div>
    </div>
  </div>
</div>

screenshot of project

can you please help me? thanks in advance