Bug with carousel with Bootstrap 4 - css

Question

I trying make a carousel using bootstrap 4, but I have a problem with arrows and cycles. Using bootstrap 3 it's work perfectly, including the CSS. I have already changed the item class to carousel-item as it sends the documentation, but still I am not having success. I think the problem is very simple, but I can not find it. Could someone help me with this? I would appreciate it and apologize if you infiltrate some stackoverflow rule
My code is:
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
/* The indicators */
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
margin: 0 auto;
}
/* The colour of the indicators */
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.carousel-item-->
<div class="carousel-item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.carousel-item-->
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div>
<!--.Carousel-->
What can be this error?

Answer 1

The icons are not showed because you need to add a inside the tags and you can use predefined classes of bs carousel for controlling it:
<a id="previous" class="carousel-control-prev" href="#carrousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a id="after" class="carousel-control-next" href="#carrousel" data-slide="next">
<span class="carouse`enter code here`l-control-next-icon"></span>
</a>

Answer 2

In order for bootstrap 4 Carousel to work you have to add jquery, popper and bootstrap js files to your project.
You can see in the link a section named Show components requiring JavaScript, in it your can see Carousel for all slide behaviors, controls, and indicators,
In the code you've added there is no sign for theme and this could be your problem.
You can see in this DEMO that your buttons are working. Take a look at index.html file where I've added this js file scripts (removing theme will reproduce your problem where the buttons are not working).