0

Create list group with active state item using Bootstrap classes in HTML,PHP

How to make list view which shows current list item as highlight selected.

Active state means it will highlight the current item which is currently opened on user screen. The active class is used to activate the current list item. So here is the complete step by step tutorial for Create list group with active state item using Bootstrap classes in HTML,PHP.

How to Create list group with active state item using Bootstrap classes in HTML,PHP.

http://www.android-examples.com/demo/heading-tag.html
Code for list-group-active.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list group with active state</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2> List Group With Active State </h2>


<div class="list-group">
 <a href="#" class="list-group-item active">Android</a>
 <a href="#" class="list-group-item">PHP</a>
 <a href="#" class="list-group-item">Blogger</a>
 <a href="#" class="list-group-item">WordPress</a>
 </div>


</div>
</body>
</html>

Screenshot:

Create list group with active state item using Bootstrap classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *