estuve creado un estilo css para mi proyecto funciona todo bien el tema es que no me toma una clase en css para poner el fuente mas grande y en negrita.
el problema esta en .metric .title span
.metric {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
margin-bottom: 30px;
border: 1px solid #DCE6EB;
}
.metric .icon {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.metric .icon.success i {
font-size: 25px;
color: #4CAF50;
}
.metric .icon.gray i {
font-size: 25px;
color:#9E9E9E;
}
.metric .icon.danger i {
font-size: 25px;
color: #E42729;
}
.metric .icon .warning i {
font-size: 25px;
color: #ffa000 ;
}
.metric p {
margin-bottom: 0;
line-height: 1.2;
text-align: right;
}
.metric .title span {
color: #6f6f6fe8;
font-weight: bold;
font-size: 15px;
}
.metric .number {
display: block;
font-size: 28px;
font-weight: 300;
}
.metric .title {
font-size: 16px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div class="metric">
<span class="icon success"><i class="icon-check-square"></i></span>
<p>
<span class="number">1</span>
<span class="title">CONCRETADAS</span>
</p>
</div>
</div>
<div class="col-md-4">
<div class="metric">
<span class="icon gray"><i class="icon-clock"></i></span>
<p>
<span class="number">1</span>
<span class="title">EN PROCESO</span>
</p>
</div>
</div>
<div class="col-md-4">
<div class="metric">
<span class="icon danger"><i class="icon-x-square"></i></span>
<p>
<span class="number">1</span>
<span class="title">RECHAZADAS</span>
</p>
</div>
</div>
</div>