Create responsive listview with description using Bootstrap classes in HTML,PHP

How to make list view with its right side by side of description fully responsive.

Bootstrap dl-horizontal class is used to create responsive list view including list description inside it. This can be done by dl, dt, dd tags. So here is the complete step by step tutorial for Create responsive listview with description using Bootstrap classes in HTML,PHP.

How to Create responsive listview with description using Bootstrap classes in HTML,PHP.

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

Code for listview-with-description.html file.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listview With Description</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">

<h1>Listview With Description</h1>

<dl class="dl-horizontal">

 <dt>HTML</dt>
 <dd>- HyperText Markup Language</dd>
 <dt>PHP</dt>
 <dd>- Hypertext Preprocessor</dd>
 
</dl> 

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

Screenshot:

Create responsive listview with description using Bootstrap classes in HTML,PHP

Leave a Reply

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