<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 ----------> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4 watch-card"> <div class="artist-title col-md-12"> <a href="">Chris Brown</a><br/> <span>Music</span> </div> <div class="artist-collage col-md-12"> <span class="play-mix"><span class="btn btn-info play-mix-btn"> <span>►</span> YouTube Mix</span></span> <div class="col-md-6"><img src="http://i.ytimg.com/i/MXDyVR2tclKWhbqNforSyA/mq1.jpg" alt="artist-image" width="150" height="150"></div> <div class="col-md-6 collage-rhs"> <div class="col-md-12"><img src="http://i.ytimg.com/vi/8gyLR4NfMiI/mqdefault.jpg" alt="artist-image" width="150" height="84"></div> <div class="col-md-12"><img src="http://i.ytimg.com/vi/zKCrSN9oXgQ/mqdefault.jpg" alt="artist-image" width="150" height="84"></div> </div> </div> <div class="listing-tab col-md-12"> <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTabs" role="tablist"> <li role="presentation" class="active"><a href="#track" aria-controls="track" role="tab" data-toggle="tab">Top tracks</a></li> <li role="presentation"><a href="#albums" aria-controls="albums" role="tab" data-toggle="tab">Albums</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="track"> <ul> <li><a href="#">Loyal</a> <span>4:31</span></li> <li><a href="#">Ayo</a> <span>6:01</span></li> <li><a href="#">Look at Me Now</a> <span>4:09</span></li> <li><a href="#">Liquor</a> <span>3:51</span></li> <li><a href="#">Love More</a> <span>4:15</span></li> <li><a href="#">Bitches N Marijuana</a> <span>4:17</span></li> <li><a href="#">Don't Judge Me</a> <span>4:52</span></li> <li><a href="#">Turn Up the Music</a> <span>4:18</span></li> <li><a href="#">With You</a> <span>4:16</span></li> <li><a href="#">Next to You</a> <span>6:04</span></li> <li><a href="#">View all</a></li> </ul> <div class="related-artist"> <h3>Related artist</h3> <div class="col-md-12"> <div class="col-md-4 artist-next"><img src="http://i.ytimg.com/i/vWtix2TtWGe9kffqnwdaMw/mq1.jpg" alt="" >Rihanna</div> <div class="col-md-4 artist-next"><img src="http://i.ytimg.com/i/U6cE7pdJPc6DU2jSrKEsdQ/mq1.jpg" alt="" >Drake</div> <div class="col-md-4 artist-next"><img src="http://i.ytimg.com/i/2-zLDHEP2rEkqwgutb2ctA/mq1.jpg" alt="" >Tyga</div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="albums"> <ul> <li><a href="#"><img src="http://i.ytimg.com/p/PL-o37YO_uwcLPmR8QBTegC2BoJ03I3tqe/mqdefault.jpg" alt="" width="50" height="50"> Kiss kiss</a></li> </ul> <div class="related-artist"> <h3>Related artist</h3> <div class="col-md-12"> <div class="col-md-4 artist-next"><img src="http://i.ytimg.com/i/vWtix2TtWGe9kffqnwdaMw/mq1.jpg" alt="" >Rihanna</div> <div class="col-md-4 artist-next"><img src="http://i.ytimg.com/i/U6cE7pdJPc6DU2jSrKEsdQ/mq1.jpg" alt="" >Drake</div> <div class="col-md-4 artist-next"><img src="http://i.ytimg.com/i/2-zLDHEP2rEkqwgutb2ctA/mq1.jpg" alt="" >Tyga</div> </div> </div> </div> </div> </div> </div> </div> </div>

.container{background-color:#f1f1f1;} .watch-card{margin-top:50px;margin-bottom:50px;} .watch-card > div{max-width:300px;} .watch-card:hover .artist-title a, .watch-card:hover .listing-tab .tab-content ul li a{color:#167ac9;} .listing-tab .tab-content ul li:hover{cursor:pointer;text-decoration:underline;} .artist-title{padding:15px;background:#fff;} .artist-title a{test-decoration:none;font-size:21px;font-family:arial, san-serif; color:#555;} .artist-title a:hover{color:#16a3de;} .artist-collage img{max-width:100%;} .artist-collage{position:relative;max-height:150px;overflow:hidden;} .artist-collage,.artist-collage div{padding:0;} span.play-mix { position: absolute; top: 38%; z-index: 9; left: 30%; border: 3px solid rgba(255,255,255,.25); } span.btn.play-mix-btn { background-color: #000; padding: 5px 12px; border:none; border-radius: 2px; box-shadow:0 0 70px rgba(255,255,255,.5); } .collage-rhs img{margin-top:-5px;} span.play-mix-btn:hover { box-shadow: 0 0 80px rgba(255,255,255,.9); } .listing-tab{ padding:0; }.related-artist .artist-next{padding-left:0;} .related-artist .col-md-12{padding-right:0;} .play-mix-btn span { color: #1775bc; } .related-artist img{width:100%;} .related-artist h3 { font-size: 17px; margin-left: 15px; margin-top: 9px; }.related-artist{overflow:hidden;padding-bottom:10px;} .listing-tab .tab-content ul{padding:0;margin:0;} .listing-tab .tab-content ul li { list-style-type: none; border-bottom: 1px solid #eee; padding: 8px; }.listing-tab .tab-content ul li { list-style-type: none; border-bottom: 1px solid #eee; padding: 8px; padding-left: 20px; font-size: 13px; color: #666; }.listing-tab .tab-content ul li a{text-decoration:none; color:#666;} .listing-tab .tab-content ul li span{display:inline-block;float:right;padding-right:10px;} .listing-tab .nav-tabs>li,.nav-tabs>li a:hover{margin-bottom:0;background:none;} .listing-tab .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{border:none;background:none;} .listing-tab .nav-tabs>li>a:hover{border-color:none;color:red;} .listing-tab .nav-tabs>li>a{border:0;padding:17px 0 7px;color:#333;margin-left:15px;} .listing-tab .nav-tabs>li.active>a{border-bottom:2px solid #bb0000;color:#000;} .listing-tab{background-color:#fff;}

$('#myTabs a').click(function (e) { e.preventDefault() $(this).tab('show') })