pull dl tag in bootstrap to the left

Question

How can I override the dl tag in bootstrap so that it does not have any width (by default it has width of 160). I want the dt field to be on the left. Also, how can I add more white space between the two rows?

I tried to override the width but it didn't work. http://jsfiddle.net/MgcDU/6357/embedded/result/

Example without my changes http://jsfiddle.net/MgcDU/6356/embedded/result/

Answer 1

Try this:

.dl-horizontal dt{
    text-align: left;
    margin-bottom: 1em;
    width: auto;
    padding-right: 1em;
}

.dl-horizontal dd{
    margin-left: 0;
    margin-bottom: 1em;
}

Demo fiddle