<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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">
<div class="row">
<div class="col-3 blue-grad color-box">
<h1>1</h1>
</div>
<div class="col-3 pink-grad color-box">
<h1>1</h1>
</div>
<div class="col-3 green-grad color-box">
<h1>1</h1>
</div>
<div class="col-3 purple-grad color-box">
<h1>1</h1>
</div>
</div>
</div>
.color-box {
color: #fff;
padding: 50px 30px;
border-radius: 4px;
box-shadow: 0 7px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 transparent;
}
.blue-grad {
background: #007eff;
background: -webkit-linear-gradient(left top,#007eff,#00d8ff);
background: -o-linear-gradient(bottom right,#007eff,#00d8ff);
background: -moz-linear-gradient(bottom right,#007eff,#00d8ff);
background: linear-gradient(to bottom right,#007eff,#00d8ff);
}
.pink-grad {
background: #cd47ef;
background: -webkit-linear-gradient(left top,#cd47ef,#ef476f);
background: -o-linear-gradient(bottom right,#cd47ef,#ef476f);
background: -moz-linear-gradient(bottom right,#cd47ef,#ef476f);
background: linear-gradient(to bottom right,#cd47ef,#ef476f);
}
.green-grad {
background: #70ae6e;
background: -webkit-linear-gradient(left top,#70ae6e,#beee62);
background: -o-linear-gradient(bottom right,#70ae6e,#beee62);
background: -moz-linear-gradient(bottom right,#70ae6e,#beee62);
background: linear-gradient(to bottom right,#70ae6e,#beee62);
}
.purple-grad {
background: #8200fb;
background: -webkit-linear-gradient(left top,#8200fb,#c000ff);
background: -o-linear-gradient(bottom right,#8200fb,#c000ff);
background: -moz-linear-gradient(bottom right,#8200fb,#c000ff);
background: linear-gradient(to bottom right,#8200fb,#c000ff);
}
