Blueimp Gallery CSS does not work with Bootstrap 4

Question

See the code below:

document.getElementById('links').onclick = function(event) {
  event = event || window.event;
  var target = event.target || event.srcElement,
    link = target.src ? target.parentNode : target,
    options = {
      index: link,
      event: event
    },
    links = this.getElementsByTagName('a');
  blueimp.Gallery(links, options);
};

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/css/blueimp-gallery.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/js/blueimp-helper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/js/blueimp-gallery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/js/blueimp-gallery-fullscreen.js"></script>


<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a>
  <a class="next">›</a>
  <a class="close">×</a>
  <a class="play-pause"></a>
  <ol class="indicator"></ol>
</div>

<div id="links">
  <a href="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" title="Avião">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Avião" width="50">
    </a>
  <a href="https://homepages.cae.wisc.edu/~ece533/images/pool.png" title="Pool">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" alt="Pool" width="50">
    </a>
</div>

The outworking that I hope is like this:

You can see that the image above, the button (next, previous and close) is white when positioning on top. Already my code looks like this:

What am I doing wrong? Any solution ?

Answer 1

Your problem is that the Bootstrap reebot is applying this CSS. Note that the color is as inherit. But in this way he inherits the "wrong" color inherited from body

This is the CSS of reebot.scss that is applying the wrong color to the element with color: inherit;. Note that this class has a great strength and it is complicated to overwrite it without having to use a !important or a #id, then the ideal and replicate it in CSS override CSS and put the color you want.

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

a:not([href]):not([tabindex]):focus, 
a:not([href]):not([tabindex]):hover {
    color: inherit;
    text-decoration: none;
}

A workaround would you make a override of that class in your custom.css or some other CSS you are calling there after the bootstrap.css and then put the color you want.