I'm trying to place a blue border at the end of the images that are inside the carousel, but I could not, this is my HTML code for the carousel. how could you add that border ?, the top border of the image is blue, the same border has to be at the bottom after the image, please help this is my CSS and HTML code
<div class="row fila2">
<!----inicio columna 2----->
<div class="col-12 imagenesc">
<!----inicio carousel----->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="imagenes/20130819180556.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="imagenes/20130819180644.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Nextborder</span>
</a><!----fin carousel----->
</div>
</div>
Please check this. Its working. Please remove row
and col-12
class.
.fila2 img {
max-width: 100%;
border: 5px solid #219ED6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="fila2">
<!----inicio columna 2----->
<div class="imagenesc">
<!----inicio carousel----->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://dummyimage.com/1920x700/000/fff.jpg&text=sample+image" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://dummyimage.com/1920x700/000/fff.jpg&text=sample+image2" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Nextborder</span>
</a><!----fin carousel----->
</div>
</div>