How to create a 100 screen width div inside a container in bootstrap

Question

Let s say i have the following markup    lt div class  container  gt       lt div class  row  gt           lt div class  col-md-12  gt                               lt div class  full-width-div  gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Now how to make  full-width-div stretch to the full width of the screen  Because currently it s limited inside the container

User · Answer

You should use container-fluid  not container  See example  http   www bootply com onAFpJcslS

User · Answer

2019 s answer as this is still actively seen today  You should likely change the  container to  container-fluid  which will cause your container to stretch the entire screen  This will allow any div s inside of it to naturally stretch as wide as they need   original hack from 2015 that still works in some situations  You should pull that div outside of the container  You re asking a div to stretch wider than its parent  which is generally not recommended practice   If you cannot pull it out of the div for some reason  you should change the position style with this css    full-width-div       position  absolute      width  100       left  0      Instead of absolute  you could also use fixed  but then it will not move as you scroll

User · Answer

The reason why your full-width-div doesn t stretch 100  to your screen it s because of its parent  container  which occupies only about 80  of the screen   If you want to make it stretch 100  to the screen either you make the  full-width-div  position fixed or  use the  container-fluid  class instead of  container    see Bootstrap 3 docs  http   getbootstrap com css  grid

[html] How to create a 100% screen width div inside a container in bootstrap?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3