Note that there are some explanatory texts on larger screens.

plurals
  1. PO.hidden-phone not working for Bootstrap carousel
    text
    copied!<p>I am making a responsive site using Bootstrap. I am trying to hide a slider on phones. I am using the class <code>.hidden-phone</code> to achieve this. However, it is not working for me. If I use <code>.hidden-desktop</code> it hides it on the desktop site as well as the phone. Can someone check out my code and possibly demo it as well? Thanks.</p> <p><a href="http://wwwdev.cco.purdue.edu/boot/welcome.shtml" rel="nofollow">site</a></p> <p>Code:</p> <pre><code>&lt;body&gt; &lt;div class="container" style="position: relative"&gt; &lt;div class="carousel slide hidden-phone" id="myCarousel"&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;div class="carousel-inner"&gt; &lt;div class="item active"&gt; &lt;!--&lt;img src="/ImageSlider/21centuryimages/sliderimages/USS.JPG" /&gt;--&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="../ImageSlider/21centuryimages/sliderimages/Bechtel.jpg" /&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="../ImageSlider/21centuryimages/sliderimages/ADM.jpg" /&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; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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