CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Jake R.
Jake R.

Reputation: 59

Tab panes in Bootstrap

I am using Bootstrap tabs and the the content for the third tab is not showing up in the third tab pane, instead it is showing under the content for the 1st and 2nd panes. I don't know if I have not properly nested my html, or if there is an issue with my navigation bar. I am new to Bootstrap. Any help is appreciated.

Here is the html:

<body role = "document">

<div class="container" >
    <div class="row">
        <div class="col-md-12">
            <h2>Presidential Trivia</h2> </hr>
            <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#tab1" aria-controls="home" data-toggle="tab">Quiz 1</a></li>
            <li role="presentation"><a href="#tab2" aria-controls="profile" data-toggle="tab">Quiz 2</a></li>
            <li role="presentation"><a href="#tab3" aria-controls="quiz3"   data-toggle="tab">Quiz 3</a></li>
                </ul>
            </div>
    </div>


<!-- tab sections -->

    <div class="tab-content">
        <div class="tab-pane active" id="tab1"> 
            <div class="row" style="height:100px">
            </div>  
            <div class="row">
                <div class="col-md-4"></div>    
                    <div class="col-md-4">
                        <div id='main'  class="panel panel-info">
                        <div id='question1' class="panel-body">
                        </div>
                        </div>
                        <div class="progress">
                            <div id="progressBar1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">

                            </div>
                        </div>

                        <div id='buttons'>
                                <button id='prev' class='btn'>Back</button>                             
                                <button id='next' class='btn pull-right'>Next</button><br><br>
                                <button id='restart' class='btn'>Start Over?</button>                               
                        </div>

                    </div>
                <div class="col-md-4"></div>    
            </div>
        </div>      
        <div class="tab-pane" id="tab2">
            <div class="row" style="height:100px">
            </div>  
                <div class="row">
                    <div class="col-md-4"></div>    
                        <div class="col-md-4">
                            <div id='main2' class="panel panel-info">
                            <div id='question2' class="panel-body">
                            </div>
                            </div>
                            <div class="progress">
                                <div id="progressBar2" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
                                </div>
                            </div>                          
                            <div id='buttons'>
                                    <button id='prev2' class='btn'>Back</button>                                
                                    <button id='next2' class='btn pull-right'>Next</button><br><br>
                                    <button id='restart2' class='btn'>Start Over?</button>                              
                            </div>                          
                        </div>
                    <div class="col-md-4"></div>    
                </div>
            </div>  
        </div>
        <div class="tab-pane" id="tab3">        
            <div class="row" style="height:100px">
            </div>  
                <div class="row">
                    <div class="col-md-4"></div>    
                        <div class="col-md-4">

                            <div id='main3' class="panel panel-info">
                            <div id='question3' class="panel-body">
                            </div>
                            </div>                          
                            <div class="progress">
                                <div id="progressBar3" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
                                </div>
                            </div>                          
                            <div id='buttons'>
                                    <button id='prev3' class='btn'>Back</button>                                
                                    <button id='next3' class='btn pull-right'>Next</button><br><br>
                                    <button id='restart3' class='btn'>Start Over?</button>                              
                            </div>                          
                        </div>
                    <div class="col-md-4"></div>    
                </div>
            </div>  
        </div>
    </div>
</div>


<script src="Assets/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> 
</body>
</html>

Here is the page: http://jakeratliff.com/quiz.html

Upvotes: 0

Views: 806

Answers (1)

Ryan
Ryan

Reputation: 416

The tab contents are not nested properly - there is an extra indent after the first row for both tabs 2 and 3, and each indent is closed at the end of each tab, resulting in the .tab-contents div to be accidentally closed.

The HTML should look something like this for tab 2 (notice one less </div> at the end):

<div class="tab-pane" id="tab2">
    <div class="row" style="height:100px">
    </div>  
    <div class="row">
        <div class="col-md-4"></div>    
            <div class="col-md-4">
                <div id='main2' class="panel panel-info">
                <div id='question2' class="panel-body">
                </div>
                </div>
                <div class="progress">
                    <div id="progressBar2" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
                    </div>
                </div>                          
                <div id='buttons'>
                        <button id='prev2' class='btn'>Back</button>                                
                        <button id='next2' class='btn pull-right'>Next</button><br><br>
                        <button id='restart2' class='btn'>Start Over?</button>                              
                </div>                          
            </div>
        <div class="col-md-4"></div>    
    </div>
</div>

Likewise for tab 3 - there is an extra closing </div> that should not be there. The HTML should look something like this:

<div class="tab-pane" id="tab3">        
    <div class="row" style="height:100px">
    </div>  
    <div class="row">
        <div class="col-md-4"></div>    
            <div class="col-md-4">

                <div id='main3' class="panel panel-info">
                <div id='question3' class="panel-body">
                </div>
                </div>                          
                <div class="progress">
                    <div id="progressBar3" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70"  aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
                    </div>
                </div>                          
                <div id='buttons'>
                        <button id='prev3' class='btn'>Back</button>                                
                        <button id='next3' class='btn pull-right'>Next</button><br><br>
                        <button id='restart3' class='btn'>Start Over?</button>                              
                </div>                          
            </div>
        <div class="col-md-4"></div>    
    </div>
</div>

Upvotes: 1

Related Questions