MEAN Cookbook

How to do it...

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> ...