"Tabs"
Bootstrap 3.3.0 Snippet by shriharishastry

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css" rel="stylesheet" integrity="sha384-Li5uVfY2bSkD3WQyiHX8tJd0aMF91rMrQP5aAewFkHkVSTT2TmD2PehZeMmm7aiL" crossorigin="anonymous"> <div class="container"> <div class="row" style="margin-top:20px;"> <div class=" well well-sm bg-white borderZero" uib-dropdown > <div class="btn-group date-block btn-group-justified font-small dropdown" data-toggle="buttons"> <label href="#home" data-toggle="tab" class="btn btn-default next font-small semiBold" title="Next Day" style="font-size:12px; border-radius:0;"> Profile </label> <label href="#profile" data-toggle="tab" class="btn btn-default previous text-right font-small semiBold" title="Previous Day" style="font-size:12px;"> Information </label> <label href="#contact" data-toggle="tab" class="btn date-buttons btn-default text-right semiBold" style="font-size:12px;" > Contact </label> <label href="#education" data-toggle="tab" class="btn date-buttons btn-default text-right semiBold" style="font-size:12px;" > Education </label> <label href="#skills" data-toggle="tab" class="btn date-buttons btn-default text-right semiBold" style="font-size:12px;"> Skills </label> <label ng-click="isCollapsed = !isCollapsed" class="btn date-buttons btn-primary text-right semiBold dropdown-toggle" style="font-size:12px;" > <i class="glyphicon glyphicon-search"></i> </label> </div> </div> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="home"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-default"> <div class="panel-body" style="min-height: 100px;"> <div class="row"> <div class="col-xs-5"> <img unveil="" style="height: 100px;width: 100px;" class="img-responsive img-circle" src="https://challengepost-s3-challengepost.netdna-ssl.com/photos/production/user_photos/000/332/699/datas/profile.jpg"> </div> <div class="col-xs-7" style="padding-left: 0"> <h6 class=" text-capitalize text-primary ng-binding" style="font-size: 12px;white-space: nowrap;overflow: hidden" href="#!/2/patients/3/writePrescription">Shrihari Shastry</h6> <p class="no-margin text-primary ng-binding" style="font-size: 12px;white-space: nowrap;overflow: hidden"> <i class="fa fa-map-marker text-primary"></i> Bangalore </p> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="profile"> <p class="text-center">Passionate Fullstack Developer</p> </div> <div class="tab-pane fade" id="contact"> <p class="text-center">Email: shriharishastrysmg@gmail.com</p> </div> <div class="tab-pane fade" id="education"> <p class="text-center"> Bachelore of Engineering in Information Science and Engineering</p> </div> <div class="tab-pane fade" id="skills"> <p class="text-center"> Python, javascript, php, golang, mysql, mongodb, django, nodejs, express, reddis, phalcon, gokit, microservices, machine learning</p> </div> </div> </div> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Related: See More


Questions / Comments: