I am having issues adding an icon to the left side of a Bootstrap 4 callout. Currently, the icon is appearing above the H4 heading.
I would like the icon to be positioned on the left side before the message. I have attempted using .p:last-child but it does not seem to be working.
Here is the markup I am using:
<div class="callout callout-danger" *ngIf="!isMarked">
<i class="fal fa-sensor-alert fa-2x mr-2"></i>
<h4>{{childName }} is currently NOT marked.</h4>
Mark now.
</div>
And here is the CSS for the callout:
.callout {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
}
.callout .h4 {
margin-top: 0;
margin-bottom: 5px;
padding-left:20px;
}
.callout .p:last-child {
margin-bottom: 0;
}
.callout .code {
border-radius: 3px;
}
.callout .bs-callout {
margin-top: -5px;
}
.callout-success {
border-left-color: #5cb85c;
}
.callout-danger {
border-left-color: #d9534f;
}