How to make bootstrap 3 fluid layout without horizontal scrollbar

Question

here is sample link  http   bootply com 76369  this is html i use    lt div class  row  gt     lt div class  col-md-6  gt  col-md-6 lt  div gt     lt div class  col-md-6  gt  col-md-6 lt  div gt   lt  div gt    bootstrap 3 has no container-fluid and row-fluid    i cannot wrap it with  container class because it will become fixed layout   how to make it fluid  full page width  layout   without horizontal scrollbar   with these markup  when you view in the result the x-scroll bar is visible so you can scroll to left and right that it should not     edited  2015-12-09 Already got answer and Bootstrap already released the fix since 3 1 0

User · Answer

It s already fluid by default  If you want to be fluid for less width instead of col-md-6 use col-sm-6 or col-xs-6

User · Answer

The horizontal scrollbar can appear if the container-fluid div is placed directly inside the body   The correct way to use a container-fluid structure is    lt body gt       lt section gt           lt div class  container-fluid  gt               lt div class  row  gt                   lt  -- content goes here -- gt               lt  div gt           lt  div gt       lt  section gt   lt  body gt    So  try wrapping your container-fluid DIVs inside an outer div  such as a  lt div id  wrap  gt  or a  lt section gt  or  lt article gt  or  lt aside gt  or other specialized  lt div gt   and presto  no horizontal scrollbar

User · Answer

You can add a 10px padding on the sides to your body element if all it s children are rows  body     padding  0 10px      if your HTML markup looks something like this    lt body gt       lt div class  row  gt  lt  div gt       lt div class  row  gt  lt  div gt       lt div class  row  gt  lt  div gt   lt  body gt    The rows have a 10 px negative margin  That s what s causing the overflow  If you add 10px padding to the body  they will cancel each other out

User · Answer

In Bootstrap 3  putting columns immediately under body should give you a fluid layout without horizontal scroll bar   lt body gt     lt div class  col-md-6  gt  col-md-6 lt  div gt     lt div class  col-md-6  gt  col-md-6 lt  div gt   lt  body gt

User · Answer

You can fix this problem without disturbing the bootstrap css and wait for a fix in the next version  so you can simply wrap your row by defining you own class  container-fluid with padding     Add this class to your global css file  lt style gt      container-fluid          padding  0 15px          lt  style gt        Wrap your rows in within this  container-fluid      lt div class  container-fluid  gt         lt div class  row  gt             lt div class  col-md-3  gt content lt  div gt             lt div class  col-md-9  gt content lt  div gt             lt div class  col-md-3  gt content lt  div gt         lt  div gt      lt  div gt

User · Answer

I ran in to the same problem  wanting a fluid layout  but wanted to keep the responsive options with rearranging columns and so on for smaller screens and ended up with a small change to in variables less      Large screen   wide desktop   last row of file   container-lg-desktop         100       1140px    grid-gutter-width      This value is used once in grid less and sets   media  min-width   screen-lg-desktop       container       max-width   container-lg-desktop                 The result is that over 1200px the grid is fluid  without horizontal scrollbars   Below that the normal responsive rules apply  You can of course set this to other media queries as well just as easily   If you do not want to edit and compile  less yourself you could override the maxwidth in your own style sheet similair to below    media  min-width  1200px        or min-width  wherever-you-want-your-fluid-breakpoint      body  container       max-width  100           All this assumes you use the normal Bootstrap grid syntax  including container  like below    lt div class  container  gt     lt div class  row   gt       lt div class  col-md-6  gt  col-md-6 lt  div gt       lt div class  col-md-6  gt  col-md-6 lt  div gt     lt  div gt   lt  div gt    Hope this helps

User · Answer

This is what worked for me   I added a style inline to remove the small margin on the right   I don t really like to do inline styling  but this lone style attribute in my html makes it easy for me to remember about the hack-job spliced into my otherwise well separated code   It also eliminates the concern of my external styles loading before or after the bootstrap default stylesheet    lt div class  row  style  margin-right 0px   gt     lt div class  col-md-6  gt     lt div class  col-md-6  gt   lt  div gt

User · Answer

If I understand you correctly  Adding this after any media queries overrides the width restrictions on the default grids  Works for me on bootstrap 3 where I needed a 100  width layout   container      max-width  100         This will remove the outer padding  and push content edge to edge       padding-right  0     padding-left  0       Then you can put your row and grid elements inside the container

User · Answer

This was introduced in v3 1 0  http   getbootstrap com css  grid-example-fluid  Commit  62736046 added   container-fluid variation for full-width containers and layouts

User · Answer

If it still actual for someone  my solution was as follows    container      overflow  hidden      overflow-y  auto

User · Answer

Bootstrap 3 0 version is tricky they will add fix for this issue and probably return container-fluid in Bootstrap 3 1  But until then here is a fix that I m using   First of  you would need custom container and set it to 100  width  and then you will need to fix row margin disposition  and navbar too if you have it      Custom container     container-full     margin  0 auto    width  100        fix row -15px margin    container-fluid       padding  0 15px       fix navbar margin    navbar    margin  0 -15px       fix navbar-right margin    navbar-nav navbar-right last-child     margin-right  0px      You can stack container-full and container-fluid classes on root div  and you can use container-fluid later on    Hope it helps  if you need more info let me know

User · Answer

In the latest version of Twitter Bootstrap the layout is fluid by default  hence you don t need extra classes to declare your layout as fluid    You can further refer to -   http   bassjobsen weblogs fm migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3   http   blog getbootstrap com

User · Answer

Update from 2014  from Bootstrap docs       Grids and full-width layouts Folks looking to create fully fluid   layouts  meaning your site stretches the entire width of the viewport    must wrap their grid content in a containing element with padding  0   15px  to offset the margin  0 -15px  used on  rows

User · Answer

Just my 2 cents here  Mostly this will work for you  as it did for me   body  gt   row       margin-left  0px      margin-right  0px

User · Answer

This is a known issue in BS 3 - https   github com twbs bootstrap issues 9862 source cc  I have tested on Bootply using the latest build  so keep watching GitHub for the latest updates fix   In Bootstrap 3   row is must be used inside a  container or  container-fluid to counteract the negative margins on the row  This will eliminate the horizontal scrollbar   From the docs         Rows must be placed within a  container  fixed-width  or    container-fluid  full-width  for proper alignment and padding     Bootstrap 4  The container row col relationship work the same way as 3 x         Containers are the most basic layout element in Bootstrap and are   required when using our default grid system

User · Answer

The only thing that assisted me was to set margin 0px on the topmost  lt div class  row  gt  in my html DOM    This again wasn t the most appealing way to solve the issue  but as it is only in one place I put it inline    As an fyi the container-fluid and apparent bootstrap fixes only introduced an increased whitespace on either side of the visible page       Although I came across my solution by reading through the back and forth on the github issue - so worthwhile reading

User · Answer

This worked for me  Tested in FF  Chrome  IE11  IE10   row       width 99 99

User · Answer

I also have it and while waiting on them to fix it  I added this shame css    body   overflow-x  hidden    it s an horrible alternative  but it work  I ll be happy to remove it when they ll have fixed the issue   An other alternative  as pointed out in the issue  is to override  row     row     margin-left  0px    margin-right  0px

User · Answer

Summarizing the most relevant comments in one answer    this is a known bug there are workarounds but you might not need them  read on  it happens when elements are placed directly inside the body  rather than inside a container-fluid div or another containing div  Placing them directly in the body is exactly what most people do when testing stuff locally  Once you place your code in the complete page  so within a container-fluid or another container div  you will not face this problem  no need to change anything

User · Answer

Found this workaround   row     margin-left  0    margin-right  0     class   col-    gt   class   col-   first-child   class   col-    gt   class    col-   first-child  class    col-    gt   class   col-   first-child   class    col-   gt   class    col-   first-child   row  gt   class   col-   first-child   row  gt   class    col-   first-child    padding-left  0px     class   col-    gt   class   col-   last-child   class   col-    gt   class    col-   last-child  class    col-    gt   class   col-   last-child   class    col-   gt   class    col-   last-child   row  gt   class   col-   last-child   row  gt   class    col-   last-child      padding-right  0px

User · Answer

Apply to the body seems to get rid of the horizontal scrollbar  overflow-x  hidden

[html] How to make bootstrap 3 fluid layout without horizontal scrollbar

Examples related to html

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3