Can I use "Bootstrap 5 Notification UI Design snippets with navbar" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Bootstrap 5 Notification UI Design snippets with navbar — Free Alerts Snippet (Bootstrap 5)

Loading…

1<header> 2 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 3 <div class="container"> 4 <a class="navbar-brand" href="#">Navbar</a> 5 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 6 <span class="navbar-toggler-icon"></span> 7 </button> 8 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 9 <ul class="navbar-nav ms-auto"> 10 <li class="nav-item dropdown notification-ui show"> 11 <a class="nav-link dropdown-toggle notification-ui_icon" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 12 <i class="fa fa-bell"></i> 13 <span class="unread-notification"></span> 14 </a> 15 <div class="dropdown-menu notification-ui_dd show" aria-labelledby="navbarDropdown"> 16 <div class="notification-ui_dd-header"> 17 <h3 class="text-center">Notification</h3> 18 </div> 19 <div class="notification-ui_dd-content"> 20 <div class="notification-list notification-list--unread"> 21 <div class="notification-list_img"> 22 <img src="https://i.imgur.com/zYxDCQT.jpg" alt="user"> 23 </div> 24 <div class="notification-list_detail"> 25 <p><b>John Doe</b> reacted to your post</p> 26 <p><small>10 mins ago</small></p> 27 </div> 28 <div class="notification-list_feature-img"> 29 <img src="https://i.imgur.com/AbZqFnR.jpg" alt="Feature image"> 30 </div> 31 </div> 32 <div class="notification-list notification-list--unread"> 33 <div class="notification-list_img"> 34 <img src="https://i.imgur.com/w4Mp4ny.jpg" alt="user"> 35 </div> 36 <div class="notification-list_detail"> 37 <p><b>Richard Miles</b> reacted to your post</p> 38 <p><small>1 day ago</small></p> 39 </div> 40 <div class="notification-list_feature-img"> 41 <img src="https://i.imgur.com/AbZqFnR.jpg" alt="Feature image"> 42 </div> 43 </div> 44 <div class="notification-list"> 45 <div class="notification-list_img"> 46 <img src="https://i.imgur.com/ltXdE4K.jpg" alt="user"> 47 </div> 48 <div class="notification-list_detail"> 49 <p><b>Brian Cumin</b> reacted to your post</p> 50 <p><small>1 day ago</small></p> 51 </div> 52 <div class="notification-list_feature-img"> 53 <img src="https://i.imgur.com/bpBpAlH.jpg" alt="Feature image"> 54 </div> 55 </div> 56 <div class="notification-list"> 57 <div class="notification-list_img"> 58 <img src="https://i.imgur.com/CtAQDCP.jpg" alt="user"> 59 </div> 60 <div class="notification-list_detail"> 61 <p><b>Lance Bogrol</b> reacted to your post</p> 62 <p><small>1 day ago</small></p> 63 </div> 64 <div class="notification-list_feature-img"> 65 <img src="https://i.imgur.com/iIhftMJ.jpg" alt="Feature image"> 66 </div> 67 </div> 68 </div> 69 <div class="notification-ui_dd-footer"> 70 <a href="#!" class="btn btn-success w-100">View All</a> 71 </div> 72 </div> 73 </li> 74 <li class="nav-item"> 75 <a class="nav-link" href="#">Home</a> 76 </li> 77 <li class="nav-item"> 78 <a class="nav-link" href="#">About</a> 79 </li> 80 <li class="nav-item"> 81 <a class="nav-link" href="#">Contact</a> 82 </li> 83 <li class="nav-item"> 84 <a class="nav-link" href="#">Login</a> 85 </li> 86 <li class="nav-item"> 87 <a class="nav-link" href="#">Signup</a> 88 </li> 89 </ul> 90 </div> 91 </div> 92 </nav> 93 </header>

Bootstrap 5 Notification UI Design snippets with navbar

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Alerts snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection