I’m trying to design a web page using Twitter Bootstrap with a “floating” (fixed-position) alert at the top, like so:
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="top-message" class="container row col-sm-12">
<div class="alert alert-danger">
Hi there!
</div>
</div>
</div>
<!-- page content -->
</div>
</div>
CSS:
#top-message {
z-index: 10;
position: fixed;
width: 100%;
}
On smaller screens, this works perfectly:
However, on larger screens, the alert simply extends out like this:
Removing the width: 100%
from top-message
wouldn’t be an option either, since I need the alert to occupy some width even though the text is small.
How should I design the page so that the alert is maintained in the middle of the page like in smaller screens; for any size of the screen on which the page is rendered?
2
Answers
Using modal bootstrap instead of alert. Modal is fixed position & size.
Read here: Modal Bootstrap
the problem’s your html structure I guess, why are you using a fixed element inside a column? put it before the closing tag of the body and it’ll work much better. DEMO
HTML
CSS