Angular HTML Bootstrap Badges

Question

I'm trying to use Bootstrap 5's badges in my angular application but they don't seem to work correctly together.

When using Angular 13, the html in the app-root appears grouped together without formatting, which makes the badges appear without spaces.

However in the index.html of my application if I put the badges there, it renders them correctly with spaces.

Does anyone have any suggestions to how to fix this?

In the attached image the top set of badges is in index.html, and the bottom in app.component.html

The html for the index.html renders like

<div class="">
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>
</div>

And the html for the app.component.html renders like

<div _ngcontent-ixi-c76=""><span _ngcontent-ixi-c76="" class="badge text-bg-primary">Primary</span><span _ngcontent-ixi-c76="" class="badge text-bg-secondary">Secondary</span><span _ngcontent-ixi-c76="" class="badge text-bg-success">Success</span><span _ngcontent-ixi-c76="" class="badge text-bg-danger">Danger</span><span _ngcontent-ixi-c76="" class="badge text-bg-warning">Warning</span><span _ngcontent-ixi-c76="" class="badge text-bg-info">Info</span><span _ngcontent-ixi-c76="" class="badge text-bg-light">Light</span><span _ngcontent-ixi-c76="" class="badge text-bg-dark">Dark</span></div>

As you can see it adds all the angular ng tags. However even when I remove them in the editor it still shows them together.

Only when the html has new lines do the badges work properly.

Answer 1

It seems that's how display: inline elements work, which is what <span> is.

See here for a list of block and span elements.

You can test this by changing them to <div> elements and adding the d-inline class and you will get the same result.

The new line or any whitespace between them is what creates the spacing you are looking for.

My suggestion would be to add some default margin styles to your global stylesheet for the badges.

.badge { margin-right: 4px; }