Bootstrap navbar used to reverse orientation of a list

Bootstrap navbar is awesome for adding a navigation line and having it collapse to a button for a small screen. However, navbar is also useful when you don’t want it to collapse, but, instead, to change its orientation from horizontal to vertical and back when the screen size changes.

Here is the code to acheive this.

<style>
li {
margin: 5px;
}
</style>
<nav class=”navbar navbar-expand-sm navbar-light”>

<div class=”container”>
<ul class=”flex navbar-nav”>
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 3
</li>
<li>
item 4
</li>
</ul>
</div>
</nav>

In this case, the orientation changes when the screen reaches the small, “sm”, size point.

Collapsing to hamburger buttons are great. But sometimes we have navigation lines under other navigation lines and more than one hamburger button is just confusing. In this case, it is just better to convert the navigation from horizontal to vertical.

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *