Gerome Gerardo Gerome Gerardo - 12 days ago 7
CSS Question

Bootstrap align tab-content accordingly

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"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Placeholder</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Required</a></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

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"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Placeholder</a></li>
                        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Required</a></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>