Bootstrap Horizontal Description
2 4035
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>
Result:
Share:
Amit Chawla Jan 22, 2019
Nice Programming