The last button in list of full-width buttons has longer width

[SuperBo]

This is about Bulma | the Docs.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.7.1]
My browser is: Opera

I am sure this issue is not a duplicate? Not sure!

Description

The last button in the list of full-width buttons is longer when comparing to the rest.

Steps to Reproduce

This error also occurs in the demo page of bulma.
https://bulma.io/documentation/elements/button/#displays

Expected behavior

The last button should have the same width as others in group.

Actual behavior

The last button has longer width than others in group.

[willhoyle]

Seems to be the following code found here:

...

.buttons
  align-items: center
  display: flex
  flex-wrap: wrap
  justify-content: flex-start
  .button
    margin-bottom: 0.5rem
    &:not(:last-child)
      margin-right: 0.5rem

...

[jgthms]

Yeah I use the “buttons” class in the docs for most examples.

It’s not a bug per se because it’s just for educational purposes. Here’s the only case where it’s not great because all buttons are full width.

[danielhep]

I am encountering this. Did you guys just fix it with a custom CSS class? It's pretty annoying, but I understand why it exists. I think that fullwidth items should not have the margin on them.

[danielhep]

Update: This can be fixed with the following.

.buttons .button:not(:last-child).is-fullwidth {
  margin-right: 0
}

[jgthms]

&:not(:last-child):not(.is-fullwidth)
  margin-right: 0.5rem

should work.

[frederikhors]

@jgthms are you adding this in the next release?