Good news! Since we set up our Harp project in Chapter 2 , Using Bootstrap Build Tools, we can reuse a bunch of that code now for our blog home page. There's no need to make any updates to the JSON files and header or footer partials. The only file we need to make changes to is index.ejs. Open the file up in a text editor and paste the following code to get started:

<div class="container"> 
  <!-- page title //--> 
  <div class="row m-t-3"> 
    <div class="col-md-12"> 
      <h1>Blog</h1> 
    </div> 
  </div> 
  <!-- page body //--> 
  <div class="row m-t-3"> 
    <div class="col-md-8"> 
      <!-- blog posts //--> 
    </div> 
    <div class="col-md-4"> 
      <!-- sidebar //--> 
    </div> 
  </div> 
  <!-- mailing list //--> 
  <div class="row m-t-3"> 
    <div class="col-md-12"> 
      <!-- form //--> 
    </div> 
  </div> 
</div> 

There are a few different things going on here so let me break them all down for you:

The basic layout of the grid for our blog home page is now complete. However, let's revisit those new CSS classes from our layout that I added to the row <div>s.

One of the new utilities that has been added in Bootstrap 4 is spacing classes. These are great as they add an easy, modular way to add extra vertical spacing to your layouts without having to write custom CSS classes for each region. Spacing classes can be applied to both the CSS margin and padding properties. The basic pattern for defining the class is as follows:

{property}-{sides}-{size} 

Let's break down how this works in more detail:

To better understand this concept, let's construct a few spacer classes. Let's say that we want to add some top margin to a row with a size value of 1. Our class would look like this:

.m-t-1 

Applied to the actual row, <div>, the class would look like this:

<div class="row m-t-1"> 

For a second example, let's say we want to add some left padding to a div with a value of 2. That combination would look like this when combined with a row <div>:

<div class="row p-l-2"> 

Are you starting to see how easy it is to add some spacing around your layout and components?

Now that you understand how these classes work, let's take a look at our blog home page template again. In that case, our <div>s looks like this:

<div class="row m-t-3"> 

On three sections of the template, I've decided to use these classes and they are all top margin with a size value of three. It's a good idea to try and keep these consistent as it will result in a visually appealing layout when you are done. It also makes it a little easier to do the math when you are setting up your page. Now that we've gone over the entire home page layout, we need to test it.

Let's test it out in the browser to make sure it's looking the way we want. Before we can do that we'll need to compile our code with Harp. Open the Terminal back up and navigate to the project directory for this chapter's code that we created. Run the harp compile command, here it is again in case you forgot:

$ harp compile

That should run without any errors; then, we can start-up the web server to view our page. Here's the command again to run the web server:

$ harp server

Now that the server has launched, head to a web browser and enter http://localhost:9000 in the URL bar to bring up the blog home page. Here's what your page should look like:

Uh oh, that doesn't look quite right. You can see the page title but we can't see any of our columns. Oh yeah! We need to fill in some content so the columns are revealed. Let's add in some dummy text for demo purposes. In later chapters, I'll get into coding the actual components we want to see on this page. This chapter is just about setting up our layout.

Head back to index.ejs in your text editor and let's add some dummy text. Go to the first column of the main content area first and enter something like this:

<div class="col-md-8"> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div> 

If you're looking for a quick way to get filler text in HTML format, visit http://html-ipsum.com/ .

Next, go to the sidebar column <div> and add the same paragraph of text, like so:

<div class="col-md-4"> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div> 

Finally, drop down to the mailing list <div> and add the same paragraph of content again. It should look like this:

<div class="col-md-12"> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div> 

Now that we've added some actual content to our page body, let's recompile the project and launch the web server again:

Once the server is up and running, return to your browser and refresh the page. Now your layout should look like this:

Yay! We can now see our columns and the dummy text that we just added. The page may not be much to look at right now, but what's important is to verify that your columns are laid out correctly.

We need to consider what will happen to our layout on mobile devices and smaller screen resolutions. I used the medium grid layout class, so any device that is smaller than 720 pixels will have an adjusted layout. Resize your browser window, making it smaller to trigger the media query, and you'll see that all of the columns will be resized to 100% width of the container. Here's what it looks like:

I'm going to keep our blog layout pretty minimal so I'm okay with this layout. In this format, the sidebar will slide in under the main blog feed of posts. I'm actually not that crazy about this design, so I'm just going to hide the sidebar altogether when you view the blog on a smaller device.