CODEWITHSUNDEEP
multiple-columnsbootstrap-5
prainbow
prainbow

Reputation: 13

Bootstrap 5: Row of columns line up horizontally, or stack vertically, in different environments

Experimenting with Bootstrap for a CS50 assignment. Cannot get three columns to cross page horizontally.

col1 col2 col3

Instead they insist on stacking vertically.

col1
col2
col3

I took the code directly from the W3 grid tutorial for Bootstrap 5 (https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php). On that page, under "Three Equal Columns," "Example", "Tryit Yourself", the code does exactly what I want. In VS Code (downloaded and running locally) there's some impediment unknown to me. Where should I be looking to troubleshoot?

Both environments link, in their html head, to the same version of Bootstrap's stylesheet (bootstrap.min.css) and script (bootstrap.bundle.min.js) via cdn.jsdelivr.net. In their bodies, both set up a Bootstrap container in which to wrap a row, in which to wrap three columns.

My simple test code:

<main>
 <div class="container">
  <div class="row">
   <div class="col">col 1</div>
   <div class="col">col 2</div>
   <div class="col">col 3</div>
  </div>
 </div>
</main>

I can't find anything wrong with that. Nevertheless Live Preview in VS Code presents three columns stacked. I've spent two workdays searching for a solution, and none of the fixes in similar posts has worked for me.

Upvotes: 0

Views: 651

Answers (1)

Brandonjgs
Brandonjgs

Reputation: 382

Your reference have an error, try with this:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

 <div class="container">
  <div class="row">
   <div class="col">col 1</div>
   <div class="col">col 2</div>
   <div class="col">col 3</div>
  </div>
 </div>

</body>

</html>

Upvotes: 1

Related Questions