Bootstrap 5 Notification UI Design snippets with navbar

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

Source Code

More Alerts snippets

Comments(0)