Use angular bootstrap to Style Component served from Router Outlet

Question

I want to use angular bootstrap to style a component served from router outlet.

In normal bootstrap you style by adding classes to an element like so:

<div id="main-layout" class="row p-3">
</div>

I want to do this same thing but I want to style the output of <router-outlet></router-outlet> I want to do this because I want to employ a grid layout which features static content on the sides, and dynamic content which changes based on the route.

I've confirmed you can style and individual component in this way like this:

<div id="main-layout" class="row p-3">
  <section class="col-12 col-xm-12 col-md-3">hi</section>
  <app-movies class="col-12 col-xm-12 col-md-6"></app-movies>
  <section class="col-12 col-xm-12 col-md-3">lo</section>
</div>

But if I include a router and substitute <app-movies></app-movies> with <router-outlet></router-outlet> the bootstrap styling no longer work. (See below):

<div id="main-layout" class="row p-3">
  <section class="col-12 col-xm-12 col-md-3">hi</section>
  <router-outlet class="col-12 col-xm-12 col-md-6"></router-outlet>
  <section class="col-12 col-xm-12 col-md-3">lo</section>
</div>

When I try this the component that the router renders doesn't fit inside the alotted space provided by the router.

Is there anyway to use a bootstrap type grid system for this application in which the classes provided to the router are adhered to by the served component? If not, do you have any suggestions for getting a similar implimentation?

note: I like this implimentation because it prevents me from having to style each and every component that the router might serve and instead determines the size based on the style I give the router-outlet component. Thanks all.

Here is my routing.module.ts incase you need it:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MoviesComponent } from './movies/movies.component';
import { MovieReviewComponent } from './movie-review/movie-review.component';

const routes: Routes = [
  { path: '', component: MoviesComponent },
  { path: 'movies', component: MoviesComponent },
  { path: 'movies/:title/:year', component: MovieReviewComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

As you can find in your own DOM tree, any component that is injected into the app using router outlet, gets injected as a sibling of the router and not as a child.

Try to place your router outlet inside a div and give your classes to the div instead.