Bootstrap Snippet BootStrap Video Listing Snippet 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/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
        <div class="row">
        <div class="col-md-12">
            <div class="theme">To Download Wordpress Most Famous Theme <a href="https://1.envato.market/ydVvD" target="_blank">Click Here</a></div>
        </div>
    </div>
    <div class="row videos">
        <div class="col-md-12">
            <div class="media media-video">
                <a href="#" class="media-lef thumb">
                    <img src="https://via.placeholder.com/336x188/5495F1/fff?text=Video%20Thumbnail">
                    <span class="duration">00:00:00</span>
                </a>
                <div class="media-body">
                    <a href="#" class="media-heading">Video Title Goes here</a>
                    <div class="meta"><a href="#" class="author">VideoUploaderUsername</a> • 808K views • 2 years ago</div>
                    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="media media-video">
                <a href="#" class="media-lef thumb">
                    <img src="https://via.placeholder.com/336x188/EF8354/fff?text=Video%20Thumbnail">
                    <span class="duration">00:00:00</span>
                </a>
                <div class="media-body">
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
.theme{
    font-size:18px;
    text-align:center;
    border-bottom:1px solid #ccc;
    padding:10px 0px;
    margin-bottom:10px;
    font-weight: bold;
    background-color:#ffffff;
}
.media.media-video{
    margin-bottom:10px;
}
.media.media-video .thumb{
    position:relative;
    width:250px;
    margin-right:10px;
    text-decoration:none;
}
.media.media-video .thumb img{
    width:100%;
}
.media.media-video .thumb .duration{
    position:absolute;
    display:block;
    bottom:5px;
    right:5px;
    color:#fff;
    background-color:#000;
    font-size:0.8rem;
    padding:4px;
    -webkit-transition:0.2s linear opacity;
}
.media.media-video .thumb:hover .duration{
    opacity:0.3;
}
.media.media-video .media-body .media-heading{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"BootStrap Video Listing Snippet"
Bootstrap 4.0.0 Snippet by shahzab

Related: See More

Questions / Comments:

"BootStrap Video Listing Snippet" Bootstrap 4.0.0 Snippet by shahzab

Related: See More

Questions / Comments:

"BootStrap Video Listing Snippet"
Bootstrap 4.0.0 Snippet by shahzab