CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dennis
Dennis

Reputation: 309

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?

enter image description here

Here's the problem on my own site (descriptions are too far to the right)

enter image description here

<div class="media">

            <!-- Card images -->
            <div class="col-lg-5">
                <div class="center-block">
                    <img id="card-image" src="images/demo-1.png" alt="Placeholder" width="150" height="224">
                    <img id="card-image-2" src="images/demo-2.png" alt="Placeholder" width="150" height="224">
                </div>                    
                <br>
                <dl class="dl-horizontal">
                    <dt>Set :</dt><dd>Basic</dd>
                    <dt>Type :</dt><dd>Minion</dd>
                    <dt>Rarity :</dt><dd>Free</dd>
                    <dt>Cost :</dt><dd>1</dd>
                    <dt>Attack :</dt><dd>1 <img src="icons/attack.png" alt="Attack Icon" width="10px" height="12px"></dd>
                    <dt>Durability :</dt><dd>3 <img src="icons/Health.png" alt="Attack Icon" width="10px" height="12px"></dd>
                    <br>
                    <dt>Ability :</dt><dd>Taunt</dd>
                    <dt></dt><dd>Taunt</dd>
                </dl>
            </div>
</div>

Upvotes: 3

Views: 6223

Answers (1)

Andi
Andi

Reputation: 541

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/

Upvotes: 4

Related Questions