<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" id="form-step"> <div class="row"> <aside class="col-sm-4"> <div class="widget widget-pages"> <div class="panel panel-default"> <div class="panel-body"> Texto </div> </div> </div> </aside> <div class="col-sm-8"> <ul class="nav panel-tabs"> <li class="col-sm-6 text-center"> <a href="#tab1" data-toggle="tab">Pré-inscrição</a> </li> <li class="col-sm-6 text-center"> <a href="#tab2" data-toggle="tab">Pré inscrição concluída</a> </li> </ul> <div class="col-sm-12"> </div> <div class="clearfix"></div> <div class="tab-pane fade in active" id="tab1"> <form> <div class="col-sm-6"> <div class="form-group"> <label for="">Nome</label> <input type="text" class="form-control" id="" placeholder="Nome"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="">CPF</label> <input type="text" class="form-control" id="" placeholder="CPF"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="">Email</label> <input type="email" class="form-control" id="" placeholder="Email"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="">Whatsapp</label> <input type="text" class="form-control" id="" placeholder="Telefone"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="">Telefone Fixo</label> <input type="text" class="form-control" id="" placeholder="Telefone"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="">Curso</label> <input type="text" class="form-control" id="" placeholder="Telefone"> </div> </div> <div class="col-sm-12"> <button class="btn btn-default" type="submit">Inscrever-se</button> </div> </form> </div> <div class="tab-pane fade" id="tab2"> <h3>Inscrição concluída, com sucesso!</h3> <p> Recebemos sua inscrição em nosso sistema </p> </div> <div class="tab-pane fade" id="tab3"> teste tab 3 </div> </div> </div> </div>

.list-inline li { display: inline-block; } #form-step div[class~="tab-pane"] { height: auto; position: relative; } #form-step div[class~="tab-pane"] form { position: absolute; } .nav.panel-tabs { border-bottom: 1px solid #eee; margin: 0 15px 20px; } .nav.panel-tabs li { font-weight: bold; } .nav.panel-tabs li.active, { background-color: gray; } .nav.panel-tabs li.active a { color white; } .nav.panel-tabs li.active, .nav.panel-tabs li a:hover, .nav.panel-tabs li a:focus { background-color: gray; }