Create responsive dl Description List using Bootstrap classes in HTML,PHP

How to use dl, dt,dd html tags to make responsive list view with description below it with Bootstrap.

Description list is used to show list items with a little description below them which tells something about the list items. There are three tags used to create Description list . dl tag, dt tag and dd tag. So in this tutorial we are creating simple Description list with use of bootstrap container class. So here is the complete step by step tutorial for Create responsive dl Description List using Bootstrap classes in HTML,PHP.

How to Create responsive dl Description List using Bootstrap classes in HTML,PHP.

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

Code for dl-tag.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Description List</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>Description List</h1>
 
 <dl>
 <dt>HTML</dt>
 <dd>- HyperText Markup Language</dd>
 <dt>PHP</dt>
 <dd>- Hypertext Preprocessor</dd>
 </dl> 
 
</div>

</body>
</html>

Screenshot:

Create responsive dl Description List using Bootstrap classes in HTML,PHP

Leave a Reply

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