As you can see, the title of the second card pushes the image down. How can i dynamically resize the card title in order to align all the image? Thank you.
Bootstrap Card
</head> <body> <div class="container-fluid"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4"> <div class="col"> <div class="card bg-primary"> <div class="card-body text-center"> <h4 class="card-title">John Doe</h4> <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image"> <p class="card-text">Some text inside the first card</p> </div> </div> </div> <div class="col"> <div class="card bg-primary"> <div class="card-body text-center"> <h4 class="card-title">John Doe & other possible long text that push the image down </h4> <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image"> <p class="card-text">Some text inside the second card</p> </div> </div> </div> <div class="col"> <div class="card bg-primary"> <div class="card-body text-center"> <h4 class="card-title">John Doe </h4> <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image"> <p class="card-text">Some text inside the third card</p> </div> </div> </div> </div> </div> </body> </html> 
没有评论:
发表评论