Upgraded from Angular 5 to Angular 6, Bootstrap button styles have no spacing - css

Question

Recently, we upgraded from Angular 5 to Angular 6.
The issue: Bootstrap button styles now have no margin spacing between them.
Bootstrap Version: 3.3.7
For example, if in the html you do something like this.
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
Before we updated, these buttons would have margin space between each.
Just curious if there is something we can update that would fix this or a global CSS style that can be used.

Answer 1

In my project I was able to restore default white spaces between Bootstrap buttons, by setting preserveWhitespaces to true in main.ts file:
platformBrowserDynamic()
.bootstrapModule(AppModule, { preserveWhitespaces: true})
.catch(err => console.log(err));
Found it in this place

Answer 2

ConnorsFan's answer link is the answer to our issue.
Angular 6 by default sets the angularCompilerOption: preserveWhitespaces for the application to false.

Answer 3

To add to the marked answer, this issue is caused by the preserveWhitespaces setting.
what's really happening behind the scenes is your template code, for example
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
is getting all the whitespace removed. which also removes the line break at the end of each button element. It's the line break that gives that extra space, not margin between each button.
So this shows more clearly why the buttons are sticking together.
<div><button class="btn btn-success">Success</button><button class="btn btn-info">Info</button><button class="btn btn-cancel">Cancel</button></div>
You can apply the fix as suggestion globally or you can resolve the problem on specific components if needed. https://angular.io/api/core/Component You'll notice that in the docs for #components you can provide an option to turn on/off this feature for that component only.
Another solution as suggested in comments would be to globally add marginto all .btn classes, however this would have the reverse side effect happening of the option ever switches again (giving to much margin between buttons instead of the natural space)
Final note, this is an HTML/DOM side effect, not Angular or CSS, you'll be able to replicate this effect with pretty much any inline elements by removing/adding the linebreak/spaces between each element.

Answer 4

Add the btn-toolbar class to the div to get space margin between the buttons. Like this:
<div class="btn-toolbar">
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>