Full length row in dl

Question

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:

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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;
}

Full length row in dl

Sign up