I have a website that uses Bootstrap v3.0. In one of the views I need to show 6 pair of key-value items and I was using dl-horizontal element. My problem with this list is that my keys have different lenghts so when I have a long key, the text is truncated. It would be nice to have the text divided in two or more lines. Is this possible? Is there a better element to do this?
I also have a problem when the text is too short. In this cases I have a lot of space to the left. Here is an example:
EDIT : Added white-space: normal
on dt
You issue may come from your container.
You can use a .panel
class with a fixed width to get it work.
Consider the following:
<div class="panel panel-danger">
<div class="panel-heading">Baseline <span class="pull-right">ERROR</span></div>
<div class="panel-body">
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
<div class="btn-toolbar text-center" role="toolbar">
<button type="button" class="btn btn-primary">Expandable</button>
<button type="button" class="btn btn-primary">ERROR <span class="caret"></span></button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
.panel {
width: 500px;
}
.panel .dl-horizontal dt {
white-space: normal;
}
Bootply
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With