<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row well"> <div class="col-lg-12"> <div class="panel"> <img class="pic img-circle" src="http://placehold.it/120x120" alt="..."> <div class="name"><small>Luka Kužnik</small></div> <a href="#" class="btn btn-xs btn-primary pull-right" style="margin:10px;"><span class="glyphicon glyphicon-picture"></span> Change cover</a> </div> <br><br><br> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#inbox" data-toggle="tab"><i class="fa fa-envelope-o"></i> Prejeto</a></li> <li><a href="#sent" data-toggle="tab"><i class="fa fa-reply-all"></i> Poslano</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="inbox"> <a type="button" data-toggle="collapse" data-target="#a1"> <div class="btn-toolbar well well-sm" role="toolbar" style="margin:0px;"> <div class="btn-group"><input type="checkbox"></div> <div class="btn-group col-md-3">Simon Muha</div> <div class="btn-group col-md-8"><b>Zdravo, poglej tole...</b> <div class="pull-right"><i class="glyphicon glyphicon-time"></i> 13:15 <button class="btn btn-primary btn-xs" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="fa fa-share-square-o"> Reply</i></button></div> </div> </div> </a> <div id="a1" class="collapse out well" style="margin-top: 20px;">To je trup besedila</div> <br> <button class="btn btn-primary btn-xs"><i class="fa fa-check-square-o"></i> Delete Checked Item's</button> </div> <div class="tab-pane" id="sent"> <a type="button" data-toggle="collapse" data-target="#s1"> <div class="btn-toolbar well well-sm" role="toolbar" style="margin:0px;"> <div class="btn-group"><input type="checkbox"></div> <div class="btn-group col-md-3">Kumar</div> <div class="btn-group col-md-8"><b>This is reply from Bootstrap plugin</b> <div class="pull-right"><i class="glyphicon glyphicon-time"></i> 12:30 AM</div> </div> </div> </a> <div id="s1" class="collapse out well">This is the message body1</div> <br> <button class="btn btn-primary btn-xs"><i class="fa fa-check-square-o"></i> Delete Checked Item's</button> </div> </div> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"><br/><br/> <form class="form-horizontal"> <fieldset> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="body">Body :</label> <div class="col-md-8"> <input id="body" name="body" type="text" placeholder="Message Body" class="form-control input-md"> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-2 control-label" for="message">Message :</label> <div class="col-md-8"> <textarea class="form-control" id="message" name="message"></textarea> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-2 control-label" for="send"></label> <div class="col-md-8"> <button id="send" name="send" class="btn btn-primary">Send</button> </div> </div> </fieldset> </form> </div> </div> </div>

.pic { margin-top:50px; width:120px; margin-left:50px; margin-bottom:-60px; } .panel { background-image:url("http://autoimagesize.com/wp-content/uploads/2014/01/rainbow-aurora-background-wallpaper-colour-images-rainbow-background.jpg"); } .name { position:absolute; padding-left:200px; font-size:30px; } .dropdown { position:absolute; } .change { position:relative; bottom:20px; padding:1px; color:white; text-decoration:none; } .change:hover { text-decoration:none; background-color:black; color:white; }

$(function () { $('#myTab a:last').tab('show') })