Custom Alerts

<div class="alert d-flex shadow border-0 p-0 col-6 rounded overflow-hidden align-items-stres" role="alert">
    <div class="bg-primary d-flex align-items-center p-md mr-sm"><i class="material-icons text-white">done</i></div>
    <div class="p-md">
        <div class="card-title m-0">Success!</div><span class="text-muted text-small">Photo successfully uploaded.</span>
    </div>
    <div class="d-flex align-items-center"><button class="close icon icon-sm hover-gray" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>
</div>

<div class="alert d-flex shadow border-0 p-0 col-6 rounded overflow-hidden align-items-stres" role="alert">
    <div class="bg-warning d-flex align-items-center p-md mr-sm"><i class="material-icons text-white">warning</i></div>
    <div class="p-md">
        <div class="card-title m-0">Warning!</div><span class="text-muted text-small">Photo size is too big.</span>
    </div>
    <div class="d-flex align-items-center"><button class="close icon icon-sm hover-gray" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>
</div>

<div class="alert d-flex shadow border-0 p-0 col-6 rounded overflow-hidden align-items-stres" role="alert">
    <div class="bg-danger d-flex align-items-center p-md mr-sm"><i class="material-icons text-white">error</i></div>
    <div class="p-md">
        <div class="card-title m-0">Error!</div><span class="text-muted text-small">Photo upload failed!</span>
    </div>
    <div class="d-flex align-items-center"><button class="close icon icon-sm hover-gray" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>
</div>

Bootstrap Alerts

<div class="alert alert-primary" role="alert"><strong class="text-capitalize">Primary!</strong> Lorem ipsum dolor sit amet.
  <button class="close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="alert alert-success" role="alert"><strong class="text-capitalize">Success!</strong> Lorem ipsum dolor sit amet.
  <button class="close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="alert alert-info" role="alert"><strong class="text-capitalize">Info!</strong> Lorem ipsum dolor sit amet.
  <button class="close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="alert alert-warning" role="alert"><strong class="text-capitalize">Warning!</strong> Lorem ipsum dolor sit amet.
  <button class="close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="alert alert-danger" role="alert"><strong class="text-capitalize">Danger!</strong> Lorem ipsum dolor sit amet.
  <button class="close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>