Center dt / dd vertically in Bootstrap 4


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;
        vertical-align: middle !important;
<link rel="stylesheet" href="" 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>


<script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="" 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!

asked by Juan Salvador Portugal 26.07.2018 в 17:04

2 answers


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=""> 
<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>

answered by 26.07.2018 / 17:44

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