<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 clearfix well">
<div class="col-md-2 column">
<img class="img-thumbnail" alt="160x160" src="http://lorempixel.com/140/140/" />
</div>
<div class="col-md-5 column">
<blockquote>
<p>
Photo Guy
</p> <small>Age: 21 /Gender: M /Status: Single / Straight <cite>Hyderabad</cite></small>
<p>
Snapper.com
</p> <small>Photo Graphy ,Videograghy <cite>London England</cite></small>
</p> <small> Short Films, <cite>Telangana</cite></small>
</blockquote>
</div>
<div class="col-md-2 column">
<blockquote>
<img class="img-thumbnail" alt="160x160" src="http://lorempixel.com/140/140/" />
</blockquote>
</div>
<div class="col-md-2 column">
<button class="btn btn-default btn-block" type="button">
Like
</button>
<button class="btn btn-default btn-block" type="button">
Contact
</button>
<button class="btn btn-default btn-block" type="button">
View Full Profile
</button>
</div>
</div>
<div id="profileView"class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-444468">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-200304" data-toggle="tab">About</a>
</li>
<li>
<a href="#panel-567649" data-toggle="tab">Photos</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-200304">
<div class="row clearfix">
<div class="col-md-8 column">
<br>
<p>
<strong>About me</strong><br/>
it's just awful to write this stuff and i hate having </p>
<hr/>
<p>
<strong>What i am doing with my life</strong><br/>
it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.
</p>
<hr/>
<p>
<strong>I am really good at ?</strong><br/>
it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.
</p>
<hr/>
<p>
<strong>The first thing you will notice about me?</strong><br/>
it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.
</p>
<hr/>
<p>
<strong>I cant live without ?</strong><br/>
My Mobile
My Car
My Dog
</p>
<hr/>
<p class="well">
<strong>I am looking for ?</strong><br/>
someone good with heart
</p>
</div>
<div class="clearFix col-md-4 column">
<br> <table class="table">
<thead>
<tr>
<th>
Photographer
</th>
<th>
Primary Skills
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Language
</td>
<td>
<ol>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
</ol>
</td>
</tr> <tr>
<td>
Language
</td>
<td>
<ol>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="panel-567649">
<div class="row clearfix">
<div class="col-md-8 column">
<img alt="140x140" src="http://lorempixel.com/140/140/" /><img alt="140x140" src="http://lorempixel.com/140/140/" /><img alt="140x140" src="http://lorempixel.com/140/140/" /><img alt="140x140" src="http://lorempixel.com/140/140/" />
</div>
<div class="col-md-4 column">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* Tab */
.portlet-title > .nav-tabs {
background: none;
margin: 0;
float: right;
display: inline-block;
border: 0;
}
.portlet-title > .nav-tabs > li {
background: none;
margin: 0;
border: 0;
}
.portlet-title > .nav-tabs > li > a {
background: none;
border: 0;
padding: 2px 10px 13px;
color: #444;
}
.portlet-title > .nav-tabs > li.active,
.portlet-title > .nav-tabs > li.active:hover {
border-bottom: 4px solid #f3565d;
position: relative;
}
.portlet-title > .nav-tabs > li:hover {
border-bottom: 4px solid #f29b9f;
}
.portlet-title > .nav-tabs > li.active > a,
.portlet-title > .nav-tabs > li:hover > a {
color: #333;
background: #fff;
border: 0;
}
