Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's one way to do it. I'm sure there is a more elegant way, but this should work.</p> <p>Create a class in your stylesheet like so:</p> <pre><code>.fullscrn{ height: 100%; width:100%; } </code></pre> <p>Add this class to your code like so:</p> <pre><code>&lt;div id="myCarousel" class="carousel slide fullscrn"&gt; &lt;ol class="carousel-indicators"&gt; &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt; &lt;/ol&gt; &lt;!-- Carousel items --&gt; &lt;div class="carousel-inner"&gt; &lt;div class="item active fullscrn"&gt; &lt;img src="http://placehold.it/600x480" class="fullscrn" /&gt; &lt;/div&gt; &lt;div class="item fullscrn"&gt; &lt;img src="http://placehold.it/600x480" class="fullscrn" /&gt; &lt;/div&gt; &lt;div class="item fullscrn"&gt; &lt;img src="http://placehold.it/600x480" class="fullscrn" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt; &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Now the image should stretch to full screen. However, you may notice that the carousel has some white space at the bottom. This is because Bootstrap adds a 20 pixel margin at the bottom of your carousel DIV via the <code>carousel</code> class.</p> <p>You can fix this by adding another class to your <code>myCarousel</code> DIV that removes the bottom margin:</p> <pre><code>.nobtmmargin{ margin-bottom: 0px; } </code></pre> <p>Then apply class:</p> <pre><code>&lt;div id="myCarousel" class="carousel slide fullsrcn nobtmmargin"&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload