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.
Related
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
margin collapse is disbled in the following case:
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
what does it mean?can u give me some concrete examples?
This ensures that a clear prevents any following elements from overlapping the floats.
Let's start with floats and clear for now. Floats can overflow their parent:
<div style='border:1px solid green;'>
<div style='float:left;background:red;height:100px;width:40px;'></div>
That red box overflows!
</div>
If we add a clearing div, it never will. A clear is like saying nothing else can flow above this line:
<div style='border:1px solid green;'>
<div style='float:left;background:red;height:100px;width:40px;'></div>
<div style='clear:both;'></div>
<!-- Anything down here will not overlap the floats -->
</div>
However, margin collapsing breaks things a little, because following elements can collapse 'through' something, going all the way up to the very top of the top margin. Let's have a quick excursion into certain aspects of margin collapsing.
Self collapsing hacks
In general, margin collapsing applies to any top margin which is directly touching any bottom margin.
That includes an elements own top/bottom margins too. This is called self-collapsing, and margin collapsing happens repeatedly. Here's a quick example of both of these things together:
<div style='margin-top:30px; margin-bottom:30px;'></div>
<div style='margin-top:30px; border:1px solid black;'>
The gap above me is only 30px, not 90!
</div>
That first div entirely self-collapses, resulting in a computed space of 30px, then the second div collapses into that too, keeping the space at just 30px.
Ok, so we've now got a rough idea of what self-collapsing is. Now let's start trying to abuse that with a self-collapsing clearing div:
<div style='border:1px solid green;'>
<div style='float:left;background:red;height:100px;width:40px;'></div>
<div style='clear:left;margin-top:90px;margin-bottom:90px;'></div>
I'm after the clear and look, no 90px gap!
</div>
The margin is still there though. It actually runs 90px upwards over the floats.
Next, imagine there was no text after it, and the parent had a bottom margin. By our margin collapsing rules, it should collapse upwards. Sibling elements might even collapse 'through' it, all the way up to the top. We don't want that, because it would cause some unwanted overlapping.
This part of the specification blocks this behaviour. Let's break the spec's language down to make that clearer:
If the top and bottom margins of an element with clearance are adjoining
This is describing a self-collapsing element which has cleared a float.
its margins collapse with the adjoining margins of following siblings
It's fine for other margins to collapse into it, but..
That resulting margin does not collapse with the bottom margin of the parent block.
..the very bottom margin must not collapse upwards, because that would result in our awkward overlapping case.
Here's an example of the case where the rule is applied:
<div style='border:1px solid green;'>
<!-- A parent block with a bottom margin, and no border -->
<div style='margin-bottom:50px;'>
<div style='float:left;background:red;height:100px;width:40px;'></div>
<!-- A self collapsing cleared div -->
<div style='clear:left;margin-top:50px;margin-bottom:50px;'></div>
<!-- The parents bottom margin is adjacent to our collapsed margin,
but it gets blocked from collapsing upwards. We see a gap here -->
</div>
</div>
Adding some text into that clearing div makes it no longer self collapse, but its bottom margin then safely collapses with the bottom margin of the parent instead.
I have a scrolling content div, whose content I want to give some margin-left as well as from right. It is taking margin-left, but not taking margin right. I set margin in %.
<ion-scroll scrollbar-y="true" delegate-handle="invoicegrid" ng-style="viewHeight">
<div style="margin-left:5%; margin-right:5%" class="row brd"" ng-repeat="column in invoice_records track by $index" ng-class-odd="" ng-class="{white:$index%2 == 0,blue:$index%2 == 1}">
<div class="col brdlrdt collapse-sm" ng-repeat="field in column.columns" ng-show="invoice_column_name[$index].checked && invoice_column_name[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
<div class="col col-10 text-center brdlrdt collapse-sm"></div>
</div>
</ion-scroll>
Plunkr example.
How can I get it to detect my margin-right setting?
The css in ionic.css sets elements with the class "row" to a width of 100%. When you add margins, the width of your row becomes 100% + 5% + 5%, and the row is wider than its container.
There are several ways to fix this.
You can remove width: 100%
You can add padding to the parent div (instead of margins on the rows)
Changing the position type
If someone still have this problem with Ionic, the solution for me was to not put my content inside the div with class="row".
Is there any way to get a display:table cell, to keep its padding of its parent div?
If I have a bootstrap div like so:
<div class="col-sm-5 defaultRowHeight" id="row1">
<div style="display: table">
<div class="tableCellMiddle">
The padding rule from col-sm-5 that comes from bootstrap is ignored. I want to use table cell so I can easily v-align.
here is a fiddle
http://jsfiddle.net/w79w8f6a/
The 1st 2 boxes work as I expect but they dont in my real world example at my closed source.
the bottom 2 boxes lose all their padding or margin but that doesnt mimic my issue in my real source.
any ideas?
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>