Vinay Kapoor Vinay Kapoor - 2 months ago 16
CSS Question

To create a grid using font awesome icon

enter image description hereAs 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 Source

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>