How to Align Horizontal Navs with Space Around or Space Between

So you have a navbar, and you want the spacing to be based on the Space Around or Space Between concept.

You select one of those on the navbar-nav element which contains the a tags, and nothing changes. What to do?

The answer lies in that the container of the navbar-nav is a flex element, which means navbar-nav is not the full width, it is only as wide as its content. So you have to make navbar-nav wider.

So… the answer is to set width 100% on the navbar-nav!

Then it will fill the available width, and the links inside can be spaced out with the around or between property.

Happy Navigating,
Antony.