Here is basic stracture of your image using bootstrap 4, this is not responsive so you need to some work for responsive.
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Hepatrote with Bootstrap v4</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<div class="row">
<div class="col">
<h1>Symptoms</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
<div class="col">
<h1>Image of dieses</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="text-center">Syptoms</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
</div>
<div class="row">
<div class="col-6 ">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
</footer>
</main>
</body>
</html>
`
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
