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