How to make background image in Bootstrap 4 carousel full-width?
There's a great answer here, including working demo: https://startbootstrap.com/template-overviews/full-slider/
Put the following in an HTML page (you'll need to download Bootstrap 4 or replace links with CDN):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Full Slider - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="../Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../Scripts/bootstrap.bundle.min.js"></script>
</head>
<body>
<style>
.carousel-item {
height: 100%;
min-height: 300px;
background: no-repeat center center scroll;
background-size: cover;
}
</style>
<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('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>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('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>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('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>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>
</body>
</html>
Related videos on Youtube
chris45
Updated on June 04, 2022Comments
-
chris45 almost 2 years
I have a 2 slide carousel that I've written with Bootstrap 4. Each slide has an image as its background, but I'm having trouble making these images full width.
Usually I'd use
background-size: cover
,background-attachment: fixed;
andbackground-repeat: no-repeat
to achieve a similar effect on a webpage, but I can't get this to work with the carousel.My code is below. I've tried to apply the background size, attachment and cover to the following classes:
.carousel
,.carousel-inner
,.carousel-item
, andimg
within the carousel.<div id="officeCarousel" class="carousel slide" data-ride="carousel" style="width:100%;"> <ol class="carousel-indicators"> <li data-target="#officeCarousel" data-slide-to="0" class="active"></li> <li data-target="#officeCarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="office1.png" alt="First slide"> <div class="carousel-caption d-none d-md-block"> <div class="card card-inverse card-success mb-3 text-center"> <div class="card-block"> <h4 class="card-title">Office 1</h4> <p class="card-text">Work from the heart of the newly renovated area.</p> <a href="#" class="card-link">About this office</a> <a href="#" class="card-link">Book this office</a> </div> </div> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="office2.jpg" alt="Second slide"> <div class="carousel-caption d-none d-md-block"> <div class="card card-inverse card-success mb-3 text-center"> <div class="card-block"> <h4 class="card-title">Office 2</h4> <p class="card-text">Work from this inner-city rural village.</p> <a href="#" class="card-link">About this office</a> <a href="#" class="card-link">Book this office</a> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#officeCarousel" 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="#officeCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
Any help much appreciated!
Edit: CSS for relevant sections below. This is default V4 Bootstrap CSS.
.carousel { position: relative; } .carousel-inner { position: relative; width: 100%; overflow: hidden } .carousel-item { position: relative; display: none; width: 100% }
-
Zim about 7 yearsMaybe you can include the CSS too?
-
Matthew Brent about 7 yearsmake sure that the carousel is not in a container as this would have a max width.
-
chris45 about 7 yearsZimSystem, absolutely! I'll edit my original question now to includee CSS.
-
-
ffuentes over 4 yearsLink provided is outdated.
-
mLstudent33 almost 4 yearsDoesn't work for me but my default Bootstrap Carousel HTML looks a bit different.