Now that we have Bootstrap loaded in our application, let's make the blog post page in our app responsively scale all the way down to mobile phone-sized devices:

1. Here is a simple example of a responsive application layout in our /src/app/app.component.html template:

<nav class="container-fluid">
  <a routerLink="/posts">Posts</a>
  <a routerLink="/authors">Authors</a>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>

2. Next, we will add rows and columns to our /src/app/posts/posts.component.html template to organize the content on our page:

<div class="row">
  <div class="col-3">
    <p>Sidebar</p>
  </div>
  <div class="col-9">
    <h3>Blog Posts</h3>
    <p>Blog Post 1</p>
    <p>Blog Post 2</p>
    <p>Blog Post 3</p>
  </div>
</div>

3. Finally, we will need to vary our column width, based on the resolution of the user's device. We can add this functionality by adding size modifiers to our column classes:

<div class="row">
  <div class="col-3 col-sm-12">
    <p>Sidebar</p>
  </div>
  <div class="col-9 col-sm-12">
    <h3>Blog Posts</h3>
    <p>Blog Post 1</p>
    <p>Blog Post 2</p>
    <p>Blog Post 3</p>
  </div>
</div>

Now, our blog page will dynamically scale the content at different resolutions and will change layout on small screen resolutions, such as mobile devices.