<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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="example"> <div class="alert alert-avatar alert-primary alert-dismissible"> <span class="avatar" style="background-image: url(http://icons.iconarchive.com/icons/google/noto-emoji-smileys/256/10006-grinning-face-with-smiling-eyes-icon.png)"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> <div class="alert alert-avatar alert-success alert-dismissible"> <span class="avatar" style="background-image: url(http://icons.iconarchive.com/icons/google/noto-emoji-smileys/128/10017-kissing-face-with-smiling-eyes-icon.png)"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div>

/*! CSS Used from: https://tabler.github.io/tabler/assets/css/dashboard.css */ *,*::before,*::after { box-sizing: border-box; } .alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 7px; } .alert-dismissible { padding-right: 3.90625rem; } .alert-primary { color: white; background-color: #4286f4; border-color: #cbdbf2; } .alert-success { color: white; background-color: #4286f4; border-color: #d2ecb8; } @media print { *,*::before,*::after { text-shadow: none!important; box-shadow: none!important; } } body *::-webkit-scrollbar { width: 6px; height: 6px; transition: .3s background; } body *::-webkit-scrollbar-thumb { background: #ced4da; } body *:hover::-webkit-scrollbar-thumb { background: #adb5bd; } .alert { font-size: 0.9375rem; } .alert-avatar { padding-left: 3.75rem; } .alert-avatar .avatar { position: absolute; top: .5rem; left: .75rem; } .avatar { width: 2rem; height: 2rem; line-height: 2rem; border-radius: 50%; display: inline-block; background: #ced4da no-repeat center/cover; position: relative; text-align: center; color: #868e96; font-weight: 600; vertical-align: bottom; font-size: .875rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .example { padding: 1.5rem; border: 1px solid rgba(0, 40, 100, 0.12); border-radius: 3px 3px 0 0; font-size: 0.9375rem; }