I would like to know how to style bs5-lightbox

I hope someone can help a numpty :)

I am using Boostrap 5 and this Lightbox library https://trvswgnr.github.io/bs5-lightbox/

It uses data-toggle="lightbox" to initiate it and is working perfectly.

  <a href="http://fpoimg.com/200x200?text=Forth" data-toggle="lightbox"   data-gallery="gallery" >
      <img src="http://fpoimg.com/200x200?text=Forth"></a>

I would like to apply some css styling eg. lightbox background-color, padding etc but I have no idea where to start.

I used to use the ekko-lightbox for BS4 which had its own CSS but I can't find one for this.

Solution

As I can see, bs5-lightbox library doesn't have it's own stylings, and using BS5 markups and stylings.

So you can apply BS5 stylings and HTML you want.

You can start by browsing .lightbox-carousel (CSS class selector) on your page and create custom styling.

Based on this class you can customize it's child nodes.

img {
  width: 200px;
}

/* this is how you can add stylings to wrapper, f.e. */
.lightbox-carousel.carousel {
  padding: 1rem;
  background: #ffffff7a;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<script type="module">
  import * as Lightbox from 'https://cdn.jsdelivr.net/npm/bs5-lightbox@1.7.8/dist/index.bundle.min.js';
  
  document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => {
    e.preventDefault();
    const lightbox = new Lightbox(el);
    lightbox.show();
  }));
</script>


<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
    <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid my-lightbox-toggle">
</a>