我试图在图片底部添加一个简短的描述，但我只能在顶部添加一个粗体标题。需要帮忙。这是我的代码。我尝试了几种选择，但没有运气。对 JS 不太了解，所以请像完全初学者一样向我解释。
<!-- gallery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js">
</script>
<script>$(document).on('click','[data-toggle="lightbox"]',function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
</script>
<!-- end-->
</head>
<body>
<h2>A Plan for Every Dog's Needs</h2>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="row mb-4">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-
gallery="example-gallery"
data-class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery"
class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery"
class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
</a>
</div>
<div class="row mb-4">
<a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery"
class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery"
class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery"
class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">
</a>
</div>
</div>
</div>
</body>