Align description lists with grid

It would be great if it was possible to align description lists with the grid system. I have a description list and below a grid and I would like the left and right columns to match.

The columns currently don't match, because:

dt has a fixed width of 160px
grid columns have dynamic widths
dd has a fixed left padding of 20px
grid columns have a padding of 30px by default

Some text

<dt> item 1 | <dd> Description
<dt> item 2 | <dd> Description
<dt> item 3 | <dd> Description

Horizontal form, using a 3:9 grid

Field 1 label  | Field 1
Field 2 label  | Field 2
Field 3 label  | Field 3

            ^--^
 both the column start and the
 column padding are different

Realistically this isn't something we can do until v4 when we can safely rewrite the component to support only those definition lists.

maybe this is an alternative:

<div class="row">
  <div class="col-lg-X"><strong>DEFINITION_TERM</strong></div>
  <div class="col-lg-Y">DEFINITION_NAME</div>
</div>

Semantically this is off course not the same as a <dl>, but it will have the requested behaviour.

Navigation Menu

Repository navigation

Align description lists with grid #11639

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Align description lists with grid #11639

Description

Activity

mdo commented on Dec 15, 2013

christopheg commented on Jan 11, 2014

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions