I want to use a full width div, so added container-fluid class which leaves blank space on left and right. I solved it using negative margin left and right. But the problem is the negative margin afftects bootstrap responsive nature. When I resize the left side contents are hidden and there is a horizontal scrollbar on resizing.
<div class="container-fluid">
<div class="row" style="background-color:gainsboro">
<div class="col-md-10">
</div>
</div>
</div>
All I did in this scenario is apply the following styling and no padding or horizontal scrollbars, works on small devices too.
.container-fluid{
padding-left: 0rem;
padding-right: 0rem;
overflow: hidden;
}
The problem you're having with the padding is the result of the classes you are calling. Both the col-md series and container-fluid come out of the box with
padding-left: 15px;
padding-right: 15px;
For a padding of 30px on each side combined. The simplest way to fix your content being clipped is by creating your own class to include
.container-margin {
margin-left: -15px;
margin-right: -15px;
}
The row class with take care of -15px, and the above will take care of the rest. This way if you ever chose to use container-fluid again, you wouldn't get the same result for all of them.
Here is a fiddle with your code updated.
add overflow:hidden to your container.
You can use Bootstrap utilities class m-0 to remove unwanted margins.
<div class="container-fluid m-0">
<div class="row" style="background-color:gainsboro">
<div class="col-md-10">
</div>
</div>
</div>
Another way to mimic http://www.ichangemycity.com/about-us and using Bootstraps "content centered" layout.
JSFiddle here: https://jsfiddle.net/osserpse/9L3g1ezw/4/
Keep .container to make the text content to center on the view
Add a new class, my-full-widthto <div class="col-md-10 my-full-width> where you want the background to span full width. As far as I know it's not possible to change/add Bootstraps .rowor .col-* classes and retain control over their width and responsive behavior AND to create a background on full width of the viewport. (Side note: it's a best practice to scope custom classes in Bootstrap projects so is super simple to spot which classes are Bootstrap native and which are project specific; in my example I use .my-*
CSS:
.my-full-width::after {
content: "";
background-color: aliceblue;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
right: -100%;
left: -100%;
z-index: 0
}
// Add elements and classes here
h1, p {
position: relative;
z-index: 1; //to make elements to render above the background
}
Can anyone explain in detail what this statement about?
Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative
margin on .rows.
- http://getbootstrap.com/css/#grid-intro
I need to understand how the gutter calculation working.
Thanks you ^^
Basically, each column's gutter is defined by padding. So, consider the following example:
<div class="row">
<div class="col1"></div>
<div class="col1"></div>
<div class="col1"></div>
</div>
If I wanted a 20 pixels gutter on each column, I could define:
.col1 {
float: left;
width: 200px;
padding-left: 20px;
}
This works well, except my first column will also have a 20 pixel gutter, which I don't want. As a result, I could specify .col1:first-child, but it's much easier to define a negative left margin on the row, thus cancelling the first column's gutter measurement:
.row {
float: left;
margin-left: -20px;
}
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
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;
}
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".
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"
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.
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.
Just my 2 cents here. Mostly this will work for you, as it did for me.
body > .row {
margin-left: 0px;
margin-right: 0px;
}
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!
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/
This worked for me. Tested in FF, Chrome, IE11, IE10
.row {
width:99.99%;
}
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.
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>
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.
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;
}
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>
Apply to the body seems to get rid of the horizontal scrollbar
overflow-x: hidden;
If it still actual for someone, my solution was as follows:
.container{
overflow: hidden;
overflow-y: auto;
}
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.
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>
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.
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.
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).
I run in to this problem quite often, and it usually results in me spending additional time to try and address the problem. Essentially it is a straightforward layout as follows:
HTML:
<div id="container">
<div id="items">
<div class="item">
(data here)
</div>
<div class="item">
(data here)
</div>
<div class="item">
(data here)
</div>
<div class="item">
(data here)
</div>
-- repeats --
</div>
</div> <-- end container -->
CSS
#container {
margin: 0 auto;
width: 980px;
overflow: hidden;
}
#items {
float: left;
width: 980px;
min-height: 1000px;
}
#items .item {
float: left;
width: 230px;
height: 230px;
margin-right: 20px;
margin-bottom: 20px;
}
My intended result is to have a 4 x 4 grid displaying items. As you can see from my CSS above, I am adding a right margin to each item in order to space them out. The only problem with this is that the fourth item in each row drops down to the next row (which is obviously being caused due to the right margin on the item):
(230 x 4) = 920 + (20 x 4) = 80 = 1000 (but the container width is 980). So instead of 4 items on each row I get three.
If the right margin on every fourth item isn't included then all four items fit perfectly within the constraints of the parent DIV. I know I can just add a separate class for the fourth item and set it's right margin to 0px but this means I have to add additional checks in my scripting when displaying products dynamically.
Ideally what I would like is a pure CSS solution that works well in all major browsers AND IE7. Does anybody know of any?
You could try using percentages rather than fixed widths for your items.
#items .item {
float: left;
width: 23%;
height: 230px;
margin-right: 2%;
margin-bottom: 20px;
}
Fiddle: http://jsfiddle.net/kboucher/Mv7sh/
To target every fourth child of an element you can use :nth-child(x), but that is not supported in IE8 and earlier. w3schools doc
:last-child won't really do it because you would have to wrap every group of four.
However, depending on your design, a width and height of 225 instead of 230 would even out at 980 with the margins.
And unless you have a specific reason to only have margin-right, you could split it into margin-right and margin-left with a value of 10.
I have a 2 column layout. The left column has a width of 300px. I would like the right column to take up the full width of the remaining monitor space. But I just can't figure out how this mixture of px and % can be made to work? Anyone have any ideas?
I guess at worse I can use js to get the user's viewport width and add some inline styles dynamically but then I would have to perform that on every window resize, etc. So I would much rather have a pure css solution.
I would prefer thirtydot's answer:
Demo fiddle.
Minimum CSS requirement:
#sideBar {
width: 300px;
float: left;
}
#mainContent {
overflow: hidden;
}
One approach is to float the fixed width column over to the left and then use a margin to simulate your other column. Something like this:
<div id="sidebar">
<!-- ... -->
</div>
<div id="content">
<!-- ... -->
</div>
And some CSS:
#sidebar {
float: left;
width: 300px;
}
#content {
margin-left: 300px;
}
A <div> with its default display:block will naturally take up all the available width. The 300px left margin leaves an open space for the fixed width column.
Example: http://jsfiddle.net/ambiguous/wdsbu/
Here is a possible method for you: http://jsfiddle.net/mqchen/RDLMm/