Hello there, I am currently working on making the Bootstrap Carousel responsive for my project.
Everything seems to be working fine at the moment, but I would like to tweak it so that the images are hidden if the screen width is less than a certain value (x px).
.thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
display: relative;
max-width: 100%;
height:auto;
}<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/media/1003/banner.png" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Title 1</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
</div>
</div>
</div>
<div class="item">
<img src="/media/1005/banner2.png" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Title 2</h1>
<p>Subtitle 2</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>I simply want Images 1 and 2 in the Carousel to disappear when the screen width is less than 400px wide as an example.