I am trying to build a Bulma website.
For the purpose of showing and sharing with you, consider the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some App</title>
<link rel="stylesheet" href="css/mystyles.css">
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<a class="navbar-item has-text-centered">Home</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
</div>
</div>
</nav>
<section class="section">
<div class="container" style="border: 3px solid red">
<div class="columns is-centered">
<div class="column" style="border: 3px solid purple">Auto</div>
<div class="column" style="border: 3px solid yellow">Auto</div>
<div class="column is-two-thirds" style="border: 3px solid green">is-two-thirds</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>When it comes to those columns, they seem not to be working. I wonder what I've missed along the way.
I want the three columns to be three actual columns with some height and some space between each other. However, they are "stacked".
How do I make them behave like real columns?
You have not included Bulma's CSS file in the code. That is why it does not apply the CSS properties. The code below worked for me perfectly. I only added the CDN reference to bulma's css
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some App</title>
<link rel="stylesheet" href="css/mystyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<a class="navbar-item has-text-centered">Home</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
<a class="navbar-item has-text-centered">Blah</a>
</div>
</div>
</nav>
<section class="section">
<div class="container" style="border: 3px solid red">
<div class="columns is-centered">
<div class="column" style="border: 3px solid purple">Auto</div>
<div class="column" style="border: 3px solid yellow">Auto</div>
<div class="column is-two-thirds" style="border: 3px solid green">is-two-thirds</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>