JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
          <ul class="building_images">
              <li>
                  <img class="img-thumbnail" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"/>
                  <label>Image Label</label>
              </li>
              <li>
                  <img class="img-thumbnail" src="http://www.keenthemes.com/preview/metronic/theme/asshttp://assets.inhabitat.com/wp-content/blogs.dir/1/files/2013/08/leaf-veins-537x357.jpg">
                  <label>Image Label</label>
                  </li>
              <li>
                  <img class="img-thumbnail" src="http://progrounds.com/wp-content/uploads/2014/11/Mowing-leaves.jpg" />
                  <label>Image Label</label>
              </li>
              <li>
                  <img class="img-thumbnail" src="http://www.w3schools.com/images/w3schools_green.jpg" />
                  <label>Image Label</label>
              </li>
          </ul>

CSS

ul {
    margin: 0; 
    padding: 0;
}
.building_images li {
    width: 190px;     /* Set your width */
    height: 190px;   /* Set your height */
    margin: 0 30px 30px 0; /* Set your margins (top right bottom left) */
    list-style: none; 
    float: left;
    position: relative; 
    background: red; /* Just for the demo, to see the <li> */
}
  .building_images li label {
    display: block;
    height: auto;
    width: auto;
}

  .building_images li label {
      max-width: 100% !important; /* Auto scale your images to full width */
      position: absolute; 
      top: auto;
        left: 0;
        right: 0;
      bottom: 0; /* Align your images at the bottom */
  }