Home / Questions / 399940
Accepted
MNibor
Asked: 2021-10-21 17:16:55 +0800 CST 2021-10-21 17:16:55 +0800 CST

Problem displaying a bootstrap 4 carousel

  • 772

I have an aesthetic problem with the bootstrap 4 carousel that I am implementing. When I open it, it shows me a dark line to the right of the container, the carousel css is as follows:

/* Carousel base class */
.carousel {
   margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
   bottom: 3rem;
   z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
   background-color: white;
}

What I get is more or less this: enter image description here enter image description here

I managed to capture the moment when the image slides from one to another and you can see that between the images there is that dark line. I want to remove it and I don't know how to do it. If someone can give me a hand, I would greatly appreciate it... THANK YOU !!!

css

1 Answers

  1. Best Answer

    I think you have some css overriding your carousel. Like background-colorfor example.

    And the buttons need hrefequal to idof divcarousel. For example: <div id="gallery-carousel" class="carousel slide" data-ride="carousel">and <a class="carousel-control-prev" href="#gallery-carousel" role="button" data-slide="prev" >.

    Here is a Demo with white background and buttons.

    • 1