Twitter Bootstrap as a vertical sidebar

Question

I'm new to bootstrap, and I had a problem creating a navigation bar like bootstrap. I spent a lot of time on this, but could not understand. What I want looks like

Here is what I found here

<div class="span3 bs-docs-sidebar"> <ul class="nav nav-list bs-docs-sidenav affix"> <li class="active"><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdowns</a></li> <li class=""><a href="#buttonGroups"><i class="icon-chevron-right"></i> Button groups</a></li> <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> Button dropdowns</a></li> <li><a href="#navs"><i class="icon-chevron-right"></i> Navs</a></li> <li><a href="#navbar"><i class="icon-chevron-right"></i> Navbar</a></li> <li><a href="#breadcrumbs"><i class="icon-chevron-right"></i> Breadcrumbs</a></li> <li><a href="#pagination"><i class="icon-chevron-right"></i> Pagination</a></li> <li><a href="#labels-badges"><i class="icon-chevron-right"></i> Labels and badges</a></li> <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li> <li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li> <li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li> <li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li> <li><a href="#media"><i class="icon-chevron-right"></i> Media object</a></li> <li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li> </ul> 

Answer 1

Copy css bs-sidebar from docs.css from twitter bootstrap; add additional CSS, which is separately defined at the bottom of the same file as below:

CSS

 .bs-sidebar .nav > .active > ul { display: block; margin-bottom: 8px; } 

HTML

 <div class="bs-sidebar affix"> <ul class="nav bs-sidenav"> <li class="active"><a href="#">NAV1</a> <ul class="nav"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </li> <li><a href="#">NAV2</a></li> </ul> </div> 

Answer 2

Is nav bar bootstrap check → stackable section sure here ?

 <ul class="nav nav-tabs nav-stacked"> ... </ul> 

It looks like you asked ... have you tried this?