Center dt / dd vertically in Bootstrap 4

Question

Center dt / dd vertically in Bootstrap 4

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I tell you, I'm working with Bootstrap 4, and I'm having a problem wanting to vertically center the dd within a dl

My code would be something like that

    dl {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    dd{
        vertical-align: middle !important;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">
    <dl class="row mt-2 border border-dark rounded">
        
        <dt class="col-2">Prueba</dt>
        <dd class="col">07-B0COA</dd>

        <dt class="col-2">Cliente</dt>
        <dd class="col">EDE</dd>

    </dl>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

I managed to center the dt without problem with the css that I apply to dl , but I can not get the dd to focus in the same way.

What am I doing wrong?

Thank you very much!

html5 css3 css bootstrap bootstrap-4

asked by Juan Salvador Portugal 26.07.2018 в 17:04

source

2 answers

0

Have you tried the class="col" ? Equal to be more specific works for you, and as in the two dd use the same, it will not be a problem.

answered by 26.07.2018 в 17:25

Delete a selected row in a QTableWidget ERROR when Creating Table

score 2 · Accepted Answer

The problem as I mentioned, is due to the margin that b4 applies to the elements dd , could remove this margin to avoid that failure.

In addition you do not need more css , if you already have b4 and classes that can help you. align-items-center par center the content and mb-0 , to eliminate the margin-bottom: .5rem;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
<div class="container">
    <dl class="row mt-2 border border-dark rounded align-items-center" style="height: 300px"  >
        
        <dt class="col-2 ">Prueba</dt>
        <dd class="col mb-0 ">07-B0COA</dd>

        <dt class="col-2 ">Cliente</dt>
        <dd class="col mb-0 ">EDE</dd>

    </dl>
</div>