Bootstrap align tab-content accordingly - css

Question

i have following tabs,
see codepen
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<div class="halter">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"><li><a id="hideshow" href="#" role="tab" data-toggle="tab">hide/show</a></li>
<li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Default</a></li>
<li role="presentation">Placeholder</li>
<li role="presentation">Required</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Assword</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Bassword</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Cassword</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="Password">
</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-8">
<form class="form-horizontal">
<div id="l2">
</div>
</form>
</div>
</div>
</div>
How can i make the tab-content fit rightly into the bordered div?
i need somehow to maintain a smilar structure since i use some plugin.
i have no clue why stackoverflow still aks me for additional details since the executing code in a fidle is selfexplaining.
thanks for your help!!

Answer 1

You could use keyword row at your form-groups, and it will fit in border, you can read more about grids on bootstrap. Append a class row to every form-group of content like this:
<div class="row form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Assword</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
Example:
.nav-tabs > li {
float:none;
display:inline-block;
zoom:1;
}
.nav-tabs {
text-align:center;
}
.nav-tabs {
border-bottom: none;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {border-bottom:5px solid green;}
.halter{margin:5px;padding:5px;border:1px solid gray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="halter">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"><li><a id="hideshow" href="#" role="tab" data-toggle="tab">hide/show</a></li>
<li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Default</a></li>
<li role="presentation">Placeholder</li>
<li role="presentation">Required</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 control-label">Assword</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 control-label">Bassword</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 control-label">Cassword</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="Password">
</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-8">
<form class="form-horizontal">
<div id="l2">
</div>
</form>
</div>
</div>
</div>