<section>
	<div class="container">
		<div class="the_content p-5">
			<div class="row">
				<div class="col-6 col-md-3 my-3">
					<div class="card p-3">
						<h3>About us</h1>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae accusamus tenetur numquam!Eos, rerum? Autem labore molestiae nesciunt vel eum. Minus dignissimos dolor quasi?</p>
						<a href="#" class="btn btn-dark">Read More</a>
					</div>
				</div>
				<div class="col-6 col-md-3 my-3">
					<div class="card p-3">
						<h3>About us</h3>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae accusamus tenetur numquam!Eos, rerum? Autem labore molestiae nesciunt vel eum. Minus dignissimos dolor quasi?</p>
						<a href="#" class="btn btn-dark">Read More</a>
					</div>
				</div>
				<div class="col-6 col-md-3 my-3">
					<div class="card p-3">
						<h3>About us</h1>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae accusamus tenetur numquam!Eos, rerum? Autem labore molestiae nesciunt vel eum. Minus dignissimos dolor quasi?</p>
						<a href="#" class="btn btn-dark">Read More</a>
					</div>
				</div>
				<div class="col-6 col-md-3 my-3">
					<div class="card p-3">
						<h3>About us</h1>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae accusamus tenetur numquam!Eos, rerum? Autem labore molestiae nesciunt vel eum. Minus dignissimos dolor quasi?</p>
						<a href="#" class="btn btn-dark">Read More</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
body {font-family: 'Poppins', sans-serif;overflow-x: hidden}
.the_content {
	width: 100vw;
	background: url(https://images.pexels.com/photos/6054110/pexels-photo-6054110.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) no-repeat center center / cover;
	position: relative;
	z-index: 1;
}

.the_content::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.7);
	z-index: -1;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
  2. https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.