techwithtim / Flask-Web-App-Tutorial

Code for the note storing flask web app made during a YouTube video.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Toggler button

AtikRahman opened this issue · comments

Hi, I'm not able to create the collapse navbar toggle button. When I minimize my window to try it out, it won't collapse. Can anyone help me with this please? Thanks!

This is how I wrote as attached:
navbar

The class in <button> maybe navbar-toggle without the "r" at the end. I have typed the code as same with yours, but after changing the "toggler" to "toggle", it works.
Screenshot 2023-01-04 at 18 10 48

You might have missed the script tags in your base.html for the animation. I experienced the same issue since I didn't clone this repo, which solved my problem.

commented

@AtikRahman
Make sure you have all of the bootstrap links included in the base.html file.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>