[Solved] Bootstrap – custom alerts with progress bar

/* !important are just used to overide the bootstrap css in the snippet */
.alertContainer {
    border-radius: 0 !important;
    border-width: 0 !important;
    padding: 0 !important;
    height: auto !important;
    position: absolute !important;
    bottom: 15px !important;
    left: 0;
    right: 0;
    margin: 0 auto !important;
    width: 480px !important;
    display: table;
}

.leftPart {
    text-align: center;
    width: 55px;
    font-size: 22px;
    height: 75px;
    background-color: #31708f;
    color: #d9edf7;
    display: table-cell;
    vertical-align: middle;
}

.rightPart {
    vertical-align: middle;
    display: table-cell;
    width: 438px;
}

.close {
    position: absolute !important;
    right: 15px !important;
}

.progress {
    margin-bottom: 0 !important;
    bottom: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: 5px !important;
    position: absolute;
    border-radius: 0;
}

button.close {
    line-height: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height:600px; width:600px;">
<div class="alertContainer alert alert-info" role="alert">
    <div class="leftPart">
        <span class="glyphicon glyphicon-info-sign"></span>
    </div>
    <div class="rightPart">

        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="col-sm-12">
            <span><strong>2018-15-06, 1:29 PM</strong></span><br>
            <span>Hello world!</span>
        </div>

        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
        </div>
    </div>
</div>
</div>