CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Grizzly
Grizzly

Reputation: 5953

Center dt elements in dl

I have a description list like this:

<h2 class="page-title">Details</h2>

<div class="well details-form">
    <dl class="dl-horizontal text-center">
        <dt>
          Test 1:
        </dt>

        <dd>
            Test 1
        </dd>

        <dt class="margin-space">
            Test 2:
        </dt>

        <dd class="margin-space">
            Test 2
        </dd>

        <dt class="margin-space">
            Test 3:
        </dt>

        <dd class="margin-space">
            Test 3
        </dd>
  </dl>
</div>

The text-center class is a part of the bootstrap library and it only seems to center the dd elements, but not the dt elements.

Here is a Bootply to give a visual of my issue.

How do I center the dt elements under the h2 element (not directly under, but a little left so that the h2 element is in between the dt and dd elements)?

Any help is appreciated.

UPDATE

Picture from the answer provided by mhatch:

enter image description here

The result still looks like this: Bootply. Just centered dt elements.. but they aren't moving under the details h2 element.

What I am looking for

                                          Details

                                    Test 1:     Test 1
                                    Test 2:     Test 2
                                    Test 3:     Test 3

Upvotes: 1

Views: 1846

Answers (3)

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

If you don't need to use the semantic of a definition list <dl>, I suggest you to change it to normal bootstrap columns. Otherwise would bee to much work to override default bootstrap properties to center the <dd> and <dt>.

<div class="row">
    <div class="col-xs-6">
      Test 1:
    </div>
    <div class="col-xs-6">
        Test 1
    </div>
</div>

https://jsfiddle.net/tomsarduy/0z67j2pw/

Upvotes: 2

stackingjasoncooper
stackingjasoncooper

Reputation: 652

I recommend narrowing the dl column. Right now the dl is the full width of the well container, which is way too wide to get the desired layout.

You could use the Bootstrap grid system to limit it to a third of the container. See this Bootply.

Then you could go ahead and style the dt and dd elements more as desired.

Upvotes: 0

mhatch
mhatch

Reputation: 4605

In the bootstrap styles the following CSS rule is setting the <dt> to align right:

.dl-horizontal dt {
    ...
    text-align: right;
    ...
}

Just add a CSS rule to overwrite it. After the bootstrap styles include this CSS rule:

.dl-horizontal dt{
    text-align: center;
}

Upvotes: 1

Related Questions