JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h2>Video Gallery</h2>
<ul class="gallery row">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<figure>
<a href="//www.youtube.com/watch?v=0gQk3IvfK0A" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
<img src="//img.youtube.com/vi/0gQk3IvfK0A/hqdefault.jpg" class="thumbnail img-responsive">
</a>
<span class="label label-info">Integration</span>
<figcaption class="figure-caption">
Streamline integration with backend systems using MobileFirst
</figcaption>
</figure>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<figure>
<a href="//www.youtube.com/watch?v=Ntt25H6PAxI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
<img src="//img.youtube.com/vi/Ntt25H6PAxI/hqdefault.jpg" class="thumbnail img-responsive">
</a>
<span class="label label-info">Development</span>
<span class="label label-info">Android</span>
<figcaption class="figure-caption">
Creating a Windows Native C# app connecting to MobileFirst
</figcaption>
</figure>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<figure>
<a href="//www.youtube.com/watch?v=FMTmOUPBhNI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
<img src="//img.youtube.com/vi/FMTmOUPBhNI/hqdefault.jpg" class="thumbnail img-responsive">
</a>
<span class="label label-info">integration</span>
<figcaption class="figure-caption">
Continuous Integration
</figcaption>
</figure>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<figure>
<a...
SCSS
.gallery{
padding:0 0 0 0;
margin:0 0 0 0;
li {
list-style:none;
margin-bottom:25px;
figure {
.thumbnail {
margin-bottom: 0;
margin-top: 10px;
}
figcaption {
padding-top: 1px;
font-size: 90%;
}
}
}
}