Bootstrap 4 – Responsive Web Design

Designing a single blog post

Let's start by designing the layout and content for a single blog post. At the very least, a blog post should have: a title, post-meta, description, and a read more link. Open up the flexbox.ejs file and replace the first column's code with this new code:

<div class="col-md-4 child"> 
  <h3><a href="#">Blog Post Title</a></h3> 
  <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
  <p><a href="#">Read More</a></p> 
</div> 

Let me breakdown what is happening here:

• I've added an <h3> tag with a link for the post title
• I've added ...