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>

CLICK HERE TO SEE RESULT:


3 thoughts on “Bootstrap Horizontal description

Leave a Reply

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