.pug file is not adding spacing between element. Causing a margin issue with Bootstrap

Question

The main question is, is there a way to add a space between the html div's generated by a.pug file?

I have been converting a collogues HTML into Pugs format, and everything transitioned fine except for one small piece. A group of buttons, lost all spacing between each.

After a lot of examining of both the original HTML and the generated HTML, I had noticed the only main difference was spacing between each button element. So I tried manually changing it so they had the spaces. Lo and behold the margins showed up.

While this sounds like it is really unexpected behavior or a bug from Bootstrap's side of things to me, I'm hoping there is a work around that lets me add the spaces to the pug file.

Here is the origional HTML:

<div class="my-3 text-center" role="group">
    <button class="btn btn-primary" id="saveBtn" type="button" disabled="">Save</button>
    <button class="btn btn-danger" id="undoChangesBtn" type="button" disabled="">Undo Changes</button>
    <button class="btn btn-secondary" id="viewSignPage" type="button">View Sign Page</button>
    <button class="btn btn-secondary" id="viewDataPage" type="button">View Data Page</button>
</div>

Here is the pug I created from it:

.my-3.text-center(role="group")
    button.btn.btn-primary#saveBtn(type="button" disabled) Save
    button.btn.btn-danger#undoChangesBtn(type="button" disabled) Undo Changes
    button.btn.btn-secondary#viewSignPage(type="button") View Sign Page
    button.btn.btn-secondary#viewDataPage(type="button") View Data Page

The HTML it generates that has an issue:

<div class="my-3 text-center" role="group"><button class="btn btn-primary" id="saveBtn" type="button" disabled="">Save</button><button class="btn btn-danger" id="undoChangesBtn" type="button" disabled="">Undo Changes</button><button class="btn btn-secondary" id="viewSignPage" type="button">View Sign Page </button><button class="btn btn-secondary" id="viewDataPage" type="button">View Data Page</button></div>

Answer 1

Turns out there is a simple fix. You just need to add a margin class to each button. Here is an example of how the buttons are now formatted in pug

button.btn.btn-primary.m-1#saveBtn(type="button" disabled) Save