Bootstrap: [New Component] Toast / Notification / Notify / Confirm dialog (like Alert but small and fixed to screen corner)

Created on 18 Jan 2017  路  8Comments  路  Source: twbs/bootstrap

Couldn't find any similar component currently in BS4.

Notifications ("toasters") are very common part of modern UI which can be used to send small notifications to a user (confirm action, new message received, action with confirmation, etc)

I have own Notify component based on BS4 Alert styles.

What is your opinion on adding a new component or extending Alert with classes like alert-fixed-top-right?

css feature has-pr v4

Most helpful comment

Following your logic we should remove all components from BS4.

if you don't need something - you don't need to import it.

Talking about the huge config/vars file - may be it is better to define variables in component's file and not everything in one big file?

All 8 comments

We could start from adding a new position utilities - fixed-top-right, fixed-top-left, fixed-bottom-right, fixed-bottom-left

Could be useful but I think it should be a component by itself with its javascript callback and all, not a mod of alerts or a combination of alerts and positioning utilities.

I feel like this is best accomplished via add-on / plugin / external library.
would add bloat to the bootstrap core
just look at all the animation and timing options..
http://codeseven.github.io/toastr/demo.html

perhaps an "official" library of recommended bootsrap friendly (works with) "extensions" / scripts / etc?

Following your logic we should remove all components from BS4.

if you don't need something - you don't need to import it.

Talking about the huge config/vars file - may be it is better to define variables in component's file and not everything in one big file?

Those two works great and are well maintained: Messenger, PNotify.
PNotify has an option to be styled like Bootstrap I think.

I use this in Bootstrap 4 and works like a charm with a few modifications: http://bootstrap-notify.remabledesigns.com

Agree with @giulianovelli and others, best to accomplish this third parties implementations.
Why? there are just way too many options and never mind subjectivity... You are going to have people complaining about the solution used... JS only, CSS only blah blah.

This feels like the tooltip module... ended up removing it for v4 and going for a third party engine. Yet the third party option works well but at the price of s script size...

If any body needs notification toast here is my code for toasts written for picnic css framework but it can we used anywhere https://jsfiddle.net/sagar313/n7omj3aL/ Hope it helps.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

knownasilya picture knownasilya  路  3Comments

leomao10 picture leomao10  路  3Comments

ghost picture ghost  路  3Comments

iklementiev picture iklementiev  路  3Comments

bellwood picture bellwood  路  3Comments