Link Bootstrap with my caroussel's image disappears - html

Question

I have this carousel which works fine, i need to add the bootstrap 4 style to my page, whenever i add the link, my carousel's pictures disappear.
I tried to figure out if there is anything confusing between the classes but still can't find anything, i also tried to add '!important' to the img tag in css but still can't solve it, what seems to be the problem ? Thanks.
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>