Why the first element of this gird has more height then others?

[ARQSoft]

I am learning the bootstrap and I came across this problem I am using the bootstrap grid for the test purposes I made three buttons and place them inside the gird but the first button has more height than the other two. Somehow the first button is always getting more height.

Here is the link for the CodePen

[lasjorg]

The two buttons have some margin-top the first do not have.

.btn-block+.btn-block {
  margin-top: .5rem;
}

This is from the scss file.

//
// Block button
//

.btn-block {
  display: block;
  width: 100%;

  // Vertically space out multiple block buttons
  + .btn-block {
    margin-top: $btn-block-spacing-y;
  }
}

It seems that the margin is meant for block-level buttons (full width) that are stacked on top of each other. But because you have them inside a flexbox container they are laid out side by side instead of stacked so the margin doesn’t really make sense.

---

Edit: TL;DR you can just remove the btn-block class from the buttons.