How does one change the opacity of a Bootstrap 5.2 toast?

Question

My toast overlaps some buttons and the default opacity is too low and it makes reading the message difficult.

Here is my toast markup:

<div class="toast-container p-3 top-0 end-0" id="toastPlacement" data-original-class="toast-container p-3">
    <div id="root" class="toast align-items-center fade animate" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div class="toast-body" id="toastMessage">
          Hello World
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
</div>

I have tried simply setting style="opacity: 1" on the 'root' element, but that did nothing.

I've looked around online, but none of the suggestions I found work.

Also, is there any finer grained control of the position of the Toast other than Left, middle, Right? I'd like to position it by a percentage or fixed value if possible.

Answer 1

Ok, for anyone not already a web/bootstrap guru, the trick here is the background color on the .toast class is set to be translucent (85%).

So in your own css file, make a style like so:

.bg-solid-white {
    background-color: whitesmoke !important;
}

Obviously use whatever color and class name you like, then:

<div class="toast-container p-3 top-0 end-0" id="toastPlacement" data-original-class="toast-container p-3">
    <div id="root" class="toast align-items-center fade animate bg-solid-white" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div class="toast-body" id="toastMessage">
          ${this.message}
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
</div>

And there you have it, a solid background.