Bootstrap Horizontal Description

2 4080

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 description show different will parallel 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>