To create a grid using font awesome icon - html

Question

As shown in image i want to create that type of grid using font awesome icons.I write code for that but i didn't get output my expectation want to get output as shown in image.What i do for that?
<div class="container">
<div class="col-lg-12">
<h1 style="color:#0E57A4;"><center>24X7 Emergency Responce</center></h1><br><br>
</div>
<div class="row">
<div class="col-md-6">
<div class="media-left"> <i class="fa fa-home fa-5x"></i>
</div>
<div class="media-body">
<h4 style="color:#0e57a4;">Resenditial Services</h4>
<p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
</div>
</div>
</div>

Answer 1

I have slightly adjusted your HTML structure (added a container around media-left and media-body) and added a CSS class to position those two elements correctly.
.flex {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-lg-12">
<h1 style="color:#0E57A4;">
<center>24X7 Emergency Responce</center>
</h1><br><br>
</div>
<div class="row">
<div class="col-md-6">
<div class=" flex">
<div class="media-left"> <i class="fa fa-home fa-5x"></i>
</div>
<div class="media-body">
<h4 style="color:#0e57a4;">Resenditial Services</h4>
</div>
</div>
<p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
</div>
</div>

Answer 2

use this HTML code, hope this will help you.
<div class="container">
<div class="col-lg-12">
<h1 style="color:#0E57A4;"><center>24X7 Emergency Responce</center></h1><br><br>
</div>
<div class="row">
<div class="col-md-6">
<div class="media-left"> <i class="fa fa-home fa-5x"></i>
</div>
<div class="media-body">
<h4 style="color:#0e57a4;">Resenditial Services</h4>
<p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
</div>
</div>
<div class="col-md-6">
<div class="media-left"> <i class="fa fa-home fa-5x"></i>
</div>
<div class="media-body">
<h4 style="color:#0e57a4;">Resenditial Services</h4>
<p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
</div>
</div>
</div>
</div>