O'Reilly logo

Bootstrap 4 – Responsive Web Design by Jason Marah, Benjamin Jakobus, Matt Lambert, Silvio Moreto

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Coding the blog home page

Now that you have a good grasp of how to use the Bootstrap 4 grid, we're going to code up our blog home page. This page will include a feed of posts, a sidebar, and a newsletter sign-up form section at the bottom of the page. Let's start by taking the code we wrote in Chapter 2 , Using Bootstrap Build Tools for our hello world! template and duplicating the entire directory. Rename the folder Chapter 4: Working with Layouts or Bootstrap Layout.

Note

Remember, we are using the regular grid moving forward, not the Flexbox grid. Make sure you are using the default build of bootstrap.min.css. If you carry out a simple duplication of the second chapter's code then you'll have the right file configuration.

Writing the index.ejs ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required