<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2 class="text-center mt-5">Statistics Cards</h2> <div class="row"> <div class="col-md-3 mt-2"> <div class="card purple-card"> <div class="content"> <h3>Orders</h3> <p>Total Orders 5000</p> </div> <div class="card-icon-div"> <span class="glyphicon glyphicon-send card-icon purple-icon" aria-hidden="true"></span> </div> </div> </div> <div class="col-md-3 mt-2"> <div class="card orange-card"> <div class="content"> <h3>Sales</h3> <p>Total Sale 500</p> </div> <div class="card-icon-div"> <span class="glyphicon glyphicon-save-file card-icon orange-icon" aria-hidden="true"></span> </div> </div> </div> <div class="col-md-3 mt-2"> <div class="card green-card"> <div class="content"> <h3>Rewards</h3> <p>Total Rewards 5000</p> </div> <div class="card-icon-div"> <span class="glyphicon glyphicon-gift card-icon green-icon" aria-hidden="true"></span> </div> </div> </div> <div class="col-md-3 mt-2"> <div class="card blue-card"> <div class="content"> <h3>Stocks</h3> <p>Total Stocks 5000</p> </div> <div class="card-icon-div"> <span class="glyphicon glyphicon-inbox card-icon blue-icon" aria-hidden="true"></span> </div> </div> </div> </div> </div>

body{ font-family: sans-serif !important; } .card{ border-radius: 14px; color:#fff; padding:0.5em 1.6em; display: flex; box-shadow: 2px 2px 1px 2px #efefef; height:130px; overflow: hidden; } .text-center{ text-align: center; } .mt-5{ margin-top: 3em; } .purple-card{ background: linear-gradient(to right, #8467D7, #893BFF); } .orange-card{ background: linear-gradient(to right, #C24641, #DC381F); } .green-card{ background: linear-gradient(to right, #4CC552, #4CC417); } .blue-card{ background: linear-gradient(to right, #48CCCD, #43C6DB); } .card-icon-div{ margin: auto; } .card-icon{ text-align: right; background: #fff; font-size: 2em; border-radius: 38px; padding:16px 16px; } .mt-2{ margin-top: 18px; } .card-heading{ margin-top:0.3em !important; } .purple-icon{ color:#893BFF; box-shadow: 2px 2px 1px 2px #893BFF; } .orange-icon{ color:#DC381F; box-shadow: 2px 2px 1px 2px #DC381F; } .green-icon{ color:#4CC417; box-shadow: 2px 2px 1px 2px #4CC417; } .blue-icon{ color:#43C6DB; box-shadow: 2px 2px 1px 2px #43C6DB; }