How to make bootstrap 3 layout without horizontal scrollbar

Question

Here is an example link: http://bootply.com/76369

this is the html that i am using.

<div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> 

bootstrap 3 does not contain container fluid and liquid-rows.

I cannot wrap it with .container class because it will become fixed.

how to make it fluid (full page width) layout ( without horizontal scrollbar )

with this markup. when viewing the result, the x-scroll line is displayed, so you can scroll it left and right so that it is not.

---

edited by: 2015-12-09
Already received a response, and Bootstrap has already released a patch from version 3.1.0

Answer 1

This was introduced in v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

Commit # 62736046 added option ".container-fluid for containers and full-width layouts".

Answer 2

I also have it, and, expecting to fix them, I added this css shame:

body { overflow-x: hidden;}

This is a terrible alternative, but it works. I will be happy to remove it when they fix the problem.

Another option, as stated in the issue , is to override .row :

 .row { margin-left: 0px; margin-right: 0px; } 

Answer 3

This is a known issue in BS 3 - https://github.com/twbs/bootstrap/issues/9862?source=cc

I tested on Bootply using the latest build, so keep watching GitHub for the latest updates / fixes.

Update

It's not a problem. Bootstrap 3 .row should be used inside .container or .container-fluid to counteract the negative fields in the string. This will eliminate the horizontal scroll bar.

From the documents ...

Lines should be placed in a container. (fixed width) or .container-fluid (full width) for proper alignment and filling.

Answer 4

If you understood correctly, adding this after any media queries override the default width limits. Works for me on bootstrap 3 where I need 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 in a container.

Answer 5

Update from 2014 from Bootstrap docs:

Full-width grids and layouts People who want to create completely fluid layouts (this means that your site stretches the entire width of the viewport) should wrap the contents of the grid in the containing element with the addition: 0 15px; to compensate for the marker : 0 -15px; used in .rows.

Answer 6

Just my 2 cents here. Basically it will work for you, as well as for me.

 body > .row { margin-left: 0px; margin-right: 0px; } 

Answer 7

I ran into the same problem (wanting a fluid layout), but wanted to save sensitive parameters with column permutation, etc. for smaller screens and eventually got a slight change in .less variables:

 // 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 more than 1200 pixels, the grid is a liquid (without horizontal scrollbars). Normal sensitive rules apply below. Of course, you can also install this on other media queries just as easily.

If you do not want to edit and compile yourself, you can override maxwidth in your own stylesheet below:

 @media (min-width: 1200px) { /* or min-width: wherever-you-want-your-fluid-breakpoint */ body .container { max-width: 100%; } } 

All of this assumes that you are using the standard Bootstrap grid syntax, including the container, as shown below:

 <div class="container"> <div class="row" > <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> 

Hope this helps!

Answer 8

The latest version of Twitter Bootstrap has a default layout by default, so you don't need extra classes to declare your layout as liquid.

You can also refer to

http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/

Answer 9

It worked for me. Tested in FF, Chrome, IE11, IE10

 .row { width:99.99%; } 

Answer 10

A horizontal scrollbar can be displayed if the container-fluid div is located directly inside the body .

The correct way to use the container-fluid structure is:

 <body> <section> <div class="container-fluid"> <div class="row"> <!-- content goes here --> </div> </div> </section> </body> 

So, try wrapping your container-fluid DIV files inside an external div, such as <div id="wrap"> or <section> or <article> or <aside> or another specialized <div> , and presto! no horizontal scrollbar.

Answer 11

In Bootstrap 3, placing the columns just below the body should give you a fluid layout without a horizontal scrollbar

 <body> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </body> 

Answer 12

The version of Bootstrap 3.0 is complex, they will add a fix for this problem and will probably return the container fluid to Bootstrap 3.1. But so far, here is the fix I am using:

First you need a custom container and set it to 100% width, and then you will need to fix the location of the line marker and navbar, if you have:

 /* 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 add container and container classes to the root div, and later you can use container fluid.

Hope this helps if you need more information let me know.

Answer 13

This workaround detected

 .row { margin-left: 0; margin-right: 0; } [class^="col-"] > [class^="col-"]:first-child, [class^="col-"] > [class*=" col-"]:first-child [class*=" col-"] > [class^="col-"]:first-child, [class*=" col-"]> [class*=" col-"]:first-child, .row > [class^="col-"]:first-child, .row > [class*=" col-"]:first-child{ padding-left: 0px; } [class^="col-"] > [class^="col-"]:last-child, [class^="col-"] > [class*=" col-"]:last-child [class*=" col-"] > [class^="col-"]:last-child, [class*=" col-"]> [class*=" col-"]:last-child, .row > [class^="col-"]:last-child, .row > [class*=" col-"]:last-child{ padding-right: 0px; } 

Answer 14

This is what worked for me. I added an inline style to remove a small margin on the right. I don't really like doing inline style, but this single style attribute in my html makes it easy for me to remember how to hack work related to my other well-separated code. It also fixes the problem of loading external styles before or after the default loading stylesheet.

 <div class="row" style="margin-right:0px;"> <div class="col-md-6"> <div class="col-md-6"> </div> 

Answer 15

Apply to the body seems to get rid of the horizontal scrollbar

 overflow-x: hidden; 

Answer 16

If this is still relevant for someone, my solution was as follows:

 .container{ overflow: hidden; overflow-y: auto; } 

Answer 17

By default, it is already fluid. If you want to be fluid for a smaller width instead of col-md-6 , use col-sm-6 or col-xs-6 .

Answer 18

You can fix this problem without breaking the css load and wait for the fix in the next version, so you can simply wrap your string by specifying your own .container-fluid class with filling.

 //Add this class to your global css file <style> .container-fluid { padding: 0 15px; } </style> //Wrap your rows in within this .container-fluid <div class="container-fluid"> <div class="row"> <div class="col-md-3">content</div> <div class="col-md-9">content</div> <div class="col-md-3">content</div> </div> </div> 

Answer 19

You can add 10px padding on the sides to your body element if all of its children are lines

 body { padding: 0 10px; } 

if your HTML markup looks something like this:

 <body> <div class="row"></div> <div class="row"></div> <div class="row"></div> </body> 

Lines have a negative margin of 10 px. This is what causes overflow. If you add a 10px addition to the body, they cancel each other out.

Answer 20

The only thing that helped me was to set margin:0px to the very top <div class="row"> in my html DOM.

This is again not the most attractive way to solve the problem, but since it is only in one place, I put it inline.

Like fyi, the container fluid and explicit bootstrap fixes introduced only extended spaces on both sides of the visible page ... :( Although I came across my solution by reading back and forth on the github issue - so worthy reading.

Answer 21

Summarizing the most relevant comments in one answer:

• This is a known bug.
• There are workarounds, but you may not need it (read on)
• this happens when elements are placed directly inside the body, and not inside the fluid container div or another containing div. Placing them directly in the body is exactly what most people do when testing the material locally. After you place your code on a full page (so inside a fluid container or another container div), you will not encounter this problem (no need to change anything).