Set Bootstrap badges in active states of list navigation

BootstrapWeb DevelopmentCSS Framework

<p style="">Place &lt;span class = &quot;badge&quot;&gt; to active links to set Bootstrap badges in active states of pill.</p><p>You can try to run the following code to achieve this &minus;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/YtSBTb" rel="nofollow" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;title&gt;Bootstrap Example&lt;/title&gt; &nbsp; &nbsp; &nbsp; &lt;link href = &quot;/bootstrap/css/bootstrap.min.css&quot; rel = &quot;stylesheet&quot;&gt; &nbsp; &nbsp; &nbsp; &lt;script src = &quot;/scripts/jquery.min.js&quot;&gt;&lt;/script&gt; &nbsp; &nbsp; &nbsp; &lt;script src=&quot;/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h4&gt;Active State in navigations&lt;/h4&gt; &nbsp; &nbsp; &nbsp; &lt;ul class = &quot;nav nav-pills nav-stacked&quot; style = &quot;max-width: 260px;&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li class = &quot;active&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href = &quot;#&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class = &quot;badge pull-right&quot;&gt;29&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Home &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/a&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href = &quot;#&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href = &quot;#&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class = &quot;badge pull-right&quot;&gt;9&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Messages &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &lt;/ul&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 12-Jun-2020 17:54:19

Advertisements