When there was text only and you click the nav-tabs link it showes a needed content but after including these forms there it doesn't work anymore. Looks the problem is form integrations. Here is the code:
<ul class="nav nav-tabs tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#profile" role="tab" data-toggle="tab">Free Values</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buzz" role="tab" data-toggle="tab">check</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active show" id="profile">
<label for="name" class="control-label float-left">From</label>
<div class="input-group">
<input type="text" class="form-control" value="United Kingdom" aria-label="Text input with dropdown button">
<div class="input-group-prepend">
<button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
</div>
<label for="name" class="control-label float-left">To</label>
<div class="input-group">
<input type="text" class="form-control" value="US" aria-label="Text input with dropdown button">
<div class="input-group-prepend">
<button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" value="981" aria-label="Text input with dropdown button">
<div class="input-group-prepend">
<button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">EURO</button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
<div class="input-group text-center " >
<input type="text" class="form-control" value="Cash To Cart" aria-label="Text input with dropdown button" style="color:#fff; margin:0; background-color:#222222; border-color:#323F49;
border-top-left-radius: 8px; border-bottom-left-radius: 8px; height:50px">
<div class="input-group-prepend">
<button class="btn btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
<input type="text" class="form-control last" id="exampleInputEmail1" aria-describedby="emailHelp" value="100.000">
</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">
<input type="text" class="form-control last" id="exampleInputEmail1" aria-describedby="emailHelp" value="728">
</div>
</div>
</div>
</div>
When you click to the second tab first tab content is still there and input on the second tab either doesn't appear or appear on the bottom of both tabs outside of it. How can I fix this and make tabs work correctly?
Typo error one div extra
</div> <!-- Remove This Div -->
<label for="name" class="control-label float-left">To</label>