I'm new to using Bootstrap and struggling with adding margins between elements. I tried adding mb-12 to the navbar class and mt-12 to the container class, but it doesn't seem to be working as expected. Everything else in my code is functioning correctly.
I've searched through the Bootstrap documentation and various forums, but haven't been able to find a solution yet.
<!DOCTYPE html>
<html>
<head>
<Title>The Title</Title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar mb-12 py-4 bg-warning">
<H1>Words Here</H1>
</nav>
<div class="container mt-12">
<div class="row">
<div class="col bg-light">Text</div>
<div class="col bg-primary">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
<div class="col bg-success">Text</div>
</div>
</div>
</body>
</html>