How to make a Bootstrap 3 Alert flyin from top of screen to center - twitter-bootstrap-3

Question

I've been searching high and low for some examples of a Bootstrap 3 Alert box flying in from to top of screen and ending at center screen on top of all elements.
I'm finding lots re. modals, but how do i accomplish this behavior for a alert box?

Answer 1

You can take a look at this answer by chipChocolate.py, and the fiddle he provided here.
It is not exactly what you are looking for since the div is moving from bottom to top but the idea is the same.
Create three divs: main-container, alert-container, alert-content
<div class="main-container">
<div class="alert-container">
<!-- placeholder image -->
<img class="inner_img" src="http://placehold.it/1000x1000" />
<div class="alert-content">
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
</div>
</div>
Then apply this css
.main-container{
position: relative; /* Set to absolute */
}
.alert-container {
position: absolute; /* Set to absolute and positioned at top corner*/
top: 0;
left: 0;
}
.alert-content {
position: absolute; /* This moves it to the bottom (initial state) */
bottom: 90%;
width: 100%;
height: 10%;
transition: bottom 1s;
}
.main-container:hover .alert-content {
bottom: 50%; /* This moves it to the middle (only on hover) */
}
i have made a fiddle here with bootstrap alerts and made the transition from top to the middle of the page. You can adjust it accordingly.