add border to the bottom of div after image inside carousel in bootstrap4

Question

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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

add border to the bottom of div after image inside carousel in bootstrap4

Sign up