2

Estou tentando fazer um layout como mostra a imagem. Duas colunas, sendo a segunda alinhada com um texto no topo, e outro texto abaixo.

inserir a descrição da imagem aqui

Até agora, o que consegui foi fazer o alinhamento de todo o texto abaixo.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col">
    <img src="http://placehold.jp/800x1000.png" class="img-fluid">
  </div>
  <div class="col align-self-end">
    <h4>NOME <b>SOBRENOME</b></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint ratione reprehenderit, error qui enim sit ex provident iure, dolor, nulla eaque delectus, repudiandae commodi. Velit assumenda odit quisquam at error.</p>
  </div>
</div>

Como faço para conseguir alinhar os texto corretamente usando Bootstrap 4?

1 Resposta 1

3

Não precisa nem de CSS extra para resolver o problema, só com as classes padrão do Bootstrap vc resolve.

Primeiro vc precisa transformar a COL em um container flex, usando a class d-flex, depois vc coloca os filhos desse container em coluna usando flex-column, e para finalizar vc coloca um no topo e outro na base com justify-content-between

Outra opção é não usar justify-content-between e colocar a classe mt-auto no segundo filho para que ele fique na base do container, isso vai fazer com que ele de uma margin-top automática, empurrando esse elemento para o final do container.

Veja o código como fica:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
    <div class="col">
      <img src="http://placehold.jp/800x1000.png" class="img-fluid">
    </div>
    <div class="col d-flex flex-column justify-content-between">
      <h4>NOME <b>SOBRENOME</b></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint ratione reprehenderit, error qui enim sit ex provident iure, dolor, nulla eaque delectus, repudiandae commodi. Velit assumenda odit quisquam at error.</p>
    </div>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .