Currently, I am utilizing Bootstrap 4.6 and not able to make the switch to BS 5 just yet. Is there a way for me to modify the opacity of toasts to be completely opaque?
This is how my toast appears:
<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 attempted to include in our CSS stylesheet (loaded after Bootstrap CSS) the following code:
.toast {
opacity: 1;
}
However, this adjustment did not yield the intended outcome.
Therefore, how can I alter the translucency of the toasts?