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

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
});

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!

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.