Bootstrap - hide <li> based on a conditionb

  <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                        <li class="dropdown">
                            <a href="/" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> John Doe<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Switch User</a>
                                </li>
                             <li>
                                    <a href="#">Account</a>
                                </li>
                                <li>
                                    <a href="#">Billing</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#"><span class="glyphicon glyphicon-off">LogOut</span></a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

Select allOpen in new window