"Bootstrap Notifications"
Bootstrap 4.1.1 Snippet by CreativeTim

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet"> <div class="section section-notifications"> <div class="container mb-5"> <h4>Notifications</h4> </div> <div class="alert alert-success" role="alert"> <div class="container"> <div class="alert-icon"> <i class="now-ui-icons ui-2_like"></i> </div> <strong>Well done!</strong> You successfully read this important alert message. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="now-ui-icons ui-1_simple-remove"></i> </span> </button> </div> </div> <div class="alert alert-info" role="alert"> <div class="container"> <div class="alert-icon"> <i class="now-ui-icons travel_info"></i> </div> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="now-ui-icons ui-1_simple-remove"></i> </span> </button> </div> </div> <div class="alert alert-warning" role="alert"> <div class="container"> <div class="alert-icon"> <i class="now-ui-icons ui-1_bell-53"></i> </div> <strong>Warning!</strong> Better check yourself, you're not looking too good. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="now-ui-icons ui-1_simple-remove"></i> </span> </button> </div> </div> <div class="alert alert-danger" role="alert"> <div class="container"> <div class="alert-icon"> <i class="now-ui-icons objects_support-17"></i> </div> <strong>Oh snap!</strong> Change a few things up and try submitting again. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="now-ui-icons ui-1_simple-remove"></i> </span> </button> </div> </div> </div> <footer class="footer text-center "> <p>Made with <a href="https://demos.creative-tim.com/now-ui-kit/index.html" target="_blank">Now UI Kit</a> by Creative Tim</p> </footer>
button, input { font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; } body { color: #2c2c2c; font-size: 14px; font-family: Montserrat,Helvetica Neue,Arial,sans-serif; overflow-x: hidden; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @font-face { font-family: 'Nucleo Outline'; src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot"); src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype"); src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2"); font-weight: normal; font-style: normal; } h4 { font-weight: 400; } a { color: #f96332; } a:hover, a:focus { color: #f96332; } h4, .h4 { font-size: 1.5em; line-height: 1.45em; margin-top: 30px; margin-bottom: 15px; } [data-toggle="collapse"][data-parent="#accordion"] i { -webkit-transition: transform 150ms ease 0s; -moz-transition: transform 150ms ease 0s; -o-transition: transform 150ms ease 0s; -ms-transition: all 150ms ease 0s; transition: transform 150ms ease 0s; } [data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @font-face { font-family: 'Nucleo Outline'; src: url("../fonts/nucleo-outline.eot"); src: url("../fonts/nucleo-outline.eot") format("embedded-opentype"), url("../fonts/nucleo-outline.woff2") format("woff2"), url("../fonts/nucleo-outline.woff") format("woff"), url("../fonts/nucleo-outline.ttf") format("truetype"); font-weight: normal; font-style: normal; } .now-ui-icons { display: inline-block; font: normal normal normal 14px/1 'Nucleo Outline'; font-size: inherit; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @-webkit-keyframes nc-icon-spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes nc-icon-spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @keyframes nc-icon-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .now-ui-icons.objects_support-17:before { content: "\ea56"; } .now-ui-icons.travel_info:before { content: "\ea04"; } .now-ui-icons.ui-1_bell-53:before { content: "\ea0f"; } .now-ui-icons.ui-1_simple-remove:before { content: "\ea53"; } .now-ui-icons.ui-2_like:before { content: "\ea37"; } .alert { border: 0; border-radius: 0; color: #FFFFFF; padding-top: .9rem; padding-bottom: .9rem; } .alert.alert-success { background-color: rgba(24, 206, 15, 0.8); } .alert.alert-danger { background-color: rgba(255, 54, 54, 0.8); } .alert.alert-warning { background-color: rgba(255, 178, 54, 0.8); } .alert.alert-info { background-color: rgba(44, 168, 255, 0.8); } .alert .alert-icon { display: block; float: left; margin-right: 15px; margin-top: -1px; } .alert strong { text-transform: uppercase; font-size: 12px; } .alert i.now-ui-icons { font-size: 20px; } .alert .close { color: #FFFFFF; opacity: .9; text-shadow: none; line-height: 0; outline: 0; display: inline-block; cursor: pointer; } .section { padding: 70px 0; position: relative; background: #FFFFFF; } [data-background-color="orange"] { background-color: #e95e38; } [data-background-color="black"] { background-color: #2c2c2c; } [data-background-color]:not([data-background-color="gray"]) { color: #FFFFFF; } [data-background-color]:not([data-background-color="gray"]) h4, [data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) { color: #FFFFFF; } @media screen and (max-width: 517px) { .alert .alert-icon { margin-top: 10px; } } @media screen and (max-width: 580px) { .alert button.close { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); } } .section-notifications { padding: 0; } footer{ margin-top:50px; color: #555; background: #fff; padding: 25px; font-weight: 300; background: #f7f7f7; } .footer p{ margin-bottom: 0; } footer p a{ color: #555; font-weight: 400; } footer p a:hover{ color: #e86c42; }

Related: See More


Questions / Comments: