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.

Get Bootstrap 4 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.