Adding auto-incrementing badges to icons in Bootstrap 4.0

That facebook icon that tells you how many new messages you have? Useful, huh? You don’t leave the page, and it gets updated. It’s a little trick done with a combination of SQL and asynchronous jQuery.

I needed to implement notifications for a few applications at work, so I’ve found a way to implement this with just a few lines of jQuery and an asynchronous call to the database.

I’ve put this example up on bootsnipp:

https://bootsnipp.com/snippets/PDPN5

Check it out! On bootsnipp, it’s just pulling a number from random.org and refreshing for demo purposes, but the source of the number can be replaced with an SQL count(*) query.