HTML Bootstrap: problema com alinhamento vertical

[Ingo Porto]

Olá pessoal!

 

Estou começando a usar Bootstrap agora e estou tendo algumas dificuldades que devem ser comuns aos iniciantes.

Seguinte: preciso alinhar o conteúdo verticalmente em um container. Já vi documentação do Bootstrap e não consegui.

 

Está assim:

 

Deveria ficar assim:

 

O código é esse:

<div class="row cupixPromoDados">
  <div class="col-2 center" style="border-right: 1px solid #ccc;">
    <p style="margin-top:10px"><small>...</small><br />48</p>
  </div>
  <div class="col-2 center" style="border-right: 1px solid #ccc;">
    <p style=" margin-top:10px;"><small>...</small><br />30/09/2018</p>
  </div>
  <div class="col-2 center">
    <p style="margin-top:10px"><small>...</small><br />30/10/2018</p>
  </div>
  <div class="col-1">&nbsp</div>
  <div class="col-5 container" >
    <div class="row align-items-center" style="background:#525252">                                
      <div class="col-8 center" style="background:#28a745"><a style=" margin:0" href="#" class="btn btn-success">ISSO É UM BOTÃO</a></div>
      <div class="col-4 center" style="color:#FFF; font-weight:bold; margin-rigth:10px">Texto</div>
    </div>                            
  </div>
</div>

 

Obrigado pela ajuda!

[Ingo Porto]

Ninguém para me ajuda? 

[FabianoS]

@Ingo Porto Eu nunca cheguei a estudar bootstrap, prefiro css mas lendo rápido a documentação sobre espaçamento você percebe que precisa usa "m" e "p" pra margin e padding, sendo assim. 

https://jsfiddle.net/w4dcLu6b/1/

 

documentação:

https://getbootstrap.com/docs/4.1/utilities/spacing/

[Ingo Porto]

26 minutos atrás, FabianoS disse:

@Ingo Porto Eu nunca cheguei a estudar bootstrap, prefiro css mas lendo rápido a documentação sobre espaçamento você percebe que precisa usa "m" e "p" pra margin e padding, sendo assim. 

https://jsfiddle.net/w4dcLu6b/1/

 

documentação:

https://getbootstrap.com/docs/4.1/utilities/spacing/

 

@FabianoS Obrigado pela resposta.

 

A questão é que esse alinhamento tem que ser automático por causa da responsividade. Se eu setar um m ou p, vai acabar ficando fixo.

 

Já experimentei usar mx-auto, my-auto, p-auto e m-auto. Simplesmente não alinha.

[FabianoS]

@Ingo Porto Bom nesse caso, pelo o que eu vi o ".mx-auto classe para centralizar horizontalmente o conteúdo em nível de bloco de largura fixa". 

 

eu só conseguiria resolver assim : https://jsfiddle.net/w4dcLu6b/3/