I am using Boostrap 4.6 (and I cannot upgrade to BS 5 yet). How can I change the translucency of toasts to fully opaque?
My toast looks like this:
<div id="help" style="position: fixed; top: 0.5vw; bottom: 0.5vw; right: 10vw;">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Help for <%=systemName%></strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
hallo
<!-- <zero-md src="help/hallswell_all_towers.md"></zero-md> -->
</div>
</div>
</div>
I tried to add in our CSS style sheet (which is loaded after the Bootstrap CSS) the following:
.toast {
opacity: 1;
}
but this does not have the desired effect.
So, how can I change the translucency of toasts?