CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
hfingler
hfingler

Reputation: 2014

How can I remove the blank space on the left of a bootstrap horizontal description list?

There's too much empty space and it looks weird. Here's the code:

<div class="col-sm-4" style="border-style: dotted; border-width: 1px;">
      <dl class="dl-horizontal">

          <dt>Tag:</dt>
          <dd><img src="..." class="width-60 img-rounded"></dd>

          <dt>Frente:</dt>
          <dd>...</dd>

          <dt>Verso:</dt>
          <dd>...</dd>

          <dt>Descrição:</dt>
          <dd>...</dd>

          <dt>Coleira:</dt>
          <dd>...</dd>
      </dl>
</div>

And here's the result:

How can I remove that blank space on the left? (I have tried this Bootstrap horizontal description list whitespace but it didn't work)

Also, is there anyway I can center the Tag text that describes the image?

Thanks.

Upvotes: 0

Views: 738

Answers (1)

Leo Farmer
Leo Farmer

Reputation: 7910

you can over-ride the bootstrap style that sets the margin for the description.

Add a custom class to your surrounding dl. e.g.

<dl class="dl-horizontal my-class">

Then add your css to change the margin to what you want:

.my-class.dl-horizontal dd{
   margin-left:170px
}

Upvotes: 1

Related Questions