Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="rows v-wrapper">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video short video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is long video title this is long video title this is long video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is very very long video title this is very very long video title this is very very long video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
      ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}

.play-item {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
}
.v-wrapper {
    max-width:1000px;
    margin:0 auto;
}
.video-image-wrapper {
    position:relative;
    width:100%;
}
.video-image-wrapper .img-responsive {
    width:auto;
    position:relative;
    z-index:1;
}
.video-image-wrapper .play-item {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index:2;
}
@media (min-width:640px) and (max-width:980px) {
    .col-sm-6 {
        width:50%!important
    }
}