<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <header> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <!-- Slide One - Set the background image for this slide in the line below --> <div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')"> <div class="carousel-caption d-none d-md-block"> <h2 class="display-4">First Slide</h2> <p class="lead">This is a description for the first slide.</p> </div> </div> <!-- Slide Two - Set the background image for this slide in the line below --> <div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')"> <div class="carousel-caption d-none d-md-block"> <h2 class="display-4">Second Slide</h2> <p class="lead">This is a description for the second slide.</p> </div> </div> <!-- Slide Three - Set the background image for this slide in the line below --> <div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')"> <div class="carousel-caption d-none d-md-block"> <h2 class="display-4">Third Slide</h2> <p class="lead">This is a description for the third slide.</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </header> <!-- Page Content --> <section class="py-5"> <div class="container"> <h1 class="display-4">Full Page Image Slider</h1> <p class="lead">The background images for the slider are set directly in the HTML using inline CSS. The images in this snippet are from <a href="https://unsplash.com">Unsplash</a>, taken by <a href="https://unsplash.com/@joannakosinska">Joanna Kosinska</a>!</p> </div> </section> <!-- Page Content --> <div class="container"> <!-- Portfolio Item Heading --> <h1 class="my-4">Page Heading <small>Secondary Text</small> </h1> <!-- Portfolio Item Row --> <div class="row"> <div class="col-md-8"> <img class="img-fluid" src="http://placehold.it/750x500" alt=""> </div> <div class="col-md-4"> <h3 class="my-3">Project Description</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p> <h3 class="my-3">Project Details</h3> <ul> <li>Lorem Ipsum</li> <li>Dolor Sit Amet</li> <li>Consectetur</li> <li>Adipiscing Elit</li> </ul> </div> </div> <!-- /.row --> <!-- Related Projects Row --> <h3 class="my-4">Related Projects</h3> <div class="row"> <div class="col-md-3 col-sm-6 mb-4"> <a href="#"> <img class="img-fluid" src="http://placehold.it/500x300" alt=""> </a> </div> <div class="col-md-3 col-sm-6 mb-4"> <a href="#"> <img class="img-fluid" src="http://placehold.it/500x300" alt=""> </a> </div> <div class="col-md-3 col-sm-6 mb-4"> <a href="#"> <img class="img-fluid" src="http://placehold.it/500x300" alt=""> </a> </div> <div class="col-md-3 col-sm-6 mb-4"> <a href="#"> <img class="img-fluid" src="http://placehold.it/500x300" alt=""> </a> </div> </div> <!-- /.row --> </div> <!-- /.container -->

.carousel-item { height: 100vh; min-height: 350px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }