Bootstrap 4: Navs in Flex

I mentioned that flex box allows items to move inside a container. In the last post, I use buttons as an example to show how do those buttons move in the flex box. Today, I learned navs can also move in a flex box.

I would love to share my study note here.

Firstly, I copy the Bootstrap 4 starter template on the editor, and also put the base nav code in the body.

In order to show how navs move in the flex, I add a border outside the navs. The result shows a base nav bar inside a box.

Move in Row

Then, I want to add some space between each nav items, so I set“justify-content-around” value in the <ul>.

.The result:

You can also move the items to the right (justify-content-end) or to the center (justify-content-center).

Move Vertically

If I want to show my nav bar vertically, I can just simple set“flex-column”value.

The result:

Responsive Nav

If I want the nav bar change from the horizontal to vertical as the page changes to a smaller size, I can add“flex-sm-row align-items-center”next to the “flex-column” value.

The result: