How to make bootstrap 3 fluid layout without horizontal scrollbar

HtmlTwitter BootstrapTwitter Bootstrap-3

Html Problem Overview

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

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

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

Solution 3 - Html

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

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"

Solution 4 - Html

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.

Solution 5 - Html

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.

Solution 6 - Html

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

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

Solution 7 - Html

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!

Solution 8 - Html

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/

Solution 9 - Html

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

.row {
    width:99.99%;
}

Solution 10 - Html

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.

Solution 11 - Html

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>

Solution 12 - Html

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.

Solution 13 - Html

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

Solution 14 - Html

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>

Solution 15 - Html

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

overflow-x: hidden;

Solution 16 - Html

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

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

Solution 17 - Html

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.

Solution 18 - Html

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>

Solution 19 - Html

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.

Solution 20 - Html

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.

Solution 21 - Html

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).
Categories
Recommended Html Solutions
Recommended Twitter Bootstrap Solutions
Recommended Twitter Bootstrap-3 Solutions

Previous Solution:

How to get the npm global path prefix

node.jsNpm

Next Solution:

Correct set of dependencies for using Jackson mapper

JavaJsonJackson

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionveeView Question on Stackoverflow
Solution 1 - HtmlCyril N.View Answer on Stackoverflow
Solution 2 - HtmlMartinView Answer on Stackoverflow
Solution 3 - HtmlZimView Answer on Stackoverflow
Solution 4 - HtmlBeauView Answer on Stackoverflow
Solution 5 - HtmlTamik SozievView Answer on Stackoverflow
Solution 6 - HtmlM KView Answer on Stackoverflow
Solution 7 - HtmlVictorView Answer on Stackoverflow
Solution 8 - HtmlTechnoBlahbleView Answer on Stackoverflow
Solution 9 - HtmlCodingYourLifeView Answer on Stackoverflow
Solution 10 - HtmlcssyphusView Answer on Stackoverflow
Solution 11 - HtmlBo.View Answer on Stackoverflow
Solution 12 - HtmlBojanView Answer on Stackoverflow
Solution 13 - HtmlYavanostaView Answer on Stackoverflow
Solution 14 - HtmlShadeTreeDeveloperView Answer on Stackoverflow
Solution 15 - HtmldinglesteinView Answer on Stackoverflow
Solution 16 - HtmlJuZerView Answer on Stackoverflow
Solution 17 - HtmlBart CalixtoView Answer on Stackoverflow
Solution 18 - HtmlSudharshanView Answer on Stackoverflow
Solution 19 - HtmlMladen DanicView Answer on Stackoverflow
Solution 20 - HtmlDavidView Answer on Stackoverflow
Solution 21 - HtmlRedomanView Answer on Stackoverflow