Bootstrap Horizontal description

Make terms & descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands. Through this, title and its descrpition show different will parellel position.

Example:

<!DOCTYPE html>
<html>
<head>
 <link href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">
</head>

<body>
<div class="container">

<dl class="dl-horizontal">
 <dt> Lorem ipsum dolor </dt>
 <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </dd>
 <dt> Lorem ipsum dolor </dt>
 <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </dd>
 <dt> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </dt>
 <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </dd>
 <dt> vitae feugiat </dt>
 <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </dd>
</dl>

</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</body>

</html>

RESULT: CLICK HERE




3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
AnuAmit Chawla Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Amit Chawla
Guest

Nice Programming

Anu
Guest
Anu

Nice example

Anu
Guest
Anu

hello