Home/ Questions/Q 8694157
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:43:09+00:00

I am seeing unexpected behavior with the description list <dl> tag. I am using

  • 0

I am seeing unexpected behavior with the description list <dl> tag.

I am using twitter bootstrap 2 and with this example code:

<!DOCTYPE html>
<dl class="dl-horizontal">
  <dt>Item1</strong></dt><dd>This is a description of Item1</dd>
  <dt>Item2</strong></dt><dd>This is a description of Item2</dd>
  <dt>Item3</strong></dt><dd>This is a description of Item3</dd>
  <dt>Item4</strong></dt><dd>This is a description of Item4</dd>
  <dt>Item5</strong></dt><dd>This is a description of Item5</dd>
</dl>

… all works as expected and I see this:

Item1 This is a description of Item1  
Item2 This is a description of Item2  
Item3 This is a description of Item3  
Item4 This is a description of Item4  
Item5 This is a description of Item5

With this code though:

<!DOCTYPE html>
<dl class="dl-horizontal">
  <dt>Item1</strong></dt><dd>This is a description of Item1</dd>
  <dt>Item2</strong></dt><dd></dd>
  <dt>Item3</strong></dt><dd>This is a description of Item3</dd>
  <dt>Item4</strong></dt><dd>This is a description of Item4</dd>
  <dt>Item5</strong></dt><dd>This is a description of Item5</dd>
</dl>

I see this problematic display:

Item1 This is a description of Item1
Item2 This is a description of Item3
Item3 This is a description of Item4
Item4 This is a description of Item5 
Item5

And the <dt> and <dd> tags do not match-up as expected.

Reading the w3.org working draft here http://www.w3.org/TR/html-markup/dl.html#dl

… it’s not clear to me if the browser or the programmer are responsible for matching up the <dt> and <dd> elements when the content for <dd> is blank.

I tested the above code in firefox and Safari and see the same output.

Is this a matter of opinion, a bug in twitter bootstrap 2, or am I misunderstanding the use of the HTML5 description list? This use of <dl> appears in show.html.erb code auto generated by

rake g bootstrap:themed model

If a data element is blank, the displayed output does not match the label. It’s unfortunate, because the themed option is pretty useful otherwise.

I can partially ‘fix the problem’ by modifying the themed output to look like this:

<dt><strong><%= model_class.human_attribute_name(:name) %>:</strong></dt>
<dd><%= @server.name %> <%= "-blank-" if @server.name.blank? %> </dd>

… but I am left seeing “-blank-” to display the blank elements. If I use something like a string containing a space, like ” “, I still see the same label-description misalignment problem.

Please try to focus your answer on describing which entity, the HTML5 <dl> tag, bootstrap, or my understanding, is off target here and why.

Thanks very much!

-EDIT-
For those working with bootstrap, using css like this works fine:

dt, dd {
  line-height: 20px;
  /* Keep this the same as line-height */
  min-height: 20px;
 }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By default <dt> and <dd> are block-level elements, there is no need “align” them in any way, they naturally displayed one after another.

    Bootstrap’s .dl-horizontal, however, lines up this elements side-by-side. And when one of <dd> has no content, it’s collapsed and others are shifted up. (Which obviously what you don’t want.) This behaviour could be “fixed” like this:

    dd {
  /* should be the same as line-height */
  min-height: 20px;
}

    But I would not referenced this as a bug in Bootstrap. Why do you want to have a definition term with no definition? Do not displaying the term at all makes much more sense to me.

    • 0