"Simple responsive blog list"
Bootstrap 3.2.0 Snippet by freesurf0

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.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<link href='http://fonts.googleapis.com/css?family=Anton|Dancing+Script:400,700|Open+Sans:400,700,800,300' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row blog-row bg-color-white block-padding">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row blog-date">
November 24, 2014
</div>
<div class="row blog-title">
<a href="javascript:;">This is a sample blog list</a>
</div>
<div class="row blog-image center-block">
<figure class="effect-layla">
<img src="https://cristinahh.files.wordpress.com/2012/10/rock-and-roses-blog-fashion-style-interview.jpg">
<figcaption></figcaption>
</figure>
</div>
<div class="row blog-content">
Donec ut est nec turpis lacinia varius. Praesent nunc ipsum, condimentum in sagittis vel, dapibus quis arcu.
Aenean sed dapibus diam. Donec mollis odio at consequat consequat. Curabitur suscipit mauris eu lorem maximus
sagittis. Nam at sagittis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
</div>
</div>
<div class="blog-row-spacing"></div>
<div class="row blog-row bg-color-white block-padding">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row blog-date">
November 24, 2014
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
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
background: #f1f1f1;
}
div.clear {
clear: both;
}
.bg-color-white {
background: #fff;
}
.block-padding {
padding: 10px;
}
/**
* Style for blog row
****************************************************************************/
.blog-row {
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.blog-row-spacing {
padding: 25px;
}
.blog-date {
font-family: 'Dancing Script', cursive;
font-weight: 700;
font-size: 1.2em;
}
.blog-title {
font-family: 'Anton', sans-serif;
font-size: 2.7em;
text-transform: uppercase;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: