Bootstrap carousel box-shadow doubling during slide transition

Report · Sep 15, 2024

I have a bootstrap carousel in which the bootstrap "row" for each slide has a box-shadow applied. When the slide is transitioning the second slide shadow appears and doubles on top of each other (making the shadow look darker). I've tried to figure out how to apply it to a parent container so it won't show on each slide thus doubling up but have had no luck.

.row {
    padding:70px !important;
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 14px 40px 0 rgba(0, 0, 0, 0.15);
}

<!DOCTYPE html>
<html lang="zxx"><head>

    <!-- Meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/8ba63ee074.js" crossorigin="anonymous"></script>
</head>
<body class="background">
<div id="myCarousel" class="carousel slide carousel-fade"  data-bs-theme="light">
    <div class="carousel-inner">
		<img src="./img/pattern-quotes.svg" class="quote"/>
        <div class="carousel-item active">
            <div class="container">
                <div class="carousel-caption text-start">
                    <div class="row"> 
<img src="./img/pattern-curve.svg" class="curve"/> 
                        <div class="col-xs-12 col-md-6">
                            <div class="carousel-content">
                                    <p class="carousel-desc-txt quote-text">" I've been interested in coding for a while but never taken the jump, until now. I couldn't recommend this course enough. I'm now in the job of my dreams and so excited about the future. "</p>
									<div class="carousel-desc-txt first-name">
Tanya Sinclair <span class="last-name">UX Engineer</span> 
</div>
                            </div>
                        </div>

                        <!-- Carousel Image -->
                        <div class="col-xs-12 col-md-6">
                            <div class="position-relative h-100">
                                <div class="carousel-media">
                                    <img src="./img/tanya-sinclair.jpg" alt="Tanya Sinclair Photo" class="carousel-img">
									<div class="nav-container">
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
        <i style="color: #202046; padding-top: 13px;" class="fa-solid fa-chevron-left"></i>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
        <i style="color: #202046; padding-top: 13px" class="fa-solid fa-chevron-right"></i>
    </button>
	</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
             <div class="container">
                <div class="carousel-caption text-start">
                    <div class="row">
						<img src="./img/pattern-curve.svg" class="curve"/> 
                        <div class="col-xs-12 col-md-6">
                            <div class="carousel-content">
                                    <p class="carousel-desc-txt quote-text">" If you want to lay the best foundation possible I'd recommend taking this course. The depth the instructors go into is incredible. I now feel so confident about starting up as a professional developer. "</p>
									<div class="carousel-desc-txt first-name"> 
John Tarkpor <span class="last-name">Junior Front-end Developer</span> 
</div>
                            </div>
                        </div>
						
                       <div class="col-xs-12 col-md-6">
                            <div class="position-relative h-100">
                                <div class="carousel-media">
                                    <img src="./img/john-tarkpor.jpg" alt="John Tarkpor Photo" class="carousel-img">
									<div class="nav-container">
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
        <i style="color: #202046; padding-top: 13px" class="fa-solid fa-chevron-left"></i>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
        <i style="color: #202046; padding-top: 13px" class="fa-solid fa-chevron-right"></i>
    </button>
	</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	
</div>
<!-- JavaScripts -->
<script src="./js/bootstrap.bundle.min.js"></script>
	<script type="text/javascript">

jQuery(document).bind('keyup', function(e) {

  if (e.keyCode==39) {
      jQuery('a.carousel-control.right').trigger('click');
  }   

  else if(e.keyCode==37){
      jQuery('a.carousel-control.left').trigger('click');
  }

});

</script>

</body>
</html>

 url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body {
    font-family: "Inter", system-ui;
    font-weight: 300;
    font-style: normal;
    background-color: #ffffff;
    position: relative;
}
.background {
	background: url("../img/background.png") ;
		background-repeat:no-repeat;
background-size:cover;
background-position:center;;
}

.nav-container {
	width:100px;
	height: 20px;
	background-color: #ffffff;
	border: 2px;
	border-radius: 25px;
	position: absolute;
	left: 20%;
	bottom:4%;
	z-index: 2;
	padding: 25px
}
.curve {
height: 130px;
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  margin:auto;
	width: auto;
}
.quote {
  display:block;
  position:absolute;
  left:26%;
  bottom:58%;
  margin:auto;
	width: 110px;
	z-index: 2;
}
.first-name {
	font-size: 18px;
	padding-top:15px;
	color:#202046;
	font-weight:700;
	line-height: 2
}
.last-name {
		color:#babacf;
	font-weight:500;
	font-size: 18px;
	}

.abstract {
  display:block;
  position:absolute;
  left:-11%;
  bottom:-8%;
  margin:auto;
	z-index: 1;
}
.carousel {
    min-height: 100vh;
    position: relative;
    z-index: 1;
}
.carousel-control-next,
.carousel-control-prev {
    width: auto;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: upright;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.15rem;
    letter-spacing: .5rem;
    opacity: 1;
}
.carousel-control-prev {
    left: 1rem;
}
.carousel-control-next {
    right: 1rem;
}
.carousel-caption {
    padding: 0;
    bottom: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 10;
    position: relative;
    left: 0;
    right: 0;
    min-height: 100vh;
}
.carousel-inner {
    overflow-y: auto;
}
.carousel-inner,
.carousel-item {
    height: 100%;
}

/* transitions */
.carousel-img {
    -webkit-transform: translate3d(100px,0,0);
            transform: translate3d(100px,0,0);
    -webkit-transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), -webkit-transform .8s cubic-bezier(.175,.885,.32,.1);
    transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), -webkit-transform .8s cubic-bezier(.175,.885,.32,.1);
    -o-transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), transform .8s cubic-bezier(.175,.885,.32,.1);
    transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), transform .8s cubic-bezier(.175,.885,.32,.1);
    transition: opacity 3s cubic-bezier(.175,.885,.32,1.275), transform .8s cubic-bezier(.175,.885,.32,.1), -webkit-transform .8s cubic-bezier(.175,.885,.32,.1);
}
.carousel-fade .carousel-item {
    opacity: 0;
    display: block;
}
.carousel-item-next.carousel-item-start .carousel-img,
.carousel-item-prev.carousel-item-end .carousel-img,
.carousel-item.active .carousel-img {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.active.carousel-item-start .carousel-img,
.active.carousel-item-end .carousel-img {
    opacity: 0;
    -webkit-transform: translate3d(100px,0,0);
            transform: translate3d(100px,0,0);
}

.carousel-desc-txt  {
    -webkit-transform: translate3d(300px,0,0);
            transform: translate3d(300px,0,0);
    -webkit-transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), -webkit-transform 1s cubic-bezier(.175,.885,.32,1.275);
    transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), -webkit-transform 1s cubic-bezier(.175,.885,.32,1.275);
    -o-transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), transform 1s cubic-bezier(.175,.885,.32,1.275);
    transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), transform 1s cubic-bezier(.175,.885,.32,1.275);
    transition: opacity 1s cubic-bezier(.175,.885,.32,1.275), transform 1s cubic-bezier(.175,.885,.32,1.275), -webkit-transform 1s cubic-bezier(.175,.885,.32,1.275);
}


.carousel-item-next.carousel-item-start .carousel-desc-txt,
.carousel-item-prev.carousel-item-end .carousel-desc-txt,
.carousel-item.active .carousel-desc-txt  {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.active.carousel-item-start .carousel-desc-txt,
.active.carousel-item-end .carousel-desc-txt  {
    opacity: 0;
    -webkit-transform: translate3d(100px,0,0);
            transform: translate3d(100px,0,0);
}

.carousel-caption > .row {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
	background: #ffffff
}
.carousel-caption > .row > div {
    height: 100%;
}

.carousel-media {
    position: relative;
    height: 100%;
}
 
.carousel-img {
    max-width: 100%;
	z-index: 1;
	position: relative;
	
}

.carousel-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
	padding-left:19%;
		padding-top: 45px;
}
.quote-text {
    font-size: 2rem;
    margin-bottom: 0;
	color: #202046;
	width: 607px;
	letter-spacing: .5px;
	line-height: 1.35;
	z-index: 2;
	position: relative
}
.row {
	padding:70px !important;
	 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 14px 40px 0 rgba(0, 0, 0, 0.15);
}

/* responsive */
@media only screen and (max-width: 1199px) {
    .carousel-control-prev {
        left: 1.5rem;
    }
    .carousel-control-next {
        right: 1.5rem;
    }
    .carousel-content {
        padding-left: 2rem;
    }
}

@media only screen and (max-width: 992px) {
    .quote-text {
        font-size: 1.2rem;
		width: 400px;
    }
	.quote {
	width: 75px;
}
}

@media only screen and (max-width: 768px){
    .quote-text {
        font-size: 1.1rem;
		width: 100%;
		text-align: center;
    }
    .carousel-caption .row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    .carousel-content {
        margin-top: 4rem;
        padding: 0 1rem;
    }

	.quote {
	width: 65px;
		left: 43%;
		bottom: 33%;
}
	.carousel-desc-txt {
		text-align: center;
	}
	.first-name {
		font-size: 16px;
		width:100%;
		display:block;
		line-height: 1.35
	}
	.last-name {
		font-size: 16px;
		width: 100%;
		display: block
	}
	.nav-container {
	left: 37%;
	bottom:3%;

}
	.carousel-control-prev {
        left: .8rem;
    }
    .carousel-control-next {
        right: .8rem;
    }
	.curve {
height: 60px;
		left: -3%;
		bottom: -7%
}
	.carousel-media {
		width:90%;
		margin: 0 auto
	}
	.row {
	padding:0px !important;
		box-shadow: none;
}
	

	
}

Report · Sep 15, 2024

For the sake of simplicity, let's focus on the version of Bootstrap and the Carousel component parts.

In Bootstrap 5, the shadow-box utility classes are:

<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>

I applied a large shadow class to the main carousel slide. The optional p-3 and m-4 adds some padding & margins around the carousel. See screenshot.

You can try it on W3Schools' website.

https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_carousel

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 15, 2024

Hi Nancy,

Thansk for your response. The main carousel slide takes up the whole background. The shadow needs to just be around that row div. I can apply shadows like the w3schools link. The problem is that i need another parent container or something to make the shadow appear just like it does when applied to the row.

See the screenshot with the highlighted code in the inspector. The slide has a min-height 0f 100vh.

Report · Sep 15, 2024

<div class="carousel-inner border p-3">

Outer & inner border results:

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 15, 2024

Hi this isn't working and still confused. The classes you supplied are adding the border to the whole main container like the screenshot I sent and not where the row is. Do I need another container for just the shadow?.

Report · Sep 15, 2024

You're making this more complicated than it needs to be. Carousel works as expected out of the box. No custom CSS or extra divs needed.

At its core, Carousel is two main containers -- carousel & carousel-inner.

Within the inner container are individual items or slides. That's it.

For learning purposes, turn off your custom CSS and focus on the Carousel component as Bootstrap intended it to be used. Later, if you want to add back some custom styles, do it one at a time so you can see what effect your custom styles have on site performance. Keep notes.

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 16, 2024

Hi Nancy,

Thanks so much for your help I finally got it. You were right I was making things harder for myself. :). I figured how to apply the shadow to the inner class div correctly and got it working.

Bootstrap carousel box-shadow doubling during slide transition

1 Correct answer