Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 Vertical Nav bar

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?

like image 237
Smack Avatar asked Apr 03 '14 21:04

Smack


People also ask

How do you align a navbar in 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.

What are the different types of navigation bars in Bootstrap?

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

What is the vertical menu in Bootstrap 4?

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.

Is it possible to add side navigation in Bootstrap?

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.


2 Answers

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

like image 170
Samuel De Backer Avatar answered Nov 15 '22 07:11

Samuel De Backer


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>
like image 23
Segun Kess Avatar answered Nov 15 '22 07:11

Segun Kess