Twitter Bootstrap tabs not working: when I click on them nothing happens

Question

I am trying to implement Twitter Bootstrap tabs in the following code, but it does not seem to work. The tabs get displayed, but when I click on them nothing happens. Below

Answer 1

The key elements include:

1. the class="nav nav-tabs" and data-tabs="tabs" of ul
2. the data-toggle="tab" and href="#orange" of the a
3. the class="tab-content" of the div of the content
4. the class="tab-pane" and id of the div of the items

The complete code is as below:

    
Red
    
Orange
    
Yellow
    
Green
    
Blue


    

        
Red
        
red red red red red red
    
    

        
Orange
        
orange orange orange orange orange
    
    

        
Yellow
        
yellow yellow yellow yellow yellow
    
    

        
Green
        
green green green green green
    
    

        
Blue
        
blue blue blue blue blue