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?










share|improve this question




















  • 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

















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?










share|improve this question




















  • 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















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?










share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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
















  • 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














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>








share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














     

    draft saved


    draft discarded


















    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

























    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>








    share|improve this answer

























      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>








      share|improve this answer























        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>








        share|improve this answer












        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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 9 at 15:43









        Sujil Maharjan

        44738




        44738






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Schultheiß

            Liste der Kulturdenkmale in Wilsdruff

            Android Play Services Check