CODEWITHSUNDEEP
cssbootstrap-4
snowflakes74
snowflakes74

Reputation: 1307

Add an font awesome icon to Bootstrap 4 callout

I am trying to add a icon on the left side of the Bootstrap 4 callout but it is showing above the H4.

I want it on the left side and then the message. I have tried it as .p:last-child as well but it is not reflecting.

This is the markup

<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 the ccs for the callout is like below:

.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;
}

Upvotes: 0

Views: 478

Answers (1)

HardlyNoticeable
HardlyNoticeable

Reputation: 517

Edit: Try using the grid to put the icon and the h4 and body side-by-side

<div class="container">
  <div class="row">

    ...

    <div class="col-1"><i class="fal fa-sensor-alert fa-2x mr-2"></i></div>
    <div class="col-11"><h4> {{childName }} is currently NOT marked.</h4>Mark now.</div>

    ...

  </div>  
</div>

Upvotes: 1

Related Questions