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

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

ConnorsFan's answer link is the answer to our issue.

Angular 6 by default sets the angularCompilerOption: preserveWhitespaces for the application to false.

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.