Alarm notification

This bootstrap snippet called "Alarm notification" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: alarm,notification,snippet,table,list

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container profile">
    <div class="col-sm-7 sm-margin-bottom-30">
        <div class="panel panel-profile">
            <div class="panel-heading overflow-h">
                <h2 class="panel-title heading-sm pull-left"><i class="fa fa-send"></i> Alarm Notification</h2>
                <a href="#"><i class="fa fa-cog pull-right"></i></a>
            </div>
            <div id="scrollbar3" class="panel-body contentHolder ps-container">
                <div class="alert-blocks alert-blocks-pending alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    <img class="rounded-x" src="http://htmlstream.com/preview/unify-v1.6-production/assets/img/testimonials/img3.jpg" alt="">
                    <div class="overflow-h">
                        <strong class="color-yellow">Pending... <small class="pull-right"><em>Just now</em></small></strong> 
                        <p>Your friend request has been sent.</p>
                    </div>    
                </div>
                <div class="alert-blocks alert-blocks-success alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    <img class="rounded-x" src="http://htmlstream.com/preview/unify-v1.6-production/assets/img/testimonials/img2.jpg" alt="">
                    <div class="overflow-h">
                        <strong class="color-green">Accepted. <small class="pull-right"><em>7 hours ago</em></small></strong> 
                        <p>Your friend request has been accepted.</p>
                    </div>    
                </div>
                <div class="alert-blocks alert-blocks-info alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    <i class="icon-custom rounded-x icon-bg-blue fa fa-bolt"></i>
                    <div class="overflow-h">
                        <strong class="color-blue">Info <small class="pull-right"><em>2 days ago</em></small></strong> 
                        <p>Your friend request has been denied :)</p>
                    </div>    
                </div>
                <div class="alert-blocks alert-blocks-error alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    <img class="rounded-x" src="http://htmlstream.com/preview/unify-v1.6-production/assets/img/testimonials/img6.jpg" alt="">
                    <div class="overflow-h">
                        <strong class="color-red">Denied! <small class="pull-right"><em>2 days ago</em></small></strong> 
                        <p>Your friend request has been denied.</p>
                    </div>    
                </div>
                <div class="alert-blocks alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    <i class="icon-custom rounded-x icon-bg-dark fa fa-magic"></i>
                    <div class="overflow-h">
                        <strong class="color-dark">Default <small class="pull-right"><em>Just now</em></small></strong> 
                        <p><strong>Adam Johnson's</strong> friend request pending..</p>
                    </div>    
                </div>
                <div class="alert-blocks alert-blocks-pending alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    <i class="icon-custom rounded-x icon-bg-yellow fa fa-info"></i>
                    <div class="overflow-h">
                        <strong class="color-yellow">Pending <small class="pull-right"><em>Just now</em></small></strong> 
                        <p><strong>Adam Johnson's</strong> friend request pending..</p>
                    </div>    
                </div>
            <div class="ps-scrollbar-x-rail" style="width: 459px; display: none; left: 0px; bottom: -100px;"><div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div></div><div class="ps-scrollbar-y-rail" style="top: 103px; height: 320px; display: inherit; right: 3px;"><div class="ps-scrollbar-y" style="top: 78px; height: 242px;"></div></div></div>
        </div>
    </div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body {
    background:#eee;
}
.profile .panel-profile {
    border: none;
    margin-bottom: 0;
    box-shadow: none;
    margin-top:40px;
}
.profile .panel-heading {
    color: #585f69;
    background: #fff;
    padding: 7px 15px;
    border-bottom: solid 3px #f7f7f7;
}
.overflow-h {
    overflow: hidden;
}
.panel-heading {
    color: #fff;
    padding: 5px 15px;
}

.profile .panel-title {
    font-size: 16px;
}

.contentHolder {
    padding: 0;
    height: 320px;
    margin: 0px auto;
    overflow-y: auto;
    position: relative;
}

.alert-blocks {
    margin: 0 15px 5px;
    background: #f7f7f7;
    padding: 10px 10px 13px;
}

.color-green {
    color: #72c02c;
}

.color-dark {
    color: #555555;
}

.alert-blocks.alert-dismissable {
    padding-right: 35px;
}
.alert-blocks:first-child {
    margin-top: 15px;
}
.alert-blocks-pending {
    background: #fffdcc;
}

.alert-blocks-success {
    background: #e1febc;
}

.alert-blocks-info {
    background: #e0f3fe;
}

.alert-blocks-error {
    background: #fee0e0;
}

.alert-blocks img {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

.rounded-x {
    border-radius: 50% !important;
}

.alert-blocks i {
    float: left;
    margin-right: 15px;
}

i.icon-bg-dark {
    background: #555;
}

i.icon-bg-blue {
    background: #3498db;
}

i.icon-bg-yellow {
    background: #f1c40f;
}

i.icon-custom {
    color: #555;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    margin-bottom: 5px;
    text-align: center;
    display: inline-block;
    border: solid 1px #555;
}

i.icon-bg-u, i.icon-bg-red, i.icon-bg-sea, i.icon-bg-dark, 
i.icon-bg-darker, i.icon-bg-grey, i.icon-bg-blue, i.icon-bg-green, 
i.icon-bg-yellow, i.icon-bg-orange, i.icon-bg-purple, 
i.icon-bg-aqua, i.icon-bg-brown, i.icon-bg-dark-blue, 
i.icon-bg-light-grey, i.icon-bg-light-green {
    color: #fff;
    border-color: transparent;
}

.overflow-h {
    overflow: hidden;
}

.color-yellow {
    color: #f1c40f;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.2

Created: Feb 15th 2015, 14:26

Views: 960