Search code examples
reactjsgatsbybulma

React with Gatsby and Bulma - Columns are not horizontal

I'm new to Bulma and I just copy & pasted from a tutorial but, I can't get the horizontal columns.

<Fragment>
          <Level mobile renderAs="nav">
            <Level.Item textAlignment="centered">
              <div>
                <p className="heading">tweets</p>
                <Heading renderAs="p">3,456</Heading>
              </div>
            </Level.Item>
            <Level.Item textAlignment="centered">
              <div>
                <p className="heading">following</p>
                <Heading renderAs="p">123</Heading>
              </div>
            </Level.Item>
            <Level.Item textAlignment="centered">
              <div>
                <p className="heading">followers</p>
                <Heading renderAs="p">456K</Heading>
              </div>
            </Level.Item>
            <Level.Item textAlignment="centered">
              <div>
                <p className="heading">likes</p>
                <Heading renderAs="p">789</Heading>
              </div>
            </Level.Item>
          </Level>
        </Fragment>

I just put it into a Fragment. It's supposed to work but it doesn't. Any idea? thanks

Solution

  • As Gatsby's documentation for Bulma shows:

    For starters, lets install all the required packages we’re going to need. yarn add bulma node-sass gatsby-plugin-sass

    Then add the gatsby-plugin-sass in to gatsby-config.js.

    You need to add and enable gatsby-plugin-sass. Once you've installed the packages and dependencies, add the following line to your gatsby-config.js:

    plugins: [`gatsby-plugin-sass`],

    Resources: