Bootstrap - custom alerts with progress bar
Bootstrap - custom alerts with progress bar
I am trying to customize the bootstrap 3.3.7 alert class in order to add a progress bar and inline items to achieve something like this (the dotted line is just to demonstrate that items are aligned):
alert
However, I have problem in fitting the progress bar at the bottom of the right part with a width of 100%. Also, I have problem to adjust the height of the left part to 100% and ajust the icon in the middle.
width
height
I am not sure if I am using the correct css strategy, but this is what I have done so far:
/* !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;
}
.leftPart {
display: inline-block !important;
height: 100% !important;
width: 32px;
font-size: 22px;
background-color: #31708f;
color: #d9edf7;
}
.leftPartContent {
padding: 0 5px;
}
.rightPart {
display: inline-block;
height: 100%;
width: 438px;
}
.rightPartContent {
display: flex;
align-items: center;
}
.close {
position: absolute !important;
right: 15px !important;
}
.progress {
margin-bottom: 0px !important;
bottom: 0px !important;
left: 0px !important;
width: 100% !important;
height: 5px !important;
}
<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="leftPartContent glyphicon glyphicon-info-sign"></span>
</div>
<div class="rightPart">
<div class="rightPartContent">
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<div>
<span><strong>2018-15-06, 1:29 PM</strong></span><br>
<span>Hello world!</span>
</div>
</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>
1 Answer
1
/* !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">×</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>
you shoud put your css after bootstrap and !important will not be necessary
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
