Default Alerts 

<div class="alert alert-primary mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg>... </svg></button><strong>Primary!</strong>Lorem Ipsum is simply dummy text of the printing.</button></div>

Outline Alerts 

<div class="alert alert-outline-primary mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg>... </svg></button><strong>Primary!</strong>Lorem Ipsum is simply dummy text of the printing. </div>

Light Alerts 

<div class="alert alert-light-warning mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg>... </svg></button><strong>Primary!</strong>Lorem Ipsum is simply dummy text of the printing. </div>

Alerts with icon 

<div class="alert alert-icon-left alert-light-primary mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg data-dismiss="alert">... </svg></button><svg>... </svg><strong>Warning!</strong>Lorem Ipsum is simply dummy printing. </div><div class="alert alert-icon-right alert-light-primary mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg data-dismiss="alert">... </svg></button><svg>... </svg><strong>Warning!</strong>Lorem Ipsum is simply dummy printing. </div>

Arrowed Alerts 

<div class="alert alert-arrow-left alert-icon-left alert-light-primary mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg>... </svg></button><svg>... </svg><strong>Warning!</strong>Lorem Ipsum is simply dummy printing. </div><div class="alert alert-arrow-right alert-icon-right alert-light-primary mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg>... </svg></button><svg>... </svg><strong>Warning!</strong>Lorem Ipsum is simply dummy printing. </div>

Custom Alerts 

<div class="alert custom-alert-1 mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg>.... </svg></button><div class="media"><div class="alert-icon"><svg>.... </svg></div><div class="media-body"><div class="alert-text"><strong>Warning!</strong><span>Lorem Ipsum is simply dummy text of the printing.</span></div><div class="alert-btn"><button type="button" class="btn btn-default btn-dismiss">Accept</button></div></div></div></div>
<div class="alert alert-gradient mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg>... </svg></button><strong>New!</strong>Alert with gradient. </div>
<div class="alert alert-background mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg>... </svg></button><strong>New!</strong>Alert with background image. </div>