CODEWITHSUNDEEP
twitter-bootstrap
Matt Altepeter
Matt Altepeter

Reputation: 329

.hidden-phone not working for Bootstrap carousel

I am making a responsive site using Bootstrap. I am trying to hide a slider on phones. I am using the class .hidden-phone to achieve this. However, it is not working for me. If I use .hidden-desktop 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.

site

Code:

<body>
  <div class="container" style="position: relative">
<div class="carousel slide hidden-phone" id="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
    <div class="carousel-inner">
        <div class="item active">
            <!--<img src="/ImageSlider/21centuryimages/sliderimages/USS.JPG" />-->
        </div>
        <div class="item">
            <img src="../ImageSlider/21centuryimages/sliderimages/Bechtel.jpg" />
        </div>

        <div class="item">
            <img src="../ImageSlider/21centuryimages/sliderimages/ADM.jpg" />
        </div>

    </div>
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>
</div>   
    </body>
  </html>

Upvotes: 0

Views: 6490

Answers (1)

Jeff Miller
Jeff Miller

Reputation: 281

For bootstrap 3.0 use class="hidden-sm"

Upvotes: 9

Related Questions