"Artists Details Listing"
Bootstrap 3.1.0 Snippet by AnitaMehta

<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"> <div class="col-md-12 col-xs-12 col.sm.12"> <div class="artist-data pull-left"> <div class="artst-pic pull-left"> <a href="#"> <img src="http://placehold.it/122x122" alt="" class="img-responsive" /> </a> </div> <div class="artst-prfle pull-left"> <div class = "col-md-12" > <div class="art-title"> Lorem ipsum dolor <span class="artst-sub">By <span class="byname">Lorem Ipsum</span> <span class="daysago">around 10/10/2014 10:20:40</span></span> <span><div class="counter_comnt"><i class="glyphicon glyphicon-comment"></i> Answer</div></span> </div> </div> </div> <div class="bot-links"> <a href="#">Sit amet</a> <a href="#">Amet</a> <a href="#">Lorem</a> <a href="#">Ipsum dolor</a> <a href="#">Lorem</a> <a href="#">Amet</a> <a href="#">Sit amet</a> <a href="#">Ipsum dolor</a> <a href="#">Lorem</a> <a href="#">Ipsum dolor sit</a> </div> </div> </div> </div> </div> </div>
.art-title{color:#231f20; font-size:20px; font-weight:700;} .artist-data{width:100%; padding-bottom: 25px;} .artst-pic{position: relative;} .artst-pic span a{color: #fff; font-size: 16px; display: none;} .artst-pic span.artst-like{position: absolute; left: 11%; bottom: 10px;} .artst-pic span.artst-share{position: absolute; left:46%; bottom: 10px;} .artst-pic span.artst-plus{position: absolute; right: 9%; bottom: 10px;} .artst-prfle{width:63%;} .artst-prfle span.artst-sub{font-size:15px; color:#bbb; float:left; width:100%; font-weight:normal; padding:5px 0;} .artst-prfle span.artst-sub span.byname{font-weight:700; color:#aaa;} .artst-prfle span.artst-sub span.daysago{float:right; font-size:12px;} .counter-tab{float: left; width: 100%; padding-top: 45px;} .counter-tab div{float: left; width: 15%; color: #aaa; font-size: 12px; padding:5px 0;} .bot-links{float: left; width: 100%; padding-top: 10px; margin-left:10px;} .bot-links a{display: inline-block; padding: 5px; background: #ccc; font-size: 12px; margin-bottom: 5px; color: #9c9c9c; text-decoration:none;} span.play-icon{position: absolute; left: 31%; top: 32%; display: none;} .artst-pic:hover img.play-icon, .artst-pic:hover span a{display: block; } @media (max-width: 480px) { .art-title{color:#231f20; font-size:12px; font-weight:700;} .artist-data{width:100%; padding-bottom: 25px;} .artst-pic{width:33%;position: relative;} .artst-pic span a{color: #fff; font-size: 16px; display: none;} .artst-pic span.artst-like{position: absolute; left: 11%; bottom: 10px;} .artst-pic span.artst-share{position: absolute; left:46%; bottom: 10px;} .artst-pic span.artst-plus{position: absolute; right: 9%; bottom: 10px;} .artst-prfle{width:63%;} .artst-prfle span.artst-sub{font-size:12px; color:#bbb; float:left; width:100%; font-weight:normal; padding:5px 0;} .artst-prfle span.artst-sub span.byname{font-weight:700; color:#aaa;} .artst-prfle span.artst-sub span.daysago{float:right; font-size:12px;} .counter-tab{float: left; width: 100%; padding-top: 5px;margin-left:-110px;} .counter-tab div{float: right; width: 33%; color: #aaa; font-size: 12px;} .counter_comnt {font-weight:bold; font-size:12px;} .bot-links{float: left; width: 100%; padding-top: 10px;} .bot-links a{display: inline-block; padding: 5px; background: #ccc; font-size: 12px; margin-bottom: 5px; color: #9c9c9c; text-decoration:none;} span.play-icon{position: absolute; left: 31%; top: 32%; display: none;} .artst-pic:hover img.play-icon, .artst-pic:hover span a{display: block; } }

Related: See More


Questions / Comments: