Ricardo Roa Ricardo Roa - 11 months ago 121
jQuery Question

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

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>


screenshot

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download