Bootstrap Vertical Tabs

Bootstrap Vertical Tabs using simple css.

by vaheed akhtar

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 <div  class="col-sm-12" style="display:flex;">
         
        <hr/>
        <div class="col-xs-3"  style="background-color: white;margin:5px;
position:fixed; top: 0;left:0; height: auto;"> <!-- required for floating -->        

<div class="card">
     <img src="https://ak8.picdn.net/shutterstock/videos/1290388/thumb/1.jpg"             alt="John" style="width:100%">
      <div class="avatar">
       <img alt="" src="https://www.w3schools.com/w3images/avatar2.png">
      </div>

   <h1>Milly </h1>
   <p class="title">@milley</p>
   <p>Harvard University</p>
   <hr />
   <p>followers</p>
<div>

 </div>
</div>
          
<div style="border:2px solid grey;">
 sdfasfasdfasdf
 asfdasdfasdfa
 asfdasdfadfadf
 </div>
          <!-- Nav tabs -->
          <ul class="nav nav-tabs tabs-left sideways">
            <li class="active"><a href="#home-v" data-toggle="tab">Home</a></li>
            <li><a href="#profile-v" data-toggle="tab">Profile</a></li>
            <li><a href="#messages-v" data-toggle="tab">Messages</a></li>
            <li><a href="#settings-v" data-toggle="tab">Settings</a></li>
          </ul>
        </div>

        <div class="col-xs-6" style="background:grey;white-space: wrap;">
          <!-- Tab panes -->
          <div class="tab-content">
            <div class="tab-pane active" id="home-v">
           The text-overflow property only affects content that is overflowing a block container element roperty only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example)..</div>
            <div class="tab-pane" id="profile-v">Profile Tabasdfsadfsadfsafsaf.
           The text-overflow property only affects content that is overflowing a block container element in its inline...

CSS

.tabs-left, .tabs-right {
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd;
}
.tabs-right {
  border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
  float: none;
  margin-bottom: 2px;
}
.tabs-left>li {
  margin-right: -1px;
}
.tabs-right>li {
  margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent;
}

.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
  border-bottom: 1px solid #ddd;
  border-left-color: transparent;
}
.tabs-left>li>a {
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  display:block;
}
.tabs-right>li>a {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}
 /* profile card */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.title {
  color: grey;
  font-size: 18px;
}

.card .avatar {
    position: relative;
    top: -50px;
    margin-bottom: -50px;
}

.card .avatar img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.5);
}