I have a side bar using Bootsrap CSS, but the class=” active” does not work.
Here , the tab Add is not active by default.
Could you please let me know how to make Add active by default when using class="nav nav-sidebar"
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Add </a></li>
<li><a href="#">View/Modify</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
Please find below working link:
enter link description here
2
Answers
I check your code and added some classes. check this out. DEMO here!
HTML:
CSS:
You have to let it know how you’d like it to look once it’s active. And you need a little jquery to do the active swapping for you.
So here I’ve added the jquery, I’ve styled li.active (I also styles li a little so I could us the underline example)
Your html is the same though.