Despite my best efforts, I'm facing a puzzling issue as a newbie. I've meticulously set up the container > row > col structure in Bootstrap, but all my columns stubbornly remain on the same line. According to the Bootstrap guidelines, only 12 columns should be in each row, with any excess appearing on the next line.
Here's the HTML snippet causing me grief:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row m-3 p-3">
<div class="col text-center">akjsdajkshd
</div>
[...]
</div>
</div>
</body>
</html>
I've spent hours trying to troubleshoot this apparent error to no avail. Any assistance would be greatly appreciated. Click here for an image describing my dilemma