Solution 1 :

The only problem is the navbar is missing the navbar-expand class..

<nav class="navbar navbar-light navbar-expand bg-light">

The Bootstrap navbar is mobile-first, so by default it’s collapsed. As shown in the docs…

“Navbars require a wrapping .navbar with
.navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and
color scheme classes.”

Problem :

I am having difficulty to get Bootstrap to display my nav options horizontally (i.e. similar to examples shown in the Bootstrap docs at

Here is the minimal code in Codepen for my page :

Just to be clear: In my Codepen example, Home Features Pricing should appear horizontally, not vertically.

I think the problem might be to do with my use of flex-column in <body>. But I cannot remove that without breaking other items in my design (for example the sticky footer – using flex for a sticky footer is much cleaner than the hacky alternative of setting fixed height etc. etc.).

So I’m a bit stuck really !