<div class="alert alert-info" role="alert">
    This is a INFO alert—check it out!
</div>
<div class="alert alert-{{ type }}" role="alert">
  {% if fa_icons %}
    <div class="alert-wrapper">
      <i class="{{ fa_icons.class }}"></i><span class="sr-only">{{ fa_icons.description }}</span>
  {% endif %}
    {{ message }}
  {% if fa_icons %}
    </div>
  {% endif %}
</div>
{
  "type": "info",
  "message": "This is a INFO alert—check it out!"
}
  • Content:
    .alert {
      font-size: 1.5rem;
    
      .alert-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
    
        @include media-breakpoint-down(xs) {
          flex-direction: column;
          justify-content: center;
        }
    
        i {
          font-size: 2.75rem;
          padding: 0 $spacer 0 0;
        }
      }
    }
    
  • URL: /components/raw/alerts/alerts.scss
  • Filesystem Path: bits/04-components/alerts/alerts.scss
  • Size: 305 Bytes

Display the various alert and what they mean.