Is it possible to fade out a Devise alert with Twitter Bootstrap or CSS selectors?

Question

Building a web app with rails, bootstrap, and my user authentication is using Devise.

I am able to get the Devise 'User Signed In' and 'User Signed Out' alert/notices to display, but they stay static on the page and don't look very nice. Is there any way to make these alerts fade in/out, but most importantly, out?

I have tried using the bootstrap .fade .in classes but they just cause the alerts to not appear at all.

      <% if notice.present? %>
        <p class="alert alert-info fade-in col-4 offset-4"><%= notice %></p>
      <% end %>
      <% if alert.present? %>
        <p class="alert alert-danger col-4 offset-4"><%= alert %></p>
      <% end %>

I was hoping to be able to use simple Bootstrap classes/CSS selectors to make it work, or even some ruby code, but I haven't been able to come up with anything yet.

Answer 1

I would suggest you use bootstrap toast.

.alert {
  animation: hideMe 10s 1;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
@keyframes hideMe {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<p class="alert alert-info fade-in col-4 offset-4">test</p>