Problems With Bootstrap And Rails

Hola, my fellow Rails enthusiasts.

I’m currently experiencing an issue with Rails 7 and Bootstrap. I created a new Rails app with the bootstrap gem installed using the rails new project --css bootstrap command.

My navigation bar consists of the current code:


       <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-info" id="navigation">
      <div class="container">
        <!-- Brand/logo -->
        <%= link_to 'Social Media', root_path, class: "navbar-brand" %>

        <!-- Navbar toggler button for small screens -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon">


          </span>
        </button>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ml-auto">

            <li class="nav-item active">
              <%= link_to 'Home', root_path, class: "nav-link" %> 
            </li>
            <li class="nav-item">
              <%= link_to 'Posts', posts_path, class: "nav-link" %>
            </li>


               
              <% if current_user.present? %>
                <li class="nav-item">
                  <%=link_to 'Profile', user_path(current_user), class: "nav-link"%>
                </li>
                <li class="nav-item">
                  <%= button_to 'Sign Out', session_path, method: :delete, class: "nav-link"   %>
                </li>
                <% if current_user.admin? %>
                  <li class="nav-item">
                  <%= link_to 'Administrative Dashboard', admin_dashboard_index_path, class: "nav-link" %>
                  </li>
                <%end%>
              <% else %>
                <li class="nav-item">
                  <%=link_to 'Sign Up', new_user_path, class: "nav-link"%>
                </li>
                <li class="nav-item">
                  <%= link_to 'Sign In', new_session_path, class: "nav-link" %>
                </li>
              <%end%>


              <% if current_user.present? %>
              <li class="nav-item">
                <span class="nav-link">
                  Hi, <%= current_user.first_name %>
                </span>
              </li>
              <%end%>

          </ul>
        </div>
      </div>
    </nav>

My issue is that while the hamburger button does appear as intended in mobile resolution, it doesn’t function. There’s no dropdown menu or any animation. When you click/tap the button nothing happens.

Would anyone be able to point me in the right direction as to what may be wrong?

Thank you.