Menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</body>
</html>
this is sample code.
Is it possible add icon in bootstrap nav tabs like below picture.
I want to add number icon in nav tabs.
878
Approach: To create a tabbed navigation menu, create a basic unordered list with list items as links. Then add classes nav and nav-tabs of bootstrap to unordered list and nav-items class to list items.
Base nav. Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style. The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components.
Bootstrap By Building Projects - Includes Bootstrap 4 Tabs were introduced in the chapter Bootstrap Navigation Elements. By combining a few data attributes, you can easily create a tabbed interface. With this plug-in you can transition through panes of local content in tabs or pills, even via drop down menus.
Use url #hash es and open tabs based on the change of that value. This approach also have the advantage that the tabs will be directly linkable, so you could use e.g. example.com#sign-up to open a page with a specific tab opened.
Working demo
You would do this with a badge,
<li class="active"><a href="#">Home<span class="badge">140</span></a></li>
and a little bit of CSS
.nav-tabs .badge{
position: absolute;
top: -10px;
right: -10px;
background: red;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
