Simple portfolio using default Bootstrap elements plus some minor extra CSS enhancements. Including the modal box!

gallery css

.portfolio .thumbnail {
    position: relative;
}

.portfolio .thumbnail:hover {
    cursor: pointer;
}

.portfolio .caption {
    bottom: 0;
    position: absolute;
}

.portfolio .btn {
    opacity: 0.75;
}

gallery html

<div class="container" style="padding-top: 60px">
  <div class="row portfolio">
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?1" alt="The awesome description" data-toggle="modal" data-target="#myModal">
        <div class="caption">
          <p class="btn btn-default btn-xs btn-lg pull-right" rel="tooltip"><i class="fa fa-heart"></i><i
            class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i
            class="fa fa-heart-o"></i></p>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?2" alt="The awesome description" data-toggle="modal" data-target="#myModal">
        <div class="caption">
          <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i
            class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i
            class="fa fa-heart-o"></i></p>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?3" alt="The awesome description" data-toggle="modal" data-target="#myModal">
        <div class="caption">
          <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i
            class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i
            class="fa fa-heart-o"></i></p>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?4" alt="The awesome description" data-toggle="modal" data-target="#myModal">
        <div class="caption">
          <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i
            class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i><i
            class="fa fa-heart-o"></i></p>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?5" alt="The awesome description" data-toggle="modal" data-target="#myModal">
        <div class="caption">
          <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i
            class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i
            class="fa fa-heart-o"></i></p>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?6" alt="The awesome description" data-toggle="modal" data-target="#myModal">
        <div class="caption">
          <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i
            class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i
            class="fa fa-heart-o"></i></p>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?7" alt="The awesome description" data-toggle="modal" data-target="#myModal">
        <div class="caption">
          <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i
            class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i
            class="fa fa-heart-o"></i></p>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?8" alt="The awesome description" data-toggle="modal" data-target="#myModal">
        <div class="caption">
          <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i
            class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i><i
            class="fa fa-heart-o"></i></p>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">Im the awesome cat!</h4>
        </div>
        <div class="modal-body">
          <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?42" alt="The awesome description">
        </div>
      </div>
    </div>
  </div>
</div>