"Simple card alerts"
Bootstrap 3.3.0 Snippet by Fortael

<div class="container"> <div class="notice notice-success"> <strong>Notice</strong> notice-success </div> <div class="notice notice-danger"> <strong>Notice</strong> notice-danger </div> <div class="notice notice-info"> <strong>Notice</strong> notice-info </div> <div class="notice notice-warning"> <strong>Notice</strong> notice-warning </div> <div class="notice notice-lg"> <strong>Big notice</strong> notice-lg </div> <div class="notice notice-sm"> <strong>Small notice</strong> notice-sm </div> </div>
.notice { padding: 15px; background-color: #fafafa; border-left: 6px solid #7f7f84; margin-bottom: 10px; -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); } .notice-sm { padding: 10px; font-size: 80%; } .notice-lg { padding: 35px; font-size: large; } .notice-success { border-color: #80D651; } .notice-success>strong { color: #80D651; } .notice-info { border-color: #45ABCD; } .notice-info>strong { color: #45ABCD; } .notice-warning { border-color: #FEAF20; } .notice-warning>strong { color: #FEAF20; } .notice-danger { border-color: #d73814; } .notice-danger>strong { color: #d73814; }

Similar snippets: See More


Comments:

comments powered by Disqus