Align text on top of button

Question

Hello, I would like to align a text that I always have above the button inside a bootstrap card, so that it is always formatted in the correct way, regardless of the size of my text that is inside the card, because according to the size of the text, the journalist’s name gets in different positions, wanted to have a pattern to look better visually

Follow the image to understand what I’m talking about, I have this problem.

Would anyone know how to solve ? I just need them to always be on the same "line"

<div class = "container">

<div class = "row">
        <div class="card-deck mt-1">
      <div class="card">
            <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="primeiralinhafotos/fotolgbt.jpeg" alt="Primeiro Slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="primeiralinhafotos/fotolgbt2.png" alt="Terceiro Slide">
                </div>
              </div>
            </div>
        <div class="card-body">
          <h5 class="card-title">Título do card</h5>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
          <p class="card-text"><small class="text-muted">Por João Das Flores</small></p>
          <a href="#" class="btn btn-outline-warning btn-block embaixo ">Leia mais</a>
        </div>
      </div>
      <div class="card">
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="primeiralinhafotos/fotocurso1.jpg" alt="Primeiro Slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="primeiralinhafotos/fotocurso2.png" alt="Terceiro Slide">
                </div>
              </div>
            </div>
        <div class="card-body">
          <h5 class="card-title">Título do card</h5>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
          <p class="card-text"><small class="text-muted">Por João Das Flores</small></p>
          <a href="#" class="btn btn-outline-warning btn-block embaixo ">Leia mais</a>
        </div>
      </div>
      <div class="card">
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="primeiralinhafotos/fotocdb1.jpeg" alt="Primeiro Slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="primeiralinhafotos/fotocdb2.jpeg" alt="Terceiro Slide">
                </div>
              </div>
            </div>
        <div class="card-body">
          <h5 class="card-title">Título do card</h5>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
          <p class="card-text"><small class="text-muted">Por João das Flores</small></p>
          <a href="#" class="btn btn-outline-warning btn-block embaixo ">Leia mais</a>

        </div>
      </div>
    </div>
</div>

Answer 1

Put the <p> (name of the author) and the <a> ("Read More" button) inside a div and place the class .mt-auto, and apply the properties display: flex; and flex-direction: column; in class .card-body. This will make the author’s name and button always align at the end of the card:

.card-body{
   display: flex;
   flex-direction: column;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class = "container">

<div class = "row">
        <div class="card-deck mt-1">
      <div class="card">
            <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="primeiralinhafotos/fotolgbt.jpeg" alt="Primeiro Slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="primeiralinhafotos/fotolgbt2.png" alt="Terceiro Slide">
                </div>
              </div>
            </div>
        <div class="card-body">
          <h5 class="card-title">Título do card</h5>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
          <div class="mt-auto">
             <p class="card-text"><small class="text-muted">Por João Das Flores</small></p>
             <a href="#" class="btn btn-outline-warning btn-block embaixo ">Leia mais</a>
         </div>
        </div>
      </div>
      <div class="card">
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="primeiralinhafotos/fotocurso1.jpg" alt="Primeiro Slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="primeiralinhafotos/fotocurso2.png" alt="Terceiro Slide">
                </div>
              </div>
            </div>
        <div class="card-body">
          <h5 class="card-title">Título do card</h5>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
          <div class="mt-auto">
             <p class="card-text"><small class="text-muted">Por João Das Flores</small></p>
             <a href="#" class="btn btn-outline-warning btn-block embaixo ">Leia mais</a>
         </div>
        </div>
      </div>
      <div class="card">
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="primeiralinhafotos/fotocdb1.jpeg" alt="Primeiro Slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="primeiralinhafotos/fotocdb2.jpeg" alt="Terceiro Slide">
                </div>
              </div>
            </div>
        <div class="card-body">
          <h5 class="card-title">Título do card</h5>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
          <div class="mt-auto">
             <p class="card-text"><small class="text-muted">Por João das Flores</small></p>
             <a href="#" class="btn btn-outline-warning btn-block embaixo ">Leia mais</a>
          </div>
        </div>
      </div>
    </div>
</div>