"Jumbotron"
Bootstrap 3.3.0 Snippet by explotter

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-12 jasgrid">
<div class="box-item">
<div class="box-post2">
<span class="label label-success">
<a href="#" rel="tag">Travel</a>
</span>
<h1 class="post-title">
<a href="#">
City in the sky: world's biggest hotel to open in Mecca
</a>
</h1>
<span class="meta">
<span><i class="glyphicon glyphicon-comment"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span>
<span><i class="glyphicon glyphicon-time"></i> Sep 15, 2015</span>
</span>
</div>
<div class="box-post3">
<h1 class="post-title">
<a href="#">test</a>
</h1>
</div>
<img src="http://placehold.it/1920x688" alt="City in the sky: world's biggest hotel to open in Mecca"
class="">
</div>
</div>
</div>
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
.jasgrid{padding:0;}
.box-item {
float: left;
opacity: 1;
overflow: hidden;
position: relative;
}
.box-item img {
width: 100%;
}
.box-item a,span{color:#FFF;}
.box-item .box-post span.meta {
font-family: sans-serif;
font-size: 12px;
color: #fff;
margin-top: 15px;
display: block;
}
.box-item .box-post span.meta span {
margin-right: 15px;
}
.box-item .box-post {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2

Questions / Comments: