Create horizontal list group with hover effect using Bootstrap classes in HTML,PHP

How to make list view inside web page with simple hover fade in fade out effect.

In this tutorial we are simply creating listview with hover effects means after taking the cursor above the list items it will automatically face out with light effect so user can notice it. So here is the complete step by step tutorial for Create horizontal list group with hover effect using Bootstrap classes in HTML,PHP.

How to Create horizontal list group with hover effect using Bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html

Code for list-group-with-hover.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list group with hover</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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2> List Group With Hover Effect </h2>

<div class="list-group">
 <a href="#" class="list-group-item">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 horizontal list group with hover effect using Bootstrap classes in HTML,PHP