Positioning nav-tabs with Flexbox

In this recipe, we will look into using Flexbox utility classes to easily align nav-tabs. Doing this is a simple task. However, to extend the recipe and make it more useful, we have also included a lot of content in each of the nav-tabs. Thus, in this recipe, besides demonstrating how to align nav-tabs, we will look into splitting a complex layout into several partials, dealing with different heights on tabs, and using a few simple CSS declarations to modify the look of our nav-tab items.

Getting ready

To preview the completed recipe, navigate to chapter8/complete/app through your console. Run the harp server command. Open your browser and visit localhost:9000/recipe08-07. Click on different tabs and try resizing the viewport. Look at the way that tab content responds to changes in viewport size.

How to do it…

1. In the chapter8/start/app folder, open the file titled recipe08-07.ejs and paste the following code in it:

<%- partial("partial/_0807-01-recipe-intro...