How to make the side bar active? - Twitter bootstrap

user2077648
May 12, 2016
246 views
1 vote
2 Answers

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

Answers

I check your code and added some classes. check this out. DEMO here!

HTML:

 <div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar list-group">
    <li class="list-group-item active"><a href="#">Add </a></li>
    <li class="list-group-item"><a href="#">View/Modify</a></li>
    <li class="list-group-item"><a href="#">Delete</a></li>
  </ul>
</div>

CSS:

    li.list-group-item a:hover {
  background-color: transparent;
}

li.list-group-item.active a {
  color: #fff;
}

li.list-group-item.active a:hover {
  background-color: transparent;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
  background-color: #a8a8a8;
}

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.

$(".nav a").on("click", function() {
  $(".nav").find(".active").removeClass("active");
  $(this).parent().addClass("active");
});

.nav li {
  border-bottom: 3px solid rgba(0, 0, 0, 0);
}
.nav li:hover {
  border-bottom: 3px solid #eee;
}
.nav li.active {
  border-bottom: 3px solid #338ecf;
  background: #eee
}

<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 signup or login to give your own answer.

Click here to cancel reply.

How to make the side bar active? – Twitter bootstrap

Answers