Use case of HTML Definition list, and issue with bootstrap

Question

I use Definition list (dl, dd, dt ) to render view page (details of an entity). Are Description list are not good for this usecase?

When use with Twitter bootstrap, when <dd></dd> is empty, all of the contents shifts to top. This is undesirable to show details of an object, which may contain some properties empty.

Please see the fiddle here http://jsfiddle.net/cPwHr/

Is this a bug? how can I prevent it. Or should I use normal list (ul, li ..) or table.

Answer 1

You can just use a non-breaking space if you don't have a definition instead of leaving it empty. That way all of the css rules will still be applied as expected.

        <dt>Description lists</dt>
        <dd>&nbsp;</dd>

Answer 2

You can also use this style override:

.dl-horizontal > dd:after {
  display: table;
  content: "";
  clear: both;
}

Answer by @gael-marziou, see this thread: Prevent Twitter bootstrap empty <dd> filling with next <dd> value