How to make bootstrap 3 fluid layout without horizontal scrollbar

Question

here is sample link: http://bootply.com/76369

this is html i use.

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

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

The scrollbar seems to be a side effect of bootply. When using cssdeck and my own website, no scrollbar appears. You can click on the 'monitor' icon, and see that in the popup there is no scrollbar. — , Aug 22 '13 at 23:48
http://www.andyjarrett.co.uk/blog/index.cfm/2013/8/2/Bootstrap-3-and-the-fluid-layout — Kevin Bowersox, Aug 22 '13 at 23:50
[Read the fine manual](http://getbootstrap.com/getting-started/#migration). — ta.speot.is, Aug 23 '13 at 01:46
the scrollbar is not effect of bootplay. it appears even on my localhost. and at the cssdeck there is no bootstrap 3 it has just bootstrap 2 — vee, Aug 23 '13 at 08:20

Cyril N. · Answer 1 · 2013-10-17T18:31:00.980

57

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;
}

edited Oct 17 '13 at 18:31

answered Aug 27 '13 at 09:31

Cyril N.

38,875
36
142
243

1

Or add the following to your container div (where .row is placed) like @davidpauljunior suggested: padding: 0 15px; margin-left: 0px; margin-right: 0px; – Jorre Dec 07 '13 at 15:46
Setting `.row` margin left and right to "0", will cause the edge of div blurry. So I better use `body { overflow-x: hidden; }` and adjust the `padding`. – Charlie Feb 27 '15 at 08:17

score 14 · Accepted Answer · answered Feb 13 '14 at 09:26

14

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".

answered Feb 13 '14 at 09:26

Martin

1,875
1
20
28

Carol Skelly · Answer 3 · 2018-04-29T11:59:06.973

11

~~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"

edited Apr 29 '18 at 11:59

answered Aug 23 '13 at 09:29

Carol Skelly

351,302
90
710
624

1

The issue was reopened. – Ra is dead Oct 04 '13 at 19:50
11

So until this is fixed, you just need to add your own `
` (or whatever name you want) and give it `margin-left: 15px; margin-right: 15px;` to cancel out the negative margin of the `row`.
– davidpauljunior Nov 21 '13 at 05:14
5

`padding: 0 15px;` is the guidance provided in the Bootstrap docs: http://getbootstrap.com/css/#grid-intro – Carol Skelly Nov 21 '13 at 11:04
The guidance provided in the docs doesn't work, but davidpauljunior's suggestion does! – Jorre Dec 07 '13 at 15:45

Beau · Answer 4 · 2013-08-29T03:38:12.423

8

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.

edited Aug 29 '13 at 03:38

answered Aug 29 '13 at 03:14

Beau

321
1
3
7

score 8 · Answer 5 · answered Jan 26 '14 at 06:00

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.

score 5 · Answer 6 · answered Oct 24 '13 at 06:14

5

Just my 2 cents here. Mostly this will work for you, as it did for me.

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

answered Oct 24 '13 at 06:14

M K

9,138
7
43
44

The margins are supplied to cancel out the padding given to .col-* classes. Adding this snippet puts the margins back. If you want to remove the margins yet again, you can add this: .container-full .row > * { padding: 0px; } – Ian Jennings Jan 30 '14 at 21:05

score 3 · Answer 7 · answered Oct 30 '13 at 15:12

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:

<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!

score 2 · Answer 8 · edited Aug 23 '13 at 01:19

2

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/

edited Aug 23 '13 at 01:19

Tchoupi

14,560
5
37
71

answered Aug 23 '13 at 01:17

TechnoBlahble

633
5
14

2

yes, i know it's already fluid but it has horzontal scrollbar that it is not right. – vee Aug 23 '13 at 08:16
Yes, horizontal scrollbar pops up. – Ata S. Oct 18 '13 at 23:00

score 2 · Answer 9 · answered Apr 28 '14 at 13:45

2

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

.row {
    width:99.99%;
}

answered Apr 28 '14 at 13:45

CodingYourLife

7,172
5
55
69

score 2 · Answer 10 · answered Feb 06 '16 at 02:18

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:

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

So, try wrapping your container-fluid DIVs inside an outer div, such as a <div id="wrap"> or a <section> or <article> or <aside> or other specialized <div>, and presto! no horizontal scrollbar.

score 1 · Answer 11 · answered Oct 23 '13 at 16:07

1

In Bootstrap 3, putting columns immediately under body should give you a fluid layout without horizontal scroll bar

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

answered Oct 23 '13 at 16:07

Bo.

580
5
17

score 1 · Answer 12 · answered Jan 07 '14 at 18:19

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.

score 1 · Answer 13 · answered Mar 27 '14 at 13:45

Found this workaround

.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;
}

score 1 · Answer 14 · answered Jan 15 '15 at 21:14

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.

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

score 1 · Answer 15 · edited Aug 12 '15 at 22:18

1

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

overflow-x: hidden;

edited Aug 12 '15 at 22:18

josliber

43,891
12
98
133

answered Aug 12 '15 at 21:27

dinglestein

11
1

score 1 · Answer 16 · answered Dec 08 '15 at 22:38

1

If it still actual for someone, my solution was as follows:

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

answered Dec 08 '15 at 22:38

JuZer

775
2
7
14

score 0 · Answer 17 · answered Aug 23 '13 at 01:38

0

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.

answered Aug 23 '13 at 01:38

Bart Calixto

19,210
11
78
114

yes, i know it's already fluid but it has horzontal scrollbar that it is not right. – vee Aug 23 '13 at 08:15
horizontal scrollers? something looks bad on your code. post a fiddle if you can and we will be able to help you. Are you putting your main code inside a container? – Bart Calixto Aug 23 '13 at 16:09
and what is bad? every thing is correctly as document describe. just paste that html to .html file with bootstrap 3 css included. it should show up full page grid layout. just that. – vee Aug 23 '13 at 18:28
i don't see the horizontal scroller. – Bart Calixto Aug 23 '13 at 22:34

score 0 · Answer 18 · answered May 09 '14 at 07:30

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
<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>

score 0 · Answer 19 · answered Jul 23 '14 at 08:59

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:

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

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.

score 0 · Answer 20 · answered Oct 19 '16 at 11:28

The only thing that assisted me was to set margin:0px on the topmost <div class="row"> 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.

score 0 · Answer 21 · answered Jan 10 '17 at 01:46

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).

How to make bootstrap 3 fluid layout without horizontal scrollbar

21 Answers21

Linked

Related