<div class="container mt-3">
	<div class="row row-cols-1 row-cols-md-3 g-4">
		<div class="col">
			<div class="card h-100">
				<img src="://0" class="card-img-top text-center" alt="Mountain Scene" onerror="this.classList.add('noImage')">
				<div class="card-body">
					<h5 class="card-title">A post w/ no image.</h5>
					<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
				</div>
			</div>
		</div>
		<div class="col">
			<div class="card h-100">
				<img src="https://picsum.photos/250/140" class="card-img-top text-center" alt="...">
				<div class="card-body">
					<h5 class="card-title">A post with image.</h5>
					<p class="card-text">This is a short card.</p>
				</div>
			</div>
		</div>
		<div class="col">
			<div class="card h-100">
				<img src="https://picsum.photos/250/140" class="card-img-top text-center" alt="...">
				<div class="card-body">
					<h5 class="card-title">A post with image.</h5>
					<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
				</div>
			</div>
		</div>
		<div class="col">
			<div class="card h-100">
				<img src="https://picsum.photos/250/140" class="card-img-top text-center" alt="...">
				<div class="card-body">
					<h5 class="card-title">A post with image.</h5>
					<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
				</div>
			</div>
		</div>
	</div>
</div>
.card img.noImage,
.card img.noImage:after{
	position:relative;
	aspect-ratio: 16 / 9;
  font-size: 2rem;
	text-shadow:1px 1px rgba(0,0,0,0.5);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-image: repeating-conic-gradient(
			from 0 at 100% 100%,
			rgba(255, 255, 255, 0.7) 0% 2deg,
			transparent 0 9deg
		),
		radial-gradient(
			circle 150px at 100% 100%,
			white,
			yellow,
			lightyellow,
			rgba(46, 181, 229, 0.8)
		);
	background-color: #2eb5e5;
	background-position: 100% 100%;
	background-size: cover;
	background-repeat: no-repeat;
} 
.card img.noImage:after{
	content:attr(alt);
	position:absolute;
	z-index:99;
	left:0;
	right:0;
	top:0;
	bottom:0;
}
View Compiled
Run Pen

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.csssss
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css
  3. https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.global.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js
  3. https://code.jquery.com/jquery-3.3.1.slim.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js
  5. https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.jssss
  6. https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js