Difficulty Bootstrap image menu

Question

I think doubt is simple, but I’m having a hard time. I am creating a menu of images, using Bootstrap, and it is working properly. The problem is, how do I click on one of the thumbnail images, appear as main image?

Follow the deed to the moment.

Thank you very much.

    <header class="page-header">
    <img src="images/logo_header.png" class="img-responsive"/></header>

        </header>
        <div class="row">
        <div   role="main" class="col-md-12">

        <h2><i>G A L E R I A</i></h2>

        <div id="destaque" class="row">
        <div class="col-md-12">
        <img src="images/galeria1.jpg" class="img-responsive"/>
        </div>
        </div> <!-- /.destaque -->

        <div id="miniaturas" class="row">
        <div class="col-md-12">

        <h5><b>VEJA MAIS</b></h5>

        </div>

        <div class="col-md-3">
            <a class="thumbnail" href="#">
            <img src="images/thumbnail1.jpg" class="img-responsive"/>
            </a></div>

            <div class="col-md-3">
            <a class="thumbnail" href="#">
            <img src="images/thumbnail2.jpg" class="img-responsive"/>
            </a></div>

            <div class="col-md-3">
            <a class="thumbnail" href="#">
            <img src="images/thumbnail1.jpg" class="img-responsive"/>
            </a></div>

            <div class="col-md-3">
            <a class="thumbnail" href="#">
            <img src="images/thumbnail2.jpg" class="img-responsive"/>
            </a></div>

            </div> <!-- /.miniaturas -->


        </div>



    </div> <!-- /.row -->

Answer 1

To define this behavior you will need Javascript.

Since you use bootstrap and it requires jQuery Voce can add this behavior, basically take the image src url and assign the highlighted image.

Example:

$(".thumbnail").click(function() {
  var url = $(this).find("img").attr("src");
  $("#destaque img").attr("src", url);
});

See working on jsfiddle