Olá, pessoal.
Estou começando com a programação web front-end e tenho uma dúvida com relação ao Bootstrap 4, e o seu sistema de grid. Basicamente como centralizar o input
e o p
dentro do Grid.
Tenho o código abaixo:
<div class="container-fluid mt-2">
<div class="row">
<div class="col-md-2 offset-md-1">
<a href="http://placehold.it"><img src="http://placehold.it/200x150"></a>
</div>
<div class="col-md-6 pt-5">
<div class="input-group">
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
O que quero basicamente é centralizar esse input
e o p
dentro do grid, de modo que fique ao lado da imagem de 200x150 (Que ao aumentar a imagem, o tamanho da row
também aumenta, deixando os outros elementos na parte de cima). Consegui fazer isso colocando dentro da classe <div class="col-md-6">
o pt-5
, porém ele da um padding-top de 5, ficando meio que uma "gambiarra" e não centralizando dentro do Grid corretamente.
Gostaria de saber se há alguma maneira de centralizar o input sem precisar usar o pt-5
dentro da classe pra fazer o espaçamento da parte de cima.
Obrigado!