<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="alert alert-success" role="success" *ngIf=""> <div class="media"> <div class="media-left media-middle"> <i class="fa fa-check-circle-o pull-left"></i> </div> <div class="media-body"> <p class="media-heading">texto aqui</p> </div> </div> </div> <div class="alert alert-info" role="info" *ngIf=""> <div class="media"> <div class="media-left media-middle"> <i class="fa fa-info-circle pull-left"></i> </div> <div class="media-body"> <p class="media-heading">texto aqui</p> </div> </div> </div> <div class="alert alert-danger" role="alert" *ngIf=""> <div class="media"> <div class="media-left media-middle"> <i class="fa fa-exclamation-triangle pull-left"></i> </div> <div class="media-body"> <p class="media-heading">texto aqui</p> </div> </div> </div> </div> </div>

.alert{ position:fixed; bottom:10px; right:10px; padding:15px; width: 350px; box-shadow:$shadow-big; p{ font-weight:$font-weight-regular; } i{ font-size:30px; opacity:0.5; margin-top:3px; } }