I have set up a bootstrap carousel to showcase numerous images, with the carousel indicators serving as image icons. I am looking to add horizontal lines above and below these icons. How can I achieve this?
Currently, the icons functioning as carousel indicators are displaying perfectly beneath the main carousel. However, when I insert an hr tag above and below the indicators code block, they end up appearing above the image carousel. I attempted enclosing the indicators code block within a div along with hr tags, but that approach also did not yield the desired result.
<div class="carousel-image">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" style="max-width: 500px; margin: 0 auto;">
<hr id="topLine">
<ol class="carousel-indicators">
@foreach( $album->photos as $photo )
<li data-target="#carouselExampleControls" data-slide-to="{{ $loop->index }}" class="carousel-image-indicator {{ $loop->first ? 'active' : '' }}">
<img src="/storage/photos/{{$photo->album_id}}/{{$photo->photo}}" alt="{{$photo->title}}" width="180">
</li>
@endforeach
</ol>
<hr id="baseLine">
<div class="carousel-inner" role="listbox">
@foreach( $album->photos as $photo )
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<img class="d-block img-fluid" src="/storage/photos/{{$photo->album_id}}/{{$photo->photo}}" alt="{{ $photo->title }}">
</div>
@endforeach
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" style="">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Laravel is being used to populate the carousel successfully. The issue lies in the placement of the HR tags within the code.