Bootstrap rows has a margin (left and right) of -15px.
As far as I know this is mainly by two reasons:
The .container has a padding (left and right) of 15px
The col-* have a gutter of 15px.
So in order to avoid the blank space created by the gutter on the first column (on its left side) and the space created by the gutter on the last column (on its right side) the row has a margin (left and right) of -15px.
I'm just wondering, why not to remove the padding of the container and just set the padding/margin of a row to 0?
It will produce the same effect, the first column will have 15px of distance to the .container, and the same for the last column.
What I'm missing?
I've checked: Negative left and right margin of .row class in Bootstrap and Bootstrap's .row margin-left: -15px - why is it outdented (from the docs) but I don't see any reason to use negative margins instead of 0 padding.
It's because the containers are meant to be used to contain any content, not just the grid rows and columns. Without padding on the container, content is forced up against the edge of the layout and doesn't align with the other content...
<div class="container px-0">
<p>This content is aligned with the outer left edge and doesn't align with grid content.</p>
<div class="row m-0">
<div class="col-sm-4">
grid content
</div>
<div class="col-sm-4">
grid content
</div>
<div class="col-sm-4">
grid content
</div>
</div>
</div>
https://codeply.com/go/23PqWB19ol
You can see several examples of container used for other than grid content the Bootstrap examples
Negative margins also work better for Responsive Design. Many people ask "why not just adjust the padding on the first and last columns?". This demo shows why
Related: Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?
Here is your simple and easy answer
Go to your class where you want to give a negative margin and use this method.
Example for margin top
mt-n3
Example for margin bottom
mb-n2
If removing the minus margin from the row than one should practice to remove the column padding becuase row minus margin is to handle the padding of the same amount in the column.
To remove minus margin recommeded way is to use no-gutters class or g-0 class as per the version of bootstrap.
Upto Bootstrap Version 4.6 Use
<div class="row no-gutters">
Bootstrap Version 5.1 Onwards Use
<div class="row g-0">
Bootstrap negative margin on rows is very easy
Go to your Bootstrap class and concat 'n' with the margin number
For Example
mt-2 //should change to mt-n3
Related
I have a simple flex div set to a column like this:
<div fxFlex="column">
<div>
test
</div>
<div>
test 2
</div>
</div>
When the alignment is like this, there is top and bottom padding added to each div. When I set fxFlex="row" then it gets rid of the padding. I want each div to not have any padding in column direction.
I am using the bootstrap 4 padding feature. By default, col or col-12 classes in bootstrap4 applies 15px padding on left and right. I want to set the left and right padding 0 for mobile devices, so I use the following code
<div class="col col-12 p-0"></div>
As Bootstrap-4 is mobile-first, I assumed, p-0 will only be applied to extra small screens, but unfortunately, this p-0 seems to be applied to all screen sizing for me. Is there a way I can only use p-0 for extra small mobile devices or sm device. For mobile desktop, default padding of 15px on left and right should be applied.
Thanks.
The way the bootstrap grid works is if you put a .col inside a .row, the row has negative left and right margin that absorbs the column's margin.
But if you still want to have 0 padding on small screens and some padding on medium, you can do this:
<div class="col-12 px-0 px-md-3"></div>
The "x" means just left and right padding, because columns only have padding on the left and right. The "3" by default gets you 1rem, which is 16px, the closest to 15px.
This question already has answers here:
Bootstrap row and col explanation
(4 answers)
Closed 1 year ago.
According to Bootstrap's documentation
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width)
and
Use rows to create horizontal groups of columns.
Why is this necessary?
A .row can only occupy the maximum width of either .container or .container-fluid
Given that you have to close the .row it seems longer to write:
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Column A</h1>
</div>
<div class="col-md-6">
<h1>Column B</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h1>Column C</h1>
</div>
<div class="col-md-6">
<h1>Column D</h1>
</div>
</div>
</div>
Than this:
<div class="container">
<div class="col-md-6">
<h1>Column A</h1>
</div>
<div class="col-md-6">
<h1>Column B</h1>
</div>
</div>
<div class="container">
<div class="col-md-6">
<h1>Column C</h1>
</div>
<div class="col-md-6">
<h1>Column D</h1>
</div>
</div>
Container
The container provide the width constraints on responsive widths. When the responsive sizes change, it’s the container that changes. Rows and columns are all percentage based so they don’t need to change.
Note that there is a 15px margin on each side, canceled by rows.
Rows
Rows should always be in a container.
The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.
Rows also have a 15px negative margin on each side. The div that makes up the row would normally be constrained inside of the container's padding, touching the edges of the pink area but not beyond. The 15px negative margins push the row out over top of the containers 15px padding, essentially negating it. Furthermore, rows ensure you that all of the divs inside of it appear on their own line, separated from the previous and the following rows.
Columns
The columns now have 15px padding. This padding means that the columns actually touch the edge of the row, which itself touches the edge of the container since the row has the negative margin, and the container has the positive padding. But, the padding on the column pushes anything inside the column in to where it needs to be, and also provides the 30px gutter between columns. Never use a column outside of a row, it won’t work.
For more information, I suggest you to read this article. It is really clear, and explain well how Bootstrap's grid system works.
The .row elements have a negative margin on both sides. All the columns have a padding taking care of the spacing, even the first and the last one (which is something we don't want) so the .row pulls them back to fix that. Also, I think it makes more sense to have more rows in a container, instead of columns.
Is it necessary to add a .row in the .container-fluid block?
On bootstrap website, it say:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
I have been doing like this without .row and it work fine:
<div class="container-fluid container-fixed-lg ">
<div class="panel">
<div class="panel-body">
<table>
......
</table>
</div>
</div>
</div>
If you look at a row class in BootStrap CSS, you'll notice there's -15px of margin on both the left and right. This is to compensate for the 15px of padding a container provides. This is important if you're nesting columns within your row as the columns themselves have 15px of padding (called a "gutter" in many cases).
As BootStrap say:
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.
In other words, you should use a row if you're nesting columns, if not then there's not an absolutely essential need for them...
Your code is ok, no need to put useless div with class row if you don't use the bootstrap grid system. And obviously you aren't here.
You should check out what .row does. In bootstrap it removes the margin from the left and right side of the div (gutter). With that knowlegde you can make out if you need to use it or not. :)
I used .row many times within the .container fluid block.
I'm working on a self contained responsive css component (type of carousel) for a website i am implementing.
The need is to have an infinit number of content items (loaded from a server), showing exactly two at a time. As the user advances through the list of items, they appear to scroll to the left with new items transitioning in from the right pushing the current items to the left.
the items should get their width according to the current responsive layout.
The general idea is to have viewport which is a part of the page layout and can accept any width stated in px or in %, a container which gets width: 100% so that it fill the size of the viewport. and items which are arranged horizontally side by side without wrapping, the items get a width of 50% so exactly two items fit into the container/viewport and the rest of the items overflow (and are hidden.)
<div class="viewport">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<!-- more items get loaded as the user advances through the content -->
</div>
</div>
"scrolling" is achieved by setting a negative margin on the first item - which this technique i can always set a negative margin which is: <number of items> * 50%
I got this mostly working in the following jsfiddle: http://jsfiddle.net/gZBEV/5/
The items are arranged correctly and they get their width according to the width of the surrounding viewport. (use the buttons to emulate moving/scrolling through the items)
The problem is a horizontal gap (shown by the arrow) which appears between each item which screws up the layout.
The solution to this would be to find a way were the items have no horizontal gap between them like so:
Use this fiddle http://jsfiddle.net/gZBEV/5/ as a starting point.
It's because the elements are display:inline-block. Inline block level elements respect line-height and font-size and whitespace. change the font-size of the parent to 0px and the gaps disappear. This means you will have to reassign the font size after the fact (Great for image only sliders. Not so much for content sliders).
http://jsfiddle.net/RAbSU/
.container {
...
display: inline-block;
font-size: 0px;
& > * {
font-size: 12px;
}
...
EDIT: otherwise, you could just change the format to display:block with float:left.
If you remove the carriage returns inside the div, this will remove the space:
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>