Bulma: No Gap between columns, $column-gap changes inner column padding

[mindbits]

Overview of the problem

This is about the Bulma CSS framework

Description

Following the docs, there is a gap between the columns. But copying and pasting from the docs shows no gap.

Also, $column-gap should change the gap. But $column-gap changes the inner padding of a column instead.

Steps to Reproduce / Actual behavior

https://jsfiddle.net/nueoynta - Default Bulma CSS, HTML copied from https://bulma.io/documentation/columns/basics/ but => no gap between the columns

https://jsfiddle.net/gu5syq6h - $column-gap of eg 2rem changes the inner padding of the column but still no padding between columns

I just copy and paste from the docs, so I have no idea what is wrong and I assume I am not the only one having this problem?

[jgthms]

You’re supposed to put content inside the columns. They all have padding. The background covers the inner padding, but the padding will give space to the content.

[mindbits]

The html was copied from the docs.

So what would be the correct code then to show the columns with the correct gap?

[ysfscream]

@mindbits I have same problem. Did you solve it?

[mindbits]

Yes,

the example is wrong and misleading in the docs. It's also unexpected behavior compared to other frameworks.

Try it like this and hopefully the docs will get updated at one point as I am sure that this is a frustrating experience for many other developers as well who want to switch to Bulma:

<div class="columns">
      <div class="column">
         <div class="red">1</div>
      </div>
      <div class="column">
         <div class="green">1</div>
      </div>
      <div class="column">
         <div class="red">1</div>
      </div>
      <div class="column">
         <div class="green">1</div>
      </div>
</div>

[ysfscream]

@mindbits 😵 ... Thank you very much! 🙏

[codeofsumit]

ahhhh!!! Yes this is indeed very confusing!
Thanks @mindbits

[webwakko]

Muchos gracias for this answer.. this fixed the no gap issue for me !
fyi : I've forked the example page and added the wrapping div.
I hope they pick up the fix soon..

[scheinercc]

@jgthms this could be reopened based on @mindbits comment above.

Checking: https://bulma.io/documentation/columns/responsiveness/#mobile-columns

The documentation shows

<div class="column">1</div>

but the code itself used in the example is

<div class="column">
    <p class="bd-notification is-primary">1</p>
</div>

This will make the code samples more verbose while reading, but less irritating while copying.

[james-wasson]

@scheinercc .bd-notification is not a bulma class.
I'm not sure why anyone would think the .column class would be colored but it seems obvious to me that the colors are just for show.

P.S. - The inspect tool is a life saver. I often use it rather than following the docs (of any framework) because it gives a more verbose representation of the HTML.

[scheinercc]

@jgthms you reckon this could be reopened based on @mindbits comment above?

Checking: https://bulma.io/documentation/columns/responsiveness/#mobile-columns

The documentation shows

<div class="column">1</div>

but the code itself used in the example is

<div class="column">
    <p class="bd-notification is-primary">1</p>
</div>

This will make the code samples more verbose while reading, but less irritating while copying.

[eyalev]

@scheinercc .bd-notification is not a bulma class.
I'm not sure why anyone would think the .column class would be colored but it seems obvious to me that the colors are just for show.

I thought so..
I don't have a lot of front-end experience, but I found that to be confusing as well.