Search code examples
htmlcssbootstrap-4media-queries

media queries in bootstrap carousel

I am trying to make simple carousel using bootstrap and im having a problem with image sizes, i want it to be full screen images. does that mean that i have to add media queries? if yes how can I do that?

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <img src="imagehere.png">
    </div>

    <div class="item">
      <img src="imagehere.png">
    </div>

    <div class="item">
      <img src="imagehere.png">
    </div>
  </div>
  </div>
Solution

  • No,you don't have to add media queries. Set image width to 100%. Give each image a class of img-fluid and set your body margin to 0

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
    <div class="item active">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1472722886393-f2f51e9deec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
            width="100%" height="100%">

    </div>

    <div class="item">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1531682607150-08b2476a545a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=742&q=80"
            width="100%" height="100%">

    </div>

    <div class="item">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1498595664159-2df8dee7e63c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
            width="100%" height="100%">
    </div>
</div>