With Bootstrap, how do you position the button at the end of the card?

Asked

Viewed 375 times

-1

would like a solution to always place a button at the end of the card, so that it does not depend on the size of the above text, or pre-defined size of the previous object.

To illustrate here is the jsfiddle link: https://jsfiddle.net/whositalo/qg5k4p1r/6/

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


<div class="container">
	<div class="card-deck">
		<div class="card text-center mb-4">
  			<a href="#"><img class="card-img-top" src="https://s.dicio.com.br/exemplo.jpg" alt="Imagem de capa do card"></a>
                        <div class="card-body">
				<h5 class="card-title">Exemplo</h5>
				<p class="card-text">Este é um texto de exemplo pequeno.</p>
				<a  href="#" class="btn btn-info">Ver mais</a>
			</div>
		</div>
		<div class="card text-center mb-4">
			<a href="#"><img class="card-img-top" src="https://s.dicio.com.br/exemplo.jpg" alt="Imagem de capa do card"></a>
			<div class="card-body">
				<h5 class="card-title">Outro Exemplo</h5>
				<p class="card-text">Este é um texto de exemplo maior, para exemplificar o ploblema. Gostaria que os botões ficassem posicionados sempre no fim do card, mas no card ao lado, ele fica acima. Como poderia resolver isso?</p>
				<a href="/crack.html" class="btn btn-info">Ver mais</a>
			</div>
		</div>
	</div>
</div>

html5 css3 twitter-bootstrap bootstrap-4

1 answer

1


In the div with class Card-body vc will use the following Flex classes of the bootstrap itself d-flex flex-column align-items-center for more see the official link https://getbootstrap.com/docs/4.0/utilities/flex/

After that on the link you put mt-auto, which would be the same as margin-top: auto, This will "push" the button to the end of the card

See the code below notice that there is no extra CSS, everything was done with the Bootstrap classes themselves 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

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

</head>
<body>
  
  <div class="container">
    <div class="card-deck">
      <div class="card text-center mb-4">
          <a href="#"><img class="card-img-top" src="https://s.dicio.com.br/exemplo.jpg" alt="Imagem de capa do card"></a>
        <div class="card-body d-flex flex-column align-items-center">
          <h5 class="card-title">Exemplo</h5>
          <p class="card-text">Este é um texto de exemplo pequeno.</p>
          <a  href="#" class="btn btn-info mt-auto">Ver mais</a>
        </div>
      </div>
      <div class="card text-center mb-4">
        <a href="#"><img class="card-img-top" src="https://s.dicio.com.br/exemplo.jpg" alt="Imagem de capa do card"></a>
        <div class="card-body">
          <h5 class="card-title">Outro Exemplo</h5>
          <p class="card-text">Este é um texto de exemplo maior, para exemplificar o ploblema. Gostaria que os botões ficassem posicionados sempre no fim do card, mas no card ao lado, ele fica acima. Como poderia resolver isso?</p>
          <a href="/crack.html" class="btn btn-info">Ver mais</a>
        </div>
      </div>
    </div>
  </div>
  

</body>
</html>

  • Solved! Thank you very much!

  • @Italoaraujo anything my dear! Abs

Browser other questions tagged html5 css3 twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.