Bootstrap: open images in modal with carousel
<p>I have this Bootstrap Gallery: <a href="http://ba.nowcommu.myhostpoint.ch/galerie.html" rel="nofollow">http://ba.nowcommu.myhostpoint.ch/galerie.html</a>. What I need is for the full size images to open, perhaps in a Modal, when you click on the "Click" button.</p>

<blockquote>
  <p>Is possible with Modal, or perhaps also with carousel?</p>
</blockquote>

<p><strong>HTML:</strong></p>

<pre><code>&lt;section id="galerie" class="galerie"&gt;
    &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-lg-12"&gt;

                &lt;div class="col-lg-4"&gt;
&lt;div class="hovereffect"&gt;
    &lt;img class="img-responsive" src="/img/pics/1.jpg" alt=""&gt;
        &lt;div class="overlay"&gt;
            &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
            &lt;p&gt; 
                &lt;a href="#"&gt;Click&lt;/a&gt;
            &lt;/p&gt; 
        &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

                &lt;div class="col-lg-4"&gt;
&lt;div class="hovereffect"&gt;
    &lt;img class="img-responsive" src="/img/pics/2.jpg" alt=""&gt;
        &lt;div class="overlay"&gt;
            &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
            &lt;p&gt; 
                &lt;a href="#"&gt;Click&lt;/a&gt;
            &lt;/p&gt; 
        &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

                &lt;div class="col-lg-4"&gt;
&lt;div class="hovereffect"&gt;
    &lt;img class="img-responsive" src="/img/pics/3.jpg" alt=""&gt;
        &lt;div class="overlay"&gt;
            &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
            &lt;p&gt; 
                &lt;a href="#"&gt;Click&lt;/a&gt;
            &lt;/p&gt; 
        &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
                 &lt;div class="col-lg-4"&gt;
&lt;div class="hovereffect"&gt;
    &lt;img class="img-responsive" src="/img/pics/4.jpg" alt=""&gt;
        &lt;div class="overlay"&gt;
            &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
            &lt;p&gt; 
                &lt;a href="#"&gt;Click&lt;/a&gt;
            &lt;/p&gt; 
        &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
                 &lt;div class="col-lg-4"&gt;
&lt;div class="hovereffect"&gt;
    &lt;img class="img-responsive" src="/img/pics/5.jpg" alt=""&gt;
        &lt;div class="overlay"&gt;
            &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
            &lt;p&gt; 
                &lt;a href="#"&gt;Click&lt;/a&gt;
            &lt;/p&gt; 
        &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
                 &lt;div class="col-lg-4"&gt;
&lt;div class="hovereffect"&gt;
    &lt;img class="img-responsive" src="/img/pics/6.jpg" alt=""&gt;
        &lt;div class="overlay"&gt;
            &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
            &lt;p&gt; 
                &lt;a href="#"&gt;Click&lt;/a&gt;
            &lt;/p&gt; 
        &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
</code></pre>