JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="tabs-2">
    <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">
            <img class="img-responsive" src="http://lorempixel.com/800/600/food/1" alt="" />
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">
            <img class="img-responsive" src="http://lorempixel.com/800/600/food/2" alt="" />
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail">
            <img class="img-responsive" src="http://lorempixel.com/800/600/food/3" alt="" />
        </div>
    </div>
    
    <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-body"></div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: lightblue;
}
.second {
    float: left;
    margin-right: 10px;
}

JavaScript

$(document).ready(function () {
    $myModal = $('#myModal');
    
    $('.row img.img-responsive').on('click', function () { // <-- notice the selector change
        var $this = $(this),
            src = $this.attr('src'),
            html = '<img src="' + src + '" class="img-responsive" />';
        
        updateModalBody($myModal, html);
        
        $myModal.modal();
    });

    $myModal.on('hidden.bs.modal', function () {
        updateModalBody($myModal, '');
    });
    
    function updateModalBody($modal, html) {
        $modal.find('.modal-body').html(html);
    }
})