Bootstrap - navbar toogler

Dzień dobry,
zacząłem się uczyć bootstrapa, pierwszą rzeczą jaką chciałem zrobić to responsywny navbar. Jednak mam pewien problem jeśli chodzi o tooglera. Oczywiście wszystko robiłem według różnych tutoriali, wszędzie toogler jest robiony podobnie, jednak u mnie niestety działa on inaczej niż powinien...
Mianowicie coś się dzieje kiedy rozmiar okna zostaje zmniejszony tak, że menu powinno się zwinąć. Niestety menu się nie zwija. Pojawia się ten button, który po kliknięciu powinien rozwinąć z powrotem całe menu, jednak coś z nim jest nie tak. To menu zamiast się zwinąć, po prostu dalej jest widoczne (zdjęcie w załączniku).
A ja chcę żeby to menu było widoczne dopiero po kliknięciu buttona.
Dodatkowo jeśli teraz naciśnie się buttona, który teoretycznie powinien to menu zwinąć skoro jest automatycznie rozwinięte, to zwija je na ułamek sekundy i od razu sie znowu pojawia. Dopiero za drugim razem wszystko działa dobrze i jeśli teraz się zwiększy rozmiar okna i znowu zmniejszy, to tym razem menu się nie rozwinie automatycznie tylko tak jak powinno to być- po naciśnięciu buttona. Ale kiedy odświeżymy stronę to znowu jest to samo. Macie może jakieś propozycje?

Tutaj kod mojego navbara:

<nav class="navbar navbar-light bg-warning navbar-expand-md">
			<div class=container-fluid>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu_glowne">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div class="collpase navbar-collapse" id="menu_glowne">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item">
							<a class="nav-link" href=""> Strona główna </a>
						</li>
					</ul>
				</div>
			</div>
		</nav>

Według dokumentacji 4.3, powinno być tak:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

@czysteskarpety: sprawdziłem podobny kod właśnie i działa. Jednak ja kompletnie nie ogarniam czemu mój kod nie działa? Spójrzcie na to, czy ja jestem ślepy i nie widzę gdzieś błędu?

Poniższy kod to ten mój i nie działa prawidłowo:

<nav class="navbar navbar-expand-md navbar-light bg-warning">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu_glowne">
					<span class="navbar-toggler-icon"></span>
				</button>
				<a class="navbar-brand" href="#">Navbar</a>

				<div class="collpase navbar-collapse" id="menu_glowne">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item">
							<a class="nav-link" href=""> Strona główna </a>
						</li>
					</ul>
				</div>
		</nav>

A ten kod to jest ten wzięty z dokumentacji ale przerobiony pod ten mój i działa prawidłowo

<nav class="navbar navbar-expand-md navbar-light bg-warning">
  				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu_glowne">
    				<span class="navbar-toggler-icon"></span>
  				</button>
  				<a class="navbar-brand" href="#">Navbar</a>

  				<div class="collapse navbar-collapse" id="menu_glowne">
    				<ul class="navbar-nav ml-auto">
      					<li class="nav-item">
        					<a class="nav-link" href=""> Strona główna </a>
      					</li>
    				</ul>
  				</div>
			</nav>

To gdzie mam błąd?

Tu.

<div class="collpase navbar-collapse" id="menu_glowne">