button-group rely on whitespace for inbetween spacing

[stepandersen]

Buttons in button-group (or just two sibling buttons really) are rendered with spacing inbetween because there is a white-space character there. (In code that white-space is actually a line-break and maybe a couple of tabs.)

<div class="button-group">
  <button class="btn btn-primary" type="button">Primary</button>
  <button class="btn btn-secondary" type="button">Secondary</button>
  <button class="btn btn-danger" type="button">Danger</button>
</div>

Minifiers remove these white-spaces and the buttons are rendered like:

Some potential solutions:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/

[Akswii]

So intended behavior should be no white-space and fix "air" between the buttons with margin?

[stepandersen]

Yes, the buttons should have the same spacing inbetween regardless of white-spaces.
I suppose margin-right and margin-left makes the most sense, even though DesignGuide doesn't recommend right aligned buttons.

Something like this perhaps:

.button-group {
  display: flex;
}
.button-group .btn {
  margin-left: 2px;
  margin-right: 2px;
}
.button-group .btn:first-child {
  margin-left: 0;
}
.button-group .btn:last-child {
  margin-right: 0;
}

[Akswii]

We see the need to support compiled templates, and like your solution. But need to add flex-wrap:wrap and consider if we are going to solve this issue for buttons not wrapped in a .button-group.