Saurabh Saurabh - 7 months ago 23
HTML Question

bootstrap second tab content starts after leaving space for first tab content div

Simple Bootstrap 3 Tabs:

https://jsbin.com/yakuja/edit?html,output

I am creating tabs using bootstrap 3. Only issues is that the contents of second tab starts after adding the space on top for first tab.

In ideal scenario there should be no space above content

<div class="col-sm-9">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">
<a href="#uploadFormat" data-toggle="tab">Client Upload Format</a>
</li>
<li role="presentation">
<a href="#upload" data-toggle="tab">Client Bulk Upload</a>
</li>
</ul>
<div class="tab-content">
<br/>
<div class="tab pane fade active in" id="uploadFormat">
<div class="form-bottom">
<p>saurabh</p>
<p>saurabh</p>
<p>saurabh</p>
<p>saurabh</p>
<p>saurabh</p>
</div>
</div>
<div class="tab pane fade" id="upload">
<form>
<fieldset>
<div class="form-group">
<label for="client_upload_file">Upload Client File</label>
<input type="file" name="client_upload_file" id="client_upload_file"/>
</div>
<div class="form-group">
<button class="btn btn-primary btn-sm" type="submit" name="clientUpload">Upload Client File</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>

Answer

You have a syntax error in class name at line:

<div class="tab pane fade" id="upload">
//             ^

To solve problem it should be:

<div class="tab-pane fade" id="upload">

JsFiddle

Comments