Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Bootstrap Badges with Navigation Bar Example
Keywords : badge, bootstrap, bootstrap badge, bootstrap 4 badge, badges in bootstrap, bootstrap badge with navigation bar, bootstrap badges in navigation bar, bootstrap badge circle, bootstrap navigation bar
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Badges with Navigation Bar Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .bcontent { margin-top: 10px; } </style> </head> <body> <div class="container bcontent"> <h2>Bootstrap Badges with Navigation Bar</h2> <hr /> <ul class="nav nav-pills"> <li class="nav-item"> <a href="#" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="#" class="nav-link active">Profile <span class="badge badge-pill badge-light">5</span></a> </li> <li class="nav-item"> <a href="#" class="nav-link">Messages <span class="badge badge-pill badge-danger">24</span></a> </li> <li class="nav-item"> <a href="#" class="nav-link">Notification <span class="badge badge-pill badge-secondary">10+</span></a> </li> </ul> </div> </body> </html>
Click Here to See Result
Result
Previous
Next