CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3text-align
user16666322
user16666322

Reputation: 135

Align left dl-horizontal, dt, and dd

I am working inside a panel and am not able to left align or remove the margins for a horizontal list in Bootstrap.

i.e.

<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">
        <strong>testing</strong>
      </h3>
    </div>
    <div class="panel-body">
      <dl class="dl-horizontal">
        <dt>term 1</dt>
        <dd>foo</dd>
        <dt>term 2</dt>
        <dd>bar</dd>
      </dl>
    </div>
  </div>
</div>

https://jsfiddle.net/srzyL86g/

Upvotes: 4

Views: 8717

Answers (1)

Aditya Ponkshe
Aditya Ponkshe

Reputation: 3900

Solved here . https://jsfiddle.net/adityap708/9k0qg8jn/

.container dt,.container dd {
  width:auto;
  margin-left:auto;
  display:inline-block;
}

Add this to your css. Boostrap is giving dt and dd width and margin you need to overwrite it.

Upvotes: 2

Related Questions