"Article Thumbnails"
Bootstrap 3.1.0 Snippet by leandroruel

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="//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">
<h1>Article Thumbnails</h1>
<p>Use it to your news site, feature a article.</p>
</div>
<div class="row">
<div class="col-md-5 col-lg-5">
<!-- artigo em destaque -->
<div class="featured-article">
<a href="#">
<img src="http://placehold.it/482x350" alt="" class="thumb">
</a>
<div class="block-title">
<h2>Lorem ipsum dolor asit amet</h2>
<p class="by-author"><small>By Jhon Doe</small></p>
</div>
</div>
<!-- /.featured-article -->
</div>
<div class="col-md-7 col-lg-7">
<ul class="media-list main-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/150x90" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
<p class="by-author">By Jhon Doe</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
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
/* image thumbnail */
.thumb {
display: block;
width: 100%;
margin: 0;
}
/* Style to article Author */
.by-author {
font-style: italic;
line-height: 1.3;
color: #aab6aa;
}
/* Main Article [Module]
-------------------------------------
* Featured Article Thumbnail
* have a image and a text title.
*/
.featured-article {
width: 482px;
height: 350px;
position: relative;
margin-bottom: 1em;
}
.featured-article .block-title {
/* Position & Box Model */
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
/* background */
background: rgba(0,0,0,0.7);
/* Width/Height */
padding: .5em;
width: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

after test it why this is not responsive Admin, how can i make it responsive ?

Guest () - 9 years ago - Reply 0


can i use this for iframe youtube video, after test it, why this not responsive ? how can i make it responsive, Thanks

Guest () - 9 years ago - Reply 0


hey, i really like this, and i'm going to try to use it for a personal project on my laptop, but the breakpoints seem messed up. for example, in FF 30, web developer extension reports the viewport is 1215px x 1042px, and the right column is half inside the left column. if i shrink the FF window just a hair to 1232x1042, then the columns display correctly.

Jake Coughlin () - 10 years ago - Reply 0


Same thing happens in Opera 20 and Safari 7.

Jake Coughlin () - 10 years ago - Reply 0