<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" /> <div class="container"> <div class="row no-gutters mt-3"> <div class="col-md-3 no-gutters widget-holder-amber "> <div class=" card d-flex shadow-sm position-relative bg-white rounded-0 mr-2"> <h6 class="text- text-center font-weight-bold tx-2"> Projeler</h6> <div class="d-flex justify-content-between "> <span class="text-amber float-left widget_icon d-flex align-self-center my-auto tx-3"> <i class="fas fa-camera"></i> </span> <span class=" text-orange font-weigth-bold tx-3">15</span> </div> </div> </div> <div class="col-md-3 no-gutters "> <div class=" card position-relative shadow-sm bg-purple rounded-0 mr-2"> <div class="card-body"></div> </div> </div> <div class="col-md-3 no-gutters "> <div class=" card shadow-sm bg-teal rounded-0 mr-2"> <div class="card-body"></div> </div> </div> <div class="col-md-3 no-gutters "> <div class=" card shadow-sm bg-amber rounded-0 mr-2"> <div class="card-body"></div> </div> </div> </div> </div>

.bg-red{ background-color:#f44336!important; } .bg-blue{ background-color:#2196f3!important; } .bg-pink{ background-color:#e91e63!important; } .bg-purple{ background-color:#9c27b0!important; } .bg-deepPurple{ background-color:#673ab7!important; } .bg-indigo{ background-color:#3f51b5!important; } .bg-lightBlue{ background-color:#03a9f4!important; } .bg-cyan{ background-color:#00bcd4!important; } .bg-teal{ background-color:#009688!important; } .bg-green{ background-color:#4caf50!important; } .bg-lightGreen{ background-color:#8bc34a!important; } .bg-lime{ background-color:#cddc39!important; } .bg-yellow{ background-color:#ffeb3b!important; } .bg-amber{ background-color:#ffc107!important; } .bg-orange{ background-color:#ff9800!important; } .bg-deepOrange{ background-color:#ff5722!important; } .bg-grey{ background-color:#9e9e9e!important; } .bg-blueGrey{ background-color:#607d8b!important; } .bg-orange{ background-color:#ff9800!important; } /*Text*/ .text-red{ color:#f44336!important; } .text-blue{ color:#2196f3!important; } .text-pink{ color:#e91e63!important; } .text-purple{ color:#9c27b0!important; } .text-deepPurple{ color:#673ab7!important; } .text-indigo{ color:#3f51b5!important; } .text-lightBlue{ color:#03a9f4!important; } .text-cyan{ color:#00bcd4!important; } .text-teal{ color:#009688!important; } .text-green{ color:#4caf50!important; } .text-lightGreen{ color:#8bc34a!important; } .text-lime{ color:#cddc39!important; } .text-yellow{ color:#ffeb3b!important; } .text-amber{ color:#ffc107!important; } .text-orange{ color:#ff9800!important; } .text-deepOrange{ color:#ff5722!important; } .text-grey{ color:#9e9e9e!important; } .text-blueGrey{ color:#607d8b!important; } .text-orange{ color:#ff9800!important; } /*Tex*/ .tx-1{ font-size:1rem!important; } .tx-11{ font-size:1.1rem!important; } .tx-12{ font-size:1.2rem!important; } .tx-13{ font-size:1.3rem!important; } .tx-14{ font-size:1.4rem!important; } .tx-15{ font-size:1.5rem!important; } .tx-16{ font-size:1.6rem!important; } .tx-17{ font-size:1.7rem!important; } .tx-18{ font-size:1.2rem!important; } .tx-19{ font-size:1.2rem!important; } .tx-2{ font-size:2rem!important; } .tx-3{ font-size:3rem!important; } .tx-4{ font-size:4rem!important; } .widget_icon{ position:relative; left:10px; } .widget-holder-danger{ border-left:10px solid ; color:#f44336!important; } .widget-holder-amber{ border-left:10px solid ; color:#ffc107!important; }