Would you like to show a beautiful notifications dropdown on your website? I have created a small code snippet to embellish the default Bootstrap 4 dropdown and to achieve the desired result.

You can see the result / demo of this notifications dropdown by clicking here.

To achieve that result, I have simply based my code on the default Bootstrap 4 dropdown component in a navbar. Mostly the CSS but also the HTML have been updated to make a beautiful and easy to integrate notifications component.

In our case, and to achieve the result of the demo, no need to write any jQuery code since Bootstrap already includes the mechanism to show / hide the dropdown. You can read more about it on the Bootstrap 4 documentation.

You can download the sources behind this notifications dropdown and integrate them onto your website :

In another article, I will cover how to fetch some notifications from a database to automatically show them into this dropdown using jQuery and Ajax… So don’t forget to subscribe at the end of this article if you want to be informed when this article will be realized.

If you liked this little source code or if you have any questions, feel free to leave a comment below.