Bootstrap row class not propagating down to components in Angular
I had the same issue. Here is the way I solved it.
Original app.component.html:
<div class="container-fluid"> <div class="row"> <app-one></app-one> <app-two></app-two> </div></div>Original one.component.html:
<div class="col-9"> <p>One</p></div>Original two.component.html:
<div class="col-3"> <p>Two</p></div>I moved 'col' divs from one and two components to the app component:
New app.component.html:
<div class="container-fluid"> <div class="row"> <div class="col-9"> <app-one></app-one> </div> <div class="col-3"> <app-two></app-two> </div> </div></div>New one.component.html:
<p>One</p>New two.component.html:
<p>Two</p>
For css to be visible in all your components, add it directly to the index.html file, or to app.component.css.
(I'm assuming that your Angular2 project was generated with angular-cli and the files follow the standard names)
...About the extra margin, try checking app.component.html. Maybe there's a container div around it. Also check index.html itself