Ссылка Bootstrap с изображением моей карусели исчезает

Question

У меня есть эта карусель, которая работает нормально, мне нужно добавить стиль bootstrap 4 на мою страницу, всякий раз, когда я добавляю ссылку, изображения моей карусели исчезают.

Я попытался выяснить, есть ли что-то путаница между классами, но все еще не могу ничего найти, я также попытался добавить «важное» к тегу img в css, но все еще не могу решить это, в чем проблема? Спасибо.

  var carousel = document.querySelector('.acc-carousel');
var container = carousel.querySelector('.carousel-container');
var prevBtn = carousel.querySelector('.carousel-prev');
var nextBtn = carousel.querySelector('.carousel-next');
var pagination = carousel.querySelector('.carousel-pagination');
var bullets = [].slice.call(carousel.querySelectorAll('.carousel-bullet'));
var totalItems = container.querySelectorAll('.carousel-item').length;
var percent = (100 / totalItems);
var currentIndex = 0;

function next() {
    slideTo(currentIndex + 1);
}

function prev() {
    slideTo(currentIndex - 1);
}

function slideTo(index) {
    index = index < 0 ? totalItems - 1 : index >= totalItems ? 0 : index;
    container.style.WebkitTransform = container.style.transform = 'translate(-' + (index * percent) + '%, 0)';
    bullets[currentIndex].classList.remove('active-bullet');
    bullets[index].classList.add('active-bullet');
    currentIndex = index;
}

bullets[currentIndex].classList.add('active-bullet');
prevBtn.addEventListener('click', prev, false);
nextBtn.addEventListener('click', next, false);

pagination.addEventListener('click', function(e) {
    var index = bullets.indexOf(e.target);
    if (index !== -1 && index !== currentIndex) {
        slideTo(index);
    }
}, false);

.text{
    position: absolute;
    /* width: 100px; */
    /* height: 50px; */
    background-color: red;
    top: 52%;
    left: 44%;
    text-align: center;
    transform: translate(0%, 50%);
}


.container {
    width: 80%;
    margin: 0 auto;
 

}

.carousel-item > div {
    height: 400px;
    line-height: 500px;
    font-size: 1.5em;
    text-align: center;
    color: #fff;
}

img {
    width: 100%;
  height: 100%;
}
/* Carousel */

.acc-carousel {
    position: relative;
    overflow: hidden;
    height: 300px;
    width: 100%;
}

.carousel-container {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 500%;
    transition: transform 0.3s cubic-bezier(.694, .0482, .335, 1);
}

.carousel-item {
    position: relative;
    float: left;
    width: 20%;
}

/* Next / Prev Buttons */

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    background-color: #222;
    opacity: 0.7;
    border-radius: 50%;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.carousel-prev {
    left: 2%;
    padding-right: 3px;
}

.carousel-prev::before {
    content: '\f053';
    font-family: "FontAwesome";
}

.carousel-next {
    right: 2%;
    padding-left: 3px;
}

.carousel-next::before {
    content: '\f054';
    font-family: "FontAwesome";
}

.carousel-prev:hover,
.carousel-next:hover {
    opacity: 1;
}

/* Pagination */

.carousel-pagination {
    list-style: none;
    position: absolute;
    bottom: 3%;
    left: 0;
    right: 0;
    width: 50%;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    z-index: 10;
}

.carousel-bullet {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #000;
    cursor: pointer;
    margin: 0 7px;
    border-radius: 50%;
    opacity: 0.5;
    transition-property: transform, opacity, background-color;
    transition-duration: 0.3s;
}

.carousel-bullet:hover {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.carousel-bullet.active-bullet, 
.carousel-bullet.active-bullet:hover {
    opacity: 1;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    background-color: #fff;
    cursor: default;
}

<!--If i link Bootstrap 4 css, pictres will disappear -->

<!-- Bootstrap 4 css :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css'>


<div class="container">
    <div class="acc-carousel">
        <div class="carousel-prev"></div>
        <div class="carousel-next"></div>
        <ul class="carousel-pagination">
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
            <li class="carousel-bullet"></li>
        </ul>
        <ul class="carousel-container">
            <li class="carousel-item">
                <div class="item-1 img-fluid">
                    <img src="https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg" />
                </div>
                <p class="text">First image</p>
            </li>
            <li class="carousel-item">
                    <div class="item-2 img-fluid">
                            <img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" />
                        </div>
                <p class="text">Second image</p>
            </li>
            <li class="carousel-item">
                <div class="item-3"></div>
            </li>
            <li class="carousel-item">
                <div class="item-4"></div>
            </li>
            <li class="carousel-item">
                <div class="item-5"></div>
            </li>
        </ul>
    </div>
</div>