One puzzling issue arises: can a space be added between the html div's created by a .pug file?
Converting HTML to Pugs has been smooth sailing for the most part, except for one hiccup. A set of buttons suddenly lost their spacing.
Upon closer inspection of both the original and generated HTML, the missing link became apparent – the absence of spaces between each button element. Adjusting this manually brought back the margins.
While it may seem like an unexpected anomaly or even a Bootstrap bug to some, I am eager to find a solution that allows me to integrate the necessary spaces into the pug file.
Below is the original 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>
And here is the corresponding pug code:
.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 resulting HTML with the spacing 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>