The card-img-top
class ensures the images expand to fit the full size within the card design. As long as all cards have the same width, there should be no display issues, especially if you adhere to the markup structure outlined in Bootstrap documentation.
By using images of varying sizes, you can observe that all card images still appear uniform. This example may provide some insight into your layout concerns.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/100" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
In the following example utilizing your provided code, I ensured that the columns are wrapped within a .row
div as required by Bootstrap standards. Additionally, avoid using the style
attribute to modify styles applied by classes.
I'm not familiar with the card-block
element mentioned; however, Bootstrap includes the .card-body
class for holding card content.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card">
<img src="https://via.placeholder.com/100" alt="bootstrap" class="card-img-top ">
<div class="card-block">
<h3 class="card-title"> Projects </h3>
<p> hello world hello worldhello worldhello worldhello worldhello world
</p>
</div>
</div>
</div>
<!-- card 3-->
<div class="col-md-6 col-lg-3">
<div class="card">
<img src="https://via.placeholder.com/150" alt="HTML" class="card-img-top ">
<div class="card-block">
<h3 class="card-title"> Projects </h3>
<p> hello world hello worldhello worldhello worldhello worldhello world
</p>
</div>
</div>
</div>
</div>
</div>