Bootstrap Snippet Article with caption using HTML CSS Bootstrap

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="row">
        <article class="col-md-6">
                <figure class="col-lg-12">
                <a href=""><img class="img img-responsive article-img" src="http://farm1.staticflickr.com/258/18511405422_d7c67c0ff8_k.jpg"></a>
                <figcaption class="article-caption"><h1 class="article-title"><a href="">Your article title goes here</a></h1>
                </figcaption>
                </figure>
                <div class="article-intro col-lg-12" style="padding-top: 10px;">
                <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor..</strong>
                </div>
                
                </article>
                
                <article class="col-md-6">
                <figure class="col-lg-12">
                <a href=""><img class="img img-responsive article-img" src="http://farm1.staticflickr.com/354/18141136234_6aee6ac0ea_k.jpg"></a>
                <figcaption class="article-caption"><h1 class="article-title"><a href="">Your article title goes here</a></h1>
                </figcaption>
                </figure>
                <div class="article-intro col-lg-12" style="padding-top: 10px;">
                <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor..</strong>
                </div>
                
                </article>
                </div>
                
                <hr>
                
                <div class="row">
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
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700);
body
{
    padding-top: 30px;
}
h1
{
font-family: 'News Cycle', sans-serif;
}
article
{
    padding-bottom: 20px;
}
.article-caption
{
position: absolute;
bottom: 16px;
max-width: 90%;
text-align: center;
background-color: rgba(200,200,200,0.5);
}
.article-img
{
width: 100%; 
max-height: 400px;
object-fit: cover;
}
@media screen and (max-width: 768px) { 
.article-title
{
font-size: 28px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Article with caption"
Bootstrap 3.3.0 Snippet by andras2001

Related: See More

Questions / Comments:

"Article with caption" Bootstrap 3.3.0 Snippet by andras2001

Related: See More

Questions / Comments:

"Article with caption"
Bootstrap 3.3.0 Snippet by andras2001