Cyr Cyr - 1 year ago 58
CSS Question

Full length row in dl

I'm using Bootstrap 3.3.7 and I have a dl list configured as horizontal. I would like to visualize a full length row inside a

<dl>
tag.



<dl class="dl-horizontal">
<dt>Label 1</dt>
<dd>Text 1</dd>
<dt>how to display a full length text?</dt>
<dd></dd>
<dt>Label 2</dt>
<dd>Text 2</dd>
</dl>





I would like to obtain something like this:

Full row between tags

Answer Source

Try this

Check Demo here

HTML:

<dl class="dl-horizontal">
 <dt>Label 1</dt>
 <dd>Text 1</dd>
 <dt class="fullWidth"> 26 Lakeshore View, Sentosa Cove, Singapore 26 Lakeshore View, Sentosa Cove.</dt>
 <dd></dd>
 <dt>Label 2</dt>
 <dd>Text 2</dd>
</dl>

CSS:

.fullWidth + dd {
    margin-left: 0;
    width: unset;
}
.dl-horizontal dt.fullWidth {
    width: 100%;
    text-overflow: unset;
    white-space: initial;
    text-align: left;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download