issue with button in html bootstrap - html

Question

I'm following this video tutorial https://www.youtube.com/watch?v=36jRXMsIFuA
I am using bootstrap 5.0.0 beta 1
My code is following:
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
USD
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>
And it looks like this, and when I click the button there is no dropdown. Layout is messed up as well.
my website
Compared to tutorial:
tutorial picture

Answer 1

The tutorial's using Bootstrap 4.3.1, the 4th version rather than the newest 5.0. If you switch to v4, your dropdown would works. Since a major update of a framework (increase of the first version number) is always not compatible to below versions.
About the layout, there's a mistake in your code. You need to put your <h2> tag within the tag with a background color and a style, the above <div> tag.
So, change the lines below:
<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>
To:
<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
USD
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
Sign In
Create an Account
</p>
</div>
</div>
</div>
</header>