Tabs not aligning properly when window is resized smaller - html

Question

I'm trying to make my tabs look like this (picture 1) at all sizes. However, when I resize my tabs they look like this (picture 2). How can I fix it?
Here's my fiddle:
https://jsfiddle.net/whywymam/86zgeLf1/
My HTML code:
<div class="Container">
<div class="row">
<div class="panel panel-center">
<div class="panel-header">
<h1>Job Category</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/bankinglogo.png" width="180px" >
<p class="bankingl"> Banking and Finance </p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/engineerlogo.png" width="180px" >
<p class="bankingl"> Banking and Finance </p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/healthcare.png" width="180px" >
<p class="bankingl">Healthcare</p>
</a>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/technicia.png" width="185px" >
<p class="bankingl">IT</p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/oilandgas.png" width="200px" >
<p class="bankingl">Oil and Gas</p>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"> <a href="#" class="thumbnail">
<img class="logo" src="image/retail.png" width="180px" >
<p class="bankingl">Retail and Hospitality</p>
</a>
</div>
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
</div>
<div class="panel panel-default jobPanel center-block">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
<div class="panel-body">
<div class="tabbable">
<ul class="nav nav-tabs nav-justified selected">
<li class="active">Job Search
</li>
<li>PYW
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<form class="form-horizontal">
<div class="form-group name-group">
<label for="keyword" class="col-sm-3 control-label">Keyword</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter keyword" />
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-3 control-label">Location</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter location" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9"> Search
</div>
</div>
</form>
</div>
<!--end of tab 1-->
<div class="tab-pane" id="tab2">
<form class="form-horizontal">
<div class="form-group name-group">
<label for="keyword" class="col-sm-3 control-label">Keyword</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter keyword" />
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-3 control-label">Location</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter location" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9"> Search
</div>
</div>
</form>
</div>
<!--end of tab 2-->
</div>
<!--end of tab content-->
</div>
<!-- end of tabbable-->
</div>
<!--end panel body-->
</div>
<!-- end of formTab -->
</div>
<!--end of panel container-->
<script src="bootstrap/js/jquery-1.11.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</div>

Answer 1

Bootstrap takes a mobile-first approach, the code you have provided doesn't show the sign-in and sign-up tabs or fields.
But looking at your HTML markup, I can clearly tell you one thing you're missing.
The classes .col-sm-* , col-md-* , col-lg-*, since Bootstrap is mobile-first the class col-xs-* , is the class that you probably want to be adding to your HTML markup.
So I guess if your markup looks something like :
<div class="container">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
You got to add the col-xs-* clas as well so that at smaller widths (mobile and small device screens), the columns are maintained rather than tiled one after another.
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
</div>
<div class="col-xs-6 col-md-6">
</div>
</div>
</div>
Further reading: Subtle magic of how the Bootstrap Grid works.