Bootstrap Carousel Full Screen

Answer :

Update Bootstrap 4

Bootstrap 4 has utility classes that make it easier to create a full screen carousel. For example, use the min-vh-100 class on the carousel-item content...

<div class="carousel slide" data-ride="carousel">       <div class="carousel-inner bg-info" role="listbox">             <div class="carousel-item active">                 <div class="d-flex align-items-center justify-content-center min-vh-100">                     <h1 class="display-1">ONE</h1>                 </div>             </div>       </div> </div> 

Full screen carousel demo

This works to make the carousel items full screen, but carousel items that contain images or videos that have a specific size & aspect ratio require further consideration.

Since the viewport h/w ratio is likely to be different than the image or video h/w ratio, usually background images or object-fit are commonly used to size images and videos to "full screen". For videos, use the Bootstrap responsive embed classes as needed for the video ratio (21:9, 19:9, etc...).

Full screen videos demo

Also see: https://stackoverflow.com/a/58765043/171456

---

Original answer (Bootstrap 3)

Make sure the img inside the carousel item is set to height and width 100%. You also have to make sure the carousel and any of the .item containers (html,body) are 100%...

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

Boostrap 3 Full Screen Carousel Demo

Here's an example for Bootstrap 3.x: http://www.codeply.com/go/2tVXo3mAtV

This is how I did it. This makes the images in the slideshow take up the full screen if it´s aspect ratio allows it, othervice it scales down.

.carousel {     height: 100vh;     width: 100%;     overflow:hidden; } .carousel .carousel-inner {     height:100%;     } 

To allways get a full screen slideshow, no matter screen aspect ratio, you can also use object-fit: (doesn´t work in IE or Edge)

.carousel .carousel-inner img {     display:block;     object-fit: cover; } 

I found an answer on the startbootstrap.com. Try this code:

CSS

html, body {     height: 100%; }  .carousel, .item, .active {     height: 100%; }   .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; }  footer {     margin: 50px 0; } 

HTML

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

Source