Recently, I created an Angular 8 project using the Angular CLI. In my project, I included "@angular/material": "^8.2.3" and "bootstrap": "4.3.1". For styling purposes, I imported various Bootstrap SCSS files into my style.scss file.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/badge";
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
I also added a simple example within my app-component.html file.
<div class="container">
<div class="row">
<div class="col-4">
<p>dfdf</p>
</div>
<div class="col-4">
<p>dfdf</p>
</div>
<div class="col-4">
<p>dfdf</p>
</div>
</div>
<div class="row">
<div class="col">
<p>dfdf</p>
</div>
<div class="col">
<p>dfdf</p>
</div>
<div class="col">
<p>dfdf</p>
</div>
</div>
</div>Unexpectedly, while both rows should display the same output, the first row breaks in the layout whereas the second row evenly distributes the columns in the container. It appears that I may have misunderstood the concept of col-x. Here is a screendump from Chrome OSX showing the issue.
Thank you all in advance for your assistance, and my apologies if this mistake seems like a beginner error.