<div class="media-browser row" role="tabpanel">
    <div class="col-md-2">
        <ul class="nav" role="tablist">
            <!-- First tab active by default -->
            <li role="presentation" class="active">
                <a href="#media-browser-1"
                   aria-controls="media-browser-1"
                   role="tab"
                   data-toggle="tab">
                    <img src="http://placehold.it/80x80/442359/ffffff" />
                </a>
            </li>
            <!-- Second tab -->
            <li role="presentation">
                <a href="#media-browser-2"
                   aria-controls="media-browser-2"
                   role="tab"
                   data-toggle="tab">
                    <img src="http://placehold.it/80x80/1570a6/ffffff" />
                </a>
            </li>
            <!-- Icon should launch the modal lightbox -->
            <li>
                <a href="#">
                    <i class="icon-media-browse"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="tab-content col-md-22">
        <!-- The default selected tab has the "fade in active" classes -->
        <div role="tabpanel" class="tab-pane fade in active" id="media-browser-1">
            <img src="http://placehold.it/530x300/442359/ffffff" class="img-responsive" alt="" />
        </div>

        <!-- The "fade" class enables a fade effect when switching tabs -->
        <div role="tabpanel" class="tab-pane fade" id="media-browser-2">
            <img src="http://placehold.it/530x300/1570a6/ffffff" class="img-responsive" alt="" />
        </div>
    </div>
</div>