Skip to main content

Posts

Showing posts with the label nav flex

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 cha...