Bootstrap alert in a fixed floating div at the top of page

Question

I have a web application which uses Bootstrap  2 3 2 - corporate policy  we cannot upgrade to 3 0 without lots of testing across several web applications   We have several long pages within this application that require validation of forms and tables - however due to practical and aesthetic reasons we need to have an alert message appear as a floating div at the top of the page   This will be a fixed floating div  that can be shown and hidden using javascript as and when needed  This part works and I can control this div  whenever I need to flash some information to the user or some error takes place   The layout is like so    lt div id  message  gt       lt div id  inner-message  class  alert alert-error  gt           lt button type  button  class  close  data-dismiss  alert  gt  amp times  lt  button gt          test error message      lt  div gt   lt  div gt    The styling is below    message       position  fixed      top  0      left  0      width  100      inner-message       margin  0 auto      The  message div behaves all well and good  but when I try and add some padding to the  message div  to try and get some space between the edge of the page and the div i e  padding  5px   the div only gets padding on the left and top and the rest of the div is pushed out too far to the right of the page  hiding part of the  x  inside the bootstrap alert    Has anyone experienced this before  It seems like a simple enough issue  so am I overlooking something

User · Answer

If you want an alert that is fixed to the top and you are using bootstrap navbar navbar-fixed-top the following style class will overlay they alert on top of the nav:

.alert-fixed {
    position:fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%;
    z-index:9999; 
    border-radius:0px
}

This worked well for me to provide alerts even when the user is scrolled down in the page.

User · Answer

You can use this class   class  sticky-top alert alert-dismissible

User · Answer

Just wrap your inner message inside a div on which you apply your padding   http   jsfiddle net Ez9C4    lt div id  message  gt       lt div style  padding  5px   gt           lt div id  inner-message  class  alert alert-error  gt               lt button type  button  class  close  data-dismiss  alert  gt  amp times  lt  button gt              test error message          lt  div gt       lt  div gt   lt  div gt

User · Answer

The simplest approach would be to use any of these class utilities that Bootstrap provides    lt div class  position-fixed  gt     lt  div gt   lt div class  position-sticky  gt     lt  div gt   lt div class  fixed-top  gt     lt  div gt   lt div class  fixed-bottom  gt     lt  div gt   lt div class  sticky-top  gt     lt  div gt    https   getbootstrap com docs 4 0 utilities position

User · Answer

I think the issue is that you need to wrap your div in a container and or row    This should achieve a similar look as what you are looking for     lt div class  container  gt       lt div class  row  id  error-container  gt            lt div class  span12  gt                  lt div class  alert alert-error  gt                   lt button type  button  class  close  data-dismiss  alert  gt    lt  button gt                   test error message               lt  div gt            lt  div gt       lt  div gt   lt  div gt    CSS    error-container        margin-top 10px       position  fixed      Bootply demo

User · Answer

Others are suggesting a wrapping div but you should be able to do this without adding complexity to your html     check this out    message     box-sizing  border-box    padding  8px

[javascript] Bootstrap alert in a fixed floating div at the top of page

Examples related to javascript

Examples related to html

Examples related to css

Examples related to twitter-bootstrap