Bootstrap Carousel 100 Height and Width

How to create Bootstrap Carousel Full Screen 100% width and height?

Easy. You just need to think how you can do this best way, i really don't like that the default bootstrap carousel example uses HTML img tag as the background of carousel. So i add css class to each item that defines the background in css file, it makes a lot better carousel and lot easier to customize it. With css background you can easy align background using css background-position tag, bellow you will see my example and how to do this best way. If you don't want to see tutorial you can skip it and at the bottom you will find demo and download link. This won't take a lot of time for you to do this, first you need to remove html img tag from your html page, after that is done, you need to add some css classes to your html page. Find div with class item, in original bootstrap example there will be three items, after that you need to add more classes, add to class item, classes bg and bg1 to next bg and bg2, and so on.

<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>

These lines should look like this now:

<div class="item bg bg1 active"></div>
<div class="item bg bg2"></div>
<div class="item bg bg3"></div>

When this is done we have to do some little css to add styling to our carousel. I won't do this step by step, but i will tell you what i have done here. First of all, i removed all defined height's, add html, body styles, that say that the html and body is 100% height with no padding and margin and after that is done, i add the same styles to carousel class. Next step was to create our new classes bg, bg1, bg2, bg3. The first class, bg is the main class with say that background shouldn't be repeated and it should be cover size in next classes bg1, bg2, bg3 we add background image and set it position. The position is set so you could customize you background position, let's say you have different pixel images, like one is 1200x800 and second is 600x400, by the default it would show both images top, but now you can customize it to center, center center, center top and so on.

html, body {
height:100%;
margin:0;
padding:0;
}
.carousel, .item, .active {
height:100%;
}
.carousel-inner {
height:100%;
}
.carousel {
margin-bottom: 60px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
background-color: #777;
}
.carousel .carousel-inner .bg {
background-repeat:no-repeat;
background-size:cover;
}
.carousel .carousel-inner .bg1 {
background-image:url(bg1.jpg);
background-position: center top;
}
.carousel .carousel-inner .bg2 {
background-image:url(bg2.jpg);
background-position: center center;
}
.carousel .carousel-inner .bg3 {
background-image:url(bg3.jpg);
background-position: center bottom;
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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 bg bg1 active">
<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 bg bg2">
<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 bg bg1">
<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" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

More tips

The carousel shouldn't be in any other div, like for example div with class container. You can align image position in classes bg1, bg2, bg3 using css background-position. You can see it in demo.

Update 07.26.2015

Compatible with Bootstrap 3.3.5 Updated demo. Updated download.

DOWNLOAD DEMO