Bootstrap Horizontal Description List Whitespace

How do I remove the white space to the left of Description 1 and 2? Is there a better alternative than horizontal description lists? Here's the problem on my own site (description

Solution 1:

This is due to the fixed width of the definition text. See the css code from bootstrap:

dl-horizontal dt {
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Now what you can do, is overwriting this description:

.card-description > dt, .card-description > dd {
  width: 50%;
  padding-left: 5px;
  padding-right: 5px;
}
.card-description > dd {
    margin-left: 50%;
}

And adding the class 'card-description' to your dl:

<dl class="dl-horizontal card-description">

Of course this will all work only if your view port (= screen) is bigger then 768px.

http://jsfiddle.net/tb2r9kj5/1/