Bulma columns are not working, how to fix them?
up vote
0
down vote
favorite
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?
html css responsive-design bulma
add a comment |
up vote
0
down vote
favorite
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?
html css responsive-design bulma
1
When I looked, it seemed to work fine. I did notice you did not include the Bulma CSS file. Is this the cause of your issue? (JSFiddle showing it working: jsfiddle.net/Bronzdragon/3cpx1bnj/2)
– Bronzdragon
Nov 9 at 15:34
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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?
html css responsive-design bulma
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?
<!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>
<!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>
html css responsive-design bulma
html css responsive-design bulma
edited Nov 9 at 15:26
asked Nov 9 at 15:19
tonkatata
5713
5713
1
When I looked, it seemed to work fine. I did notice you did not include the Bulma CSS file. Is this the cause of your issue? (JSFiddle showing it working: jsfiddle.net/Bronzdragon/3cpx1bnj/2)
– Bronzdragon
Nov 9 at 15:34
add a comment |
1
When I looked, it seemed to work fine. I did notice you did not include the Bulma CSS file. Is this the cause of your issue? (JSFiddle showing it working: jsfiddle.net/Bronzdragon/3cpx1bnj/2)
– Bronzdragon
Nov 9 at 15:34
1
1
When I looked, it seemed to work fine. I did notice you did not include the Bulma CSS file. Is this the cause of your issue? (JSFiddle showing it working: jsfiddle.net/Bronzdragon/3cpx1bnj/2)
– Bronzdragon
Nov 9 at 15:34
When I looked, it seemed to work fine. I did notice you did not include the Bulma CSS file. Is this the cause of your issue? (JSFiddle showing it working: jsfiddle.net/Bronzdragon/3cpx1bnj/2)
– Bronzdragon
Nov 9 at 15:34
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
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>
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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>
add a comment |
up vote
1
down vote
accepted
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>
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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>
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>
<!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>
<!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>
answered Nov 9 at 15:43
Sujil Maharjan
44738
44738
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53228481%2fbulma-columns-are-not-working-how-to-fix-them%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
When I looked, it seemed to work fine. I did notice you did not include the Bulma CSS file. Is this the cause of your issue? (JSFiddle showing it working: jsfiddle.net/Bronzdragon/3cpx1bnj/2)
– Bronzdragon
Nov 9 at 15:34