Vertical Menu in Bootstrap

Question

Is there a way to create a vertical menu (not dropdown, entirely separate vertical menu on sidebar) by using any bootstrap class? I can create one using my css, but just want to

Answer 1

This doesn't quite yet look like what I want, but I accomplished something like this by stacking nav pills in the leftmost two spans. This is what my app's app/views/layouts/application.html.erb file looks like:

...
  
    
    

       ...
    
    

      
      
 
        

          

            <%= link_to "Home", root_path %>
          
          

            <%= link_to "Section A", section_a_path %>
          
          

            <%= link_to "Section B", section_b_path %>
          
        
      
      
 
        <%= flash_messages %>
        <%= yield :layout %> 
      
    
 
    ...
  

Now the stacked pills appear on the top left, below the navbar. When the user clicks on one of them, the corresponding page loads. From the point of view of application.html.erb, that page has the 10 rightmost spans available for it, but from the page's view, it has the full 12 spans available.

The button corresponding to the page currently being displayed is rendered as active, and the others as inactive. Specify the colours for active and inactive buttons in file app/assets/stylesheets/custom.css.scss (in this case, the colour for a disabled state is also defined):

@import "bootstrap";
...
$spray:       #81c9e2;
$grey_light:  #ffffdffffd;
...
.nav-pills {
    .inactive > a, .inactive > a:hover {
        background-color: $spray;
    }
    .disabled > a, .disabled > a:hover {
        background-color: $grey_light;
    }
}

The active pill's colour is not defined, so it appears as the default blue.

File custom.css.scss is included because of the line *= require_tree . in file app/assets/stylesheets/application.css.