I find it puzzling why the alignment between Bootstrap buttons within the Angular 2 CLI project is not working as expected.
To address this issue, I followed the instructions to create a new Angular 2 CLI app outlined here: https://angular.io/guide/quickstart
Afterwards, I added Bootstrap 4.1.3 to the package.json file:
{
"name": "my-test",
"version": "0.0.0",
...
}
Next, I included the Bootstrap styling in the angular.json file:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
...
}
Then, I proceeded to copy the buttons from the Bootstrap documentation by visiting: https://getbootstrap.com/docs/4.1/components/buttons/. These buttons were placed both inside and outside the Angular App for comparison purposes.
index.html
<!doctype html>
<html lang="en">
...
</html>
app.component.html
<div style="text-align:center">
...
</router-outlet>
The image below illustrates the issue - the buttons located outside the Angular App maintain proper spacing while those within the App do not. Despite similar styling, the discrepancy persists.
https://i.sstatic.net/ZemXo.png
Please note that although a workaround involving margin adjustment exists, my primary objective is to comprehend the underlying cause of this anomaly.