How to get Bootstrap Carousel to fit 100% to screen?

Question

I was wondering how to get the carousel in Bootstrap's Carousel example to fit 100% to screen, as opposed to the way it's displaying now which allows some blank circular images to be included in the main landing page when it is loaded.

Here's a simple illustration of what I'm trying to get working.

page source (relevant bit):

<!-- Carousel
  ================================================== -->
<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>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</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>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></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><!-- /.carousel -->

carousel.css (relevant bit):

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

I know the task at hand is pretty simple, and I admit that I have tried tinkering around with the carousel.css file for the past hour or so (changing various height position, z-index, etc. values), but I just can't seem to get the resizing to work without majorly screwing things up. More specifically, I tried adding

Answer 1

After trying to fiddle around with the current version of carousel provided on Bootstrap's website, I just figured that trying to find a work-around for their provided code would just be more trouble than it's worth.

So, I found this example instead and just replaced the carousel HTML with the one provided by their source - starting at the 'header' and replaced the carousel portion in the carousel.css with their full-slider.css part.

Final code looks something like this:

HTML

<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
    <!-- 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>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

CSS

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.carousel,
.item,
.active {
    height: 100%;
    margin-bottom: 60px;
}

.carousel-inner {
    height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

IMO, this version is much easier to read anyways. Thanks to @K.C. for the help!

Answer 2

You have fixed height for the carousel and carousel items. Then it obviously will be of that size.

Try this

html,body{
   height:100%;
}
.carousel,.item,.active{
   height:100%;
 }
.carousel-inner{
    height:100%;
}

Look at this question for demo and more.

Even after changing it won't work then you can replace your carousel with this one here DEMO

Also via jquery you can first get the windows total height and set it to the height of your carousel wrapper and other elements as accordingly.

$(document).ready(function(){
   var height = $(window).height();  //getting windows height
   jQuery('#myCarousel').css('height',height+'px');   //and setting height of carousel
});

Answer 3

It may be because of the media queries of the bootstrap class trying to set the max-width to a smaller size. You can apply a custom class to the carousel and override the max-width to fit the screen.

.custom-carousel {
  max-width:100%;
  width:100%;
}

HTML:

<div id="carousel1" class="carousel carousel-fade custom-carousel" data-ride="carousel">

<!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="Outside"></div>
      <div class="carousel-caption">
      </div>
    </div>
   </div>
</div>

Answer 4

I had a similar requirement, and I found that below bootstrap class pretty much does the job.

class="d-block w-100 h-100"

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQMueyisr8wYKRW8wS4G19HmwvGg_T_j5U3LgBfSPmdUc8aq-AX" class="d-block w-100 h-100" >

:

Answer 5

Kinda late to the party... but rather late then never I suppose.

Anyways, I took a different approach to this.

CSS:

html, body, .carousel,  .carousel-inner, .carousel-inner .item {
   height: 100%;
}

.Outside {
    background-image: url("../Your/Image/Path/Outside.jpg");
    z-index: -2;
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

HTML:

<div id="carousel1" class="carousel carousel-fade" data-ride="carousel">

<!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="Outside"></div>
      <div class="carousel-caption">
      </div>
    </div>
   </div>
</div>

Hope this helps.

Answer 6

Here's an easy solution that worked for me.

Add this class to your image tag inside carousel-inner div.

CSS:

.carousel-img-width {
  width: 100%;
}

HTML:

<img src="img_url" alt="text" class="carousel-img-width">