"Watch card / Artist Profile / Youtube list"
Bootstrap 3.3.0 Snippet by ths93

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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%;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Datepicker
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: