<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h1>Service box</h1>
<div class="row">
<div class="col-md-3 col-sm-6 ">
<div class="service-box">
<div class="service-icon yellow">
<div class="front-content">
<i class="fa fa-trophy"></i>
<h3>design</h3>
</div>
</div>
<div class="service-content">
<h3>design</h3>
<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="service-box">
<div class="service-icon orange">
<div class="front-content">
<i class="fa fa-anchor"></i>
<h3>php</h3>
</div>
</div>
<div class="service-content">
<h3>php developer</h3>
<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-box ">
<div class="service-icon red">
<div class="front-content">
<i class="fa fa-trophy"></i>
<h3>Ui Developer</h3>
</div>
</div>
<div class="service-content">
<h3>Developer</h3>
<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-box">
<div class="service-icon grey">
<div class="front-content">
<i class="fa fa-paper-plane-o"></i>
<h3>java script</h3>
</div>
</div>
<div class="service-content">
<h3>java script</h3>
<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
</div>
</div>
</div>
</div>
