I just started using Bootstrap 3. I am having a difficult time
understanding how the row class works.
Is there a way to avoid the padding-left and padding-right?
<div class="row" style="background:#000000">
<div class="col-xs-4 .col-xs-offset-1">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
</div>
http://jsfiddle.net/petran/rdRpx/
In all grid systems, there are gutters between each column. Bootstrap's system sets a 15px padding on both the left and the right of each column to create this gutter.
The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.
The .row div should never really be used to hold anything other than grid columns. If it is, you will see the content shifted relative to any columns, as is evident in your fiddle.
UPDATE:
You modified your question after I answered, so here is the answer to the question you are now asking: Add the .container class to the first <div>. See working example.
With bootstrap 3.3.7 this problem is solved wrapping the .row with .container-fluid.
See my reply below to similar post.
Why does the bootstrap .row has a default margin-left of -30px?
You basically use "clearfix" instead of "row". It does the exact same as "row" excluding the negative margin.
I used the row class inside the container class and still had the some problem. When I added margin-left: auto; margin-right: auto; to the .row class it worked fine.
#Michelle M. should receive full credit for this Answer.
She said in one of the Comments:
Adding the 'mx-auto' class in bootstrap 4 fixed the overflow issue for
me.
You would need to update your first div Element like so:
<div class="row mx-auto" style="background:#000000">
No need to do this for all Nested-Rows (if you have them).
Just add mx-auto to the most-outer row (or Rows) to avoid the Vertical-Scrollbar.
Do not Override the behavior of all Bootstrap Rows by adding a "row" class to replace the Margins.
For any future developers debugging this problem:
Bootstrap sets the padding for row columns, so none of the contents of a row should appear outside the container. If you're experiencing this and you are using bootstrap's grid system correctly using the col-... classes, it's likely that you have additional CSS somewhere resetting the padding on the columns.
Related
I've built a page using bootstrap 4. I've added a Carousel with 4 items.
You can see it here: Landing-Page with Bootstrap 4
And here is the Problem: when loading is finished, you'll have some space over the edge. I will say, that you can scroll to the right side and there is more space, that shouldn't.
What I've tried to fix it:
removing slide buttons
using other typs of the carousel
changing pictures/resizing them
commented out other elements like divs and navs, except the carousel
tried other browsers (firefox, chrome, safari)
I hope, it's not a bug.
Thanks for your help
The problem does not appear because of the margins of any row ( as suggested in your accepted answer ) but because some of the rows are not nested inside containers.
See here in the docs grid system bs4
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
And also here bs4 containers where it clearly states that Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
In short the padding of the containers counteract the negative margins of the rows that in turn counteract the paddings of the columns
SOLUTION
Any top-level row you have, you should wrap it inside a container, in your case you should use container-fluid
You can fix the problem by looking at the element #ausbildung (between container and jumbotron).
Its width is 30px bigger than it should!
Try to remove the margins on it.
<div id="ausbildung" class="row" style="height: 50px;"></div>
Bootstrap .row classes use negative margins to account for child elements that contain padding by default. Override the .row styling with
.row {
margin-left: 0px;
margin-right: 0px;
}
and the space and horizontal scrollbar should disappear. Bear in mind if you use .row elsewhere with Bootstrap col's that you may have to adjust your col's accordingly.
I just started using Bootstrap 3. I am having a difficult time
understanding how the row class works.
Is there a way to avoid the padding-left and padding-right?
<div class="row" style="background:#000000">
<div class="col-xs-4 .col-xs-offset-1">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
</div>
http://jsfiddle.net/petran/rdRpx/
In all grid systems, there are gutters between each column. Bootstrap's system sets a 15px padding on both the left and the right of each column to create this gutter.
The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.
The .row div should never really be used to hold anything other than grid columns. If it is, you will see the content shifted relative to any columns, as is evident in your fiddle.
UPDATE:
You modified your question after I answered, so here is the answer to the question you are now asking: Add the .container class to the first <div>. See working example.
With bootstrap 3.3.7 this problem is solved wrapping the .row with .container-fluid.
See my reply below to similar post.
Why does the bootstrap .row has a default margin-left of -30px?
You basically use "clearfix" instead of "row". It does the exact same as "row" excluding the negative margin.
I used the row class inside the container class and still had the some problem. When I added margin-left: auto; margin-right: auto; to the .row class it worked fine.
#Michelle M. should receive full credit for this Answer.
She said in one of the Comments:
Adding the 'mx-auto' class in bootstrap 4 fixed the overflow issue for
me.
You would need to update your first div Element like so:
<div class="row mx-auto" style="background:#000000">
No need to do this for all Nested-Rows (if you have them).
Just add mx-auto to the most-outer row (or Rows) to avoid the Vertical-Scrollbar.
Do not Override the behavior of all Bootstrap Rows by adding a "row" class to replace the Margins.
For any future developers debugging this problem:
Bootstrap sets the padding for row columns, so none of the contents of a row should appear outside the container. If you're experiencing this and you are using bootstrap's grid system correctly using the col-... classes, it's likely that you have additional CSS somewhere resetting the padding on the columns.
I'm trying to improve my project's HTML structure and I found something along these lines:
<div class="full-sidebar">
<div class="col-xs-12"></div>
</div>
Where "full-sidebar" is a custom class.
What I've been wondering is: is it a good idea to do so? Would I be better off in wrapping the column divs in a row? It just feels "wrong" done in the current way.
I know of at least one reason to use a row.
"cols-" are floated and wrapping them in a row adds a clear after all columns. This prevents subsequent content from potentially overlapping with your columns. Additionally, it also ensures the row's height is equivalent to the height of the column content. If you don't clear the columns' container, then the container will not include the column in its own height.
Note that "col-" is only floated at widths greater than 992px. So you'll only run into content overlap issues above that limit. See this fiddle.
HTML:
<div class="norow">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
CSS:
.row {
border: 2px solid yellow;
}
.norow {
border: 2px solid green;
}
.col-md-6 {
height: 50px;
border: 2px solid red;
}
Also, as others have mentioned, col padding and margins are designed to work in conjunction with row padding and margins.
You should always wrap <div class="col-xs-12"></div> inside <div class="row"></div>.
Reason-1
That's the bootstrap grid-system. We use bootstrap to make a layout clean and responsive. It doesn't create any harm if you do so.
Reason-2
If you don't wrap within <div class="row"></div> it will create unnecessary problem in near future once your layout grows long. You won't be able to keep a track of your layout.
so, in general it is good to wrap it inside <div class="row"></div>, if you don't have a solid reason for not doing it.
Hope this helps!
Actually it is not standard procedure to use bootstrap column classes outside the row. It might disturb the layout of the column design. In bootstrap css file each column class has assigned different width percentage according to their use. If you use column classes outside the row class it may form different or disturbed layout than actual layout prescribed by the bootstrap. So it is not a good practice to do.
Grid System Rules
Some Bootstrap grid system rules specified by w3Schools.com
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
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
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
Is using twitter bootstrap column classes outside rows a good idea?
No.
Bootstrap col-* should only be used within row. From the docs..
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
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.
Also see: Bootstrap Rows and Columns - Do I need to use row?
I have used the bootstrap framework to create a responsive site, however I have not used the bootstrap .container class.
For my project, all the content sits withing a div with a class of .wrapper. The wrapper is fluid and has a width of 80%, max with 1200px and min width 360px.
Within the wrapper I have used the standard .row and .col Boostrap classes.
I have tested the site and everything works as expected. The site validates and (even works on ie-9) and mobile devices.
Is it OK to use the above method without the .container class?
Many thanks,
p
There's no reason that you must use container elements. However, the .container-fluid class does almost exactly what you describe. I'd consider switching your custom wrapper to that for standardization and ease of maintenance.
Regarding your row margins--that's not a great idea. You may find yourself wanting to do a modern "flat" design where you'll want some of your rows stacked tightly. It's usually better to leave grid elements alone, and apply margins and padding to inner elements. You could put a class on the row to do so:
.row.padded > div div { /* > div should be a column */
margin: 1em 0;
}
<div class="container-fluid">
<div class="row padded">
<div class="col-xs-12">
<div> ... </div> <!-- this will have a margin -->
If you don't use rows, you are fine. Rows go to negative margins without container.
edit: Anyway, if you use bootstrap3, you should be fine even with rows...
Bootstrap is a big set of classes that are meant to be useful; however, by no means are you forced to use them. If you want something more customized than the default Bootstrap classes, then using your own class is totally fine.
I am trying to create a simple two column layout which has one big image followed by two columns, left one for image right one for text.
But I'm not able to align the image column with the top big image.
I can add a class with -15px margin but then there is misalignment in XS screen size.
I can add another -15px margin for xs screen also then I might have to fix something else. This is such a basic layout issue, I have a feeling I am doing something wrong.
Can you guys suggest what I am doing wrong and how should I approach two column layout in Bootstrap 3?
Here is the Bootply Link
The <div class="col-sm-12"> in the lower box causes the trouble. You have two options here:
Just delete the div
Add an additional <div class="row"> after the <div class="col-sm-12">
You were essentially creating a nested grid and bootstrap requires you to begin every new nesting level with a new <div class="row">
See: http://www.bootply.com/sh13QtYpFP
#bspellmeyer is correct. When nesting columns in Bootstrap, you need to add a row and then your nested columns.
HERE IS WHY
The grid works with 3 parts: a container, a row and column(s)...
The container has 15px of padding. The row negates the container padding with -15px of margin. Columns have 15px of padding, which pull the content away from the edges of the container and create a consistent 30px gutter.
The purpose for adding 15px of padding that is only negated by the negative row margins seems silly, but it is essential to allow for nesting columns inside of other columns! Note in the diagram below how the nested columns indicated by the red outline fits neatly into the enclosing column without getting additional padding applied.
I promise that once this sinks in, making the grid behave exactly how you want every time will be a breeze.
You need to add :
.custom-left {
padding: 0;
}
to your .custom-left class. Add the same to your .custom-right class if you want to align this div with the top image as well.
Updated Bootply: http://www.bootply.com/iQYEpYqXJZ