How To Get Bootstrap Carousel To Fit 100% To Screen?

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

Solution 1:

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 heightjQuery('#myCarousel').css('height',height+'px');   //and setting height of carousel
});

Solution 2:

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 --><headerid="myCarousel"class="carousel slide"><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li></ol><!-- Wrapper for Slides --><divclass="carousel-inner"><divclass="item active"><!-- Set the first background image using inline CSS below. --><divclass="fill"style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div><divclass="carousel-caption"><h2>Caption 1</h2></div></div><divclass="item"><!-- Set the second background image using inline CSS below. --><divclass="fill"style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div><divclass="carousel-caption"><h2>Caption 2</h2></div></div><divclass="item"><!-- Set the third background image using inline CSS below. --><divclass="fill"style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div><divclass="carousel-caption"><h2>Caption 3</h2></div></div></div><!-- Controls --><aclass="left carousel-control"href="#myCarousel"data-slide="prev"><spanclass="icon-prev"></span></a><aclass="right carousel-control"href="#myCarousel"data-slide="next"><spanclass="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!

Solution 3:

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:

<divid="carousel1"class="carousel carousel-fade"data-ride="carousel"><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#carousel1"data-slide-to="0"class="active"></li><lidata-target="#carousel1"data-slide-to="1"></li><lidata-target="#carousel1"data-slide-to="2"></li></ol><!-- Wrapper for slides --><divclass="carousel-inner"role="listbox"><divclass="item active"><divclass="Outside"></div><divclass="carousel-caption"></div></div></div></div>

Hope this helps.

Solution 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"

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

:

Solution 5:

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">