I want to create navigation bar [vertical] with bootstrap 3. I tried this but it didn't work.
<ul class="nav nav-pils nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
I tried a lot of examples but it is all with old bootstrap. How to create that navigation with new bootstrap?
This Bootstrap class adjusts the vertical alignment and collapses the form in smaller viewports. Forms within navbars also require one of the alignment classes to align the form controls within the navbar (see alignment below). You can use .navbar-left or .navbar-right to align components within the navbar.
1 Navigation Bars. With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. ... 2 Inverted Navigation Bar 3 Navigation Bar With Dropdown. Navigation bars can also hold dropdown menus. 4 Right-Aligned Navigation Bar. ... 5 Navbar Buttons 6 Navbar Forms. ... 7 Navbar Text. ... 8 Fixed Navigation Bar. ...
In the Bootstrap4 vertical menu known as a sidebar. The vertical menu in bootstrap works fixed and responsive as per requirement. The vertical menu can place the left or right side of the web pages. But the default vertical menu placed on the left side.
Official Bootstrap documentation does not contain a Side Navbar component, but it's possible to create fully-functional side navigation from the existing components, and with the little help of Material Design for Bootstrap - free and powerfull UI KIT. The Side Navbar will disappear when the screen size will be smaller than 992px.
nav-pills
class needs two l
:
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
http://getbootstrap.com/components/#nav-pills
I came late to the party but in case you just got here and you would like to add toggle to your vertical nav:
<nav class="list-group">
<ul class="nav">
<li>
<a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" class="list-group-item">Item 1
</a>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>
<a href="#" class="list-group-item">
Item 2
</a>
</li>
<li>
<a href="#" class="list-group-item">
Item 3
</a>
</li>
</ul>
</li>
</ul>
</nav>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With