Twitter Bootstrap: margin-bottom built in css class - css

Is there built in margin bottom class to use?
I tried with bottom5 like
<div class="col-lg-2 bottom5"></div>
but this doesn't work.

Boostrap 4 has a spacing feature that solves that problem https://getbootstrap.com/docs/4.0/utilities/spacing/
But, in you are sticked to older bootstrap version or can't use it a all and in case you need a complete list of margin and padding classes, here it is
/* MARGINS & PADDINGS */
.p-xxs {
padding: 5px !important;
}
.p-xs {
padding: 10px !important;
}
.p-sm {
padding: 15px !important;
}
.p-m {
padding: 20px !important;
}
.p-md {
padding: 25px !important;
}
.p-lg {
padding: 30px !important;
}
.p-xl {
padding: 40px !important;
}
.m-xxs {
margin: 2px 4px;
}
.m-xs {
margin: 5px;
}
.m-sm {
margin: 10px;
}
.m {
margin: 15px;
}
.m-md {
margin: 20px;
}
.m-lg {
margin: 30px;
}
.m-xl {
margin: 50px;
}
.m-n {
margin: 0 !important;
}
.m-l-none {
margin-left: 0;
}
.m-l-xs {
margin-left: 5px;
}
.m-l-sm {
margin-left: 10px;
}
.m-l {
margin-left: 15px;
}
.m-l-md {
margin-left: 20px;
}
.m-l-lg {
margin-left: 30px;
}
.m-l-xl {
margin-left: 40px;
}
.m-l-n-xxs {
margin-left: -1px;
}
.m-l-n-xs {
margin-left: -5px;
}
.m-l-n-sm {
margin-left: -10px;
}
.m-l-n {
margin-left: -15px;
}
.m-l-n-md {
margin-left: -20px;
}
.m-l-n-lg {
margin-left: -30px;
}
.m-l-n-xl {
margin-left: -40px;
}
.m-t-none {
margin-top: 0;
}
.m-t-xxs {
margin-top: 1px;
}
.m-t-xs {
margin-top: 5px;
}
.m-t-sm {
margin-top: 10px;
}
.m-t {
margin-top: 15px;
}
.m-t-md {
margin-top: 20px;
}
.m-t-lg {
margin-top: 30px;
}
.m-t-xl {
margin-top: 40px;
}
.m-t-xxl {
margin-top: 50px;
}
.m-t-xxxl {
margin-top: 60px;
}
.m-t-n-xxs {
margin-top: -1px;
}
.m-t-n-xs {
margin-top: -5px;
}
.m-t-n-sm {
margin-top: -10px;
}
.m-t-n {
margin-top: -15px;
}
.m-t-n-md {
margin-top: -20px;
}
.m-t-n-lg {
margin-top: -30px;
}
.m-t-n-xl {
margin-top: -40px;
}
.m-r-none {
margin-right: 0;
}
.m-r-xxs {
margin-right: 1px;
}
.m-r-xs {
margin-right: 5px;
}
.m-r-sm {
margin-right: 10px;
}
.m-r {
margin-right: 15px;
}
.m-r-md {
margin-right: 20px;
}
.m-r-lg {
margin-right: 30px;
}
.m-r-xl {
margin-right: 40px;
}
.m-r-n-xxs {
margin-right: -1px;
}
.m-r-n-xs {
margin-right: -5px;
}
.m-r-n-sm {
margin-right: -10px;
}
.m-r-n {
margin-right: -15px;
}
.m-r-n-md {
margin-right: -20px;
}
.m-r-n-lg {
margin-right: -30px;
}
.m-r-n-xl {
margin-right: -40px;
}
.m-b-none {
margin-bottom: 0;
}
.m-b-xxs {
margin-bottom: 1px;
}
.m-b-xs {
margin-bottom: 5px;
}
.m-b-sm {
margin-bottom: 10px;
}
.m-b {
margin-bottom: 15px;
}
.m-b-md {
margin-bottom: 20px;
}
.m-b-lg {
margin-bottom: 30px;
}
.m-b-xl {
margin-bottom: 40px;
}
.m-b-n-xxs {
margin-bottom: -1px;
}
.m-b-n-xs {
margin-bottom: -5px;
}
.m-b-n-sm {
margin-bottom: -10px;
}
.m-b-n {
margin-bottom: -15px;
}
.m-b-n-md {
margin-bottom: -20px;
}
.m-b-n-lg {
margin-bottom: -30px;
}
.m-b-n-xl {
margin-bottom: -40px;
}
.space-15 {
margin: 15px 0;
}
.space-20 {
margin: 20px 0;
}
.space-25 {
margin: 25px 0;
}
.space-30 {
margin: 30px 0;
}
It's taken from Homer Responsive Admin Theme by WebAppLayers. I guess author don't mind sharing that. It probably will save 20min of time of some Web Developer out there.

Now available in bootstrap 4
Example-
<div class="mb-5 p-5">
margin-bottom and padding with size 5
</div>
You can use-
m for margin
p for padding
And for sides:
t - top
b - bottom
l - left
r - right
x - both left & right
y - both top & bottom
blank -all sides
For size- 0,1,2,3,4,5

There is no bootstrap class for margins like you describe. The reasons would be the need for classes for margins 0 to 10s or 100s, as well as the need for multiple units, such as px, em, %, etc.
You can make your own classes fairly easy. Even easier with sublime text-editor and multi-select.
That being said, you don't want to abstract every style rule into the html. Original CSS is useful for something particular to your element, such as margins. Using bootstrap classes for every style would lead to difficult to read HTML.
This Question is tagged Bootstrap 3, but when you update to Bootstrap 4, there is a built in utility for this.

Try adding the class, named
margin-bottom-5
The classes are named using the format: {property}-{sides}-{size}
from: here

UPDATE : Bootstrap 4 Classes
Bootstrap 4 classes to add margin and padding
Bootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):
The classes are used in the format: {property}{sides}-{size}
for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Where property is one of:
m - sets margin
p - sets padding
Where sides is one of:
t - sets margin-top or padding-top
b - sets margin-bottom or padding-bottom
l - sets margin-left or padding-left
r - sets margin-right or padding-right
x - sets both padding-left and padding-right or margin-left and margin-right(X-axis)
y - sets both padding-top and padding-bottom or margin-top and margin-bottom(Y-axis)
blank - sets a margin or padding on all 4 sides of the element
Where size is one of:
0 - sets margin or padding to 0
1 - sets margin or padding to .25rem (4px if font-size is 16px)
2 - sets margin or padding to .5rem (8px if font-size is 16px)
3 - sets margin or padding to 1rem (16px if font-size is 16px)
4 - sets margin or padding to 1.5rem (24px if font-size is 16px)
5 - sets margin or padding to 3rem (48px if font-size is 16px)
auto - sets margin to auto
Reference Links : https://getbootstrap.com/docs/4.0/utilities/spacing/
HOW TO USE
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>

If you want to add margin bottom you can add from mb-0 to mb-5.
See :https://getbootstrap.com/docs/4.4/utilities/spacing/

Related

Selector is exceeding selector-max-specificity

Here's the CSS that I have:
.tab {
border: 0;
flex: 1 1 0;
min-height: 48px;
opacity: 1;
text-align: center;
z-index: 0;
}
.tab:not([data-selected]) {
border-radius: 0;
}
.tab[data-selected] {
background-color: $white;
border: 1px solid #eee;
z-index: 2;
}
.tab[data-selected]:first-of-type {
margin-right: -8px;
}
.tab[data-selected]:last-of-type {
margin-left: -8px;
}
.tab[data-selected]:not(:first-of-type):not(:last-of-type) {
margin-left: -8px;
margin-right: -8px;
}
.tab:first-of-type {
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
}
.tab:last-of-type {
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
Having problem with this bit here:
.tab[data-selected]:not(:first-of-type):not(:last-of-type) {
margin-left: -8px;
margin-right: -8px;
}
I'm trying to select the middle child when it is selected. My stylelint is complaining like so:
Expected "`.tab[data-selected]:not(:first-of-type):not(:last-of-type)`" to have a specificity no more than "0,3,2"
How do I approach this in a better way?
The total specificity of your selector
.tab[data-selected]:not(:first-of-type):not(:last-of-type)
is (0,4,0), which is 1 over the limit of (0,3,2).
You can increase selector-max-specificity to accommodate this selector since the difference is so small.
Or if you'd rather not do that, you can refactor your &[data-selected] CSS rules like this. Apply both negative margins by default, then selectively remove the negative margins from &:first-of-type and &:last-of-type, thereby eliminating the need for the double negation:
&[data-selected] {
background-color: $white;
margin-left: -8px;
margin-right: -8px;
border: 1px solid #eee;
z-index: 2;
&:first-of-type {
margin-left: 0; /* Preserve negative margin-right */
}
&:last-of-type {
margin-right: 0; /* Preserve negative margin-left */
}
}
Note that the margin directions are swapped in the two nested rules since we're trying to preserve the now-existing negative margins instead of adding them where they weren't there before.

How do I change the spacing (between lines/paragraphs) in my mobile footer - css? Code below is from responsive.css wordpress

How do I change the spacing (between lines/paragraphs) in my mobile footer - css? Code below is from responsive.css wordpress
this is from the responsive.css part of my wordpress
I want the spacing to be closer than what it is currently - you can check it by visiting www.hotdatajobs.digitalya.ro
/* new changes footer */
#media ( max-width: 640px ) {
.col-xs-12.p-t-20.padding-l-r-10 span {
font-size: 18px;
}
.site-footer {
padding-top: 40px;
}
.footerRow .col-md-15.col-sm-15.col-xs-12 .title-block {
margin-bottom: 10px;
}
.m-h-f {
min-height: 295px;
}
.m-h-l {
min-height: 170px;
}
}
#media ( max-width: 440px ) {
.m-h-f,
.m-h-l {
min-height: 100px;
margin-bottom: 20px;
}
.m-h-f {
min-height: 230px;
}
.p-l-f {
width: 150px!important;
}
.site-footer .footerRow .footer-social-item {
font-size: 16px;
}
.site-footer .footerRow a {
font-size: 14px;
}
.col-xs-12.p-t-20.padding-l-r-10 span,
.site-footer .title-block {
font-size: 16px;
}
}
#media ( max-width: 374px ) {
.m-h-f,
.m-h-l {
min-height: 100px;
margin-bottom: 20px;
}
.m-h-f {
min-height: 225px;
}
.p-l-f {
width: 110px!important;
}
.footerRow .col-xs-12 {
padding: 0;
}
.site-footer .footerRow .footer-social-item {
font-size: 14px;
}
.site-footer .footerRow a {
font-size: 12px;
}
.col-xs-12.p-t-20.padding-l-r-10 span,
.site-footer .title-block {
font-size: 14px;
}
}
/* end general */
You can control spacing between lines of texts with the line-height property.
For example, 16px font-size and 4px distant from the bottom and upper lines:
line-height: 24px; /* 4px +16px + 4px */
Or with em units
line-height: 2em; /* 1em = 12px in this case. 24/12 == 2 */
So..
.site-footer .footerRow .footer-social-item {
font-size: 16px;
line-height: 24px;
}
Of course, increasing of decreasing the line-height depending on how much spacing you want. Anything below 16px will cut off your text because you are using 16px text so keep that in mind.
Also keep in mind that when the width of that div gets greater than 440px the line-height value will not apply.

Does bootstrap have builtin padding and margin classes?

Does Bootstrap have built-in padding and margin classes like pad-10, mar-left-10 or I have to add my own custom classes? For example, similar to the ones here at padding and margin tabs.
There are built in classes, namely:
.padding-xs { padding: .25em; }
.padding-sm { padding: .5em; }
.padding-md { padding: 1em; }
.padding-lg { padding: 1.5em; }
.padding-xl { padding: 3em; }
.padding-x-xs { padding: .25em 0; }
.padding-x-sm { padding: .5em 0; }
.padding-x-md { padding: 1em 0; }
.padding-x-lg { padding: 1.5em 0; }
.padding-x-xl { padding: 3em 0; }
.padding-y-xs { padding: 0 .25em; }
.padding-y-sm { padding: 0 .5em; }
.padding-y-md { padding: 0 1em; }
.padding-y-lg { padding: 0 1.5em; }
.padding-y-xl { padding: 0 3em; }
.padding-top-xs { padding-top: .25em; }
.padding-top-sm { padding-top: .5em; }
.padding-top-md { padding-top: 1em; }
.padding-top-lg { padding-top: 1.5em; }
.padding-top-xl { padding-top: 3em; }
.padding-right-xs { padding-right: .25em; }
.padding-right-sm { padding-right: .5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }
.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }
.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }
.margin-xs { margin: .25em; }
.margin-sm { margin: .5em; }
.margin-md { margin: 1em; }
.margin-lg { margin: 1.5em; }
.margin-xl { margin: 3em; }
.margin-x-xs { margin: .25em 0; }
.margin-x-sm { margin: .5em 0; }
.margin-x-md { margin: 1em 0; }
.margin-x-lg { margin: 1.5em 0; }
.margin-x-xl { margin: 3em 0; }
.margin-y-xs { margin: 0 .25em; }
.margin-y-sm { margin: 0 .5em; }
.margin-y-md { margin: 0 1em; }
.margin-y-lg { margin: 0 1.5em; }
.margin-y-xl { margin: 0 3em; }
.margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl { margin-top: 3em; }
.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md { margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl { margin-right: 3em; }
.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }
.margin-left-xs { margin-left: .25em; }
.margin-left-sm { margin-left: .5em; }
.margin-left-md { margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl { margin-left: 3em; }
Bootstrap has many facility of classes to easily style elements if HTML. It includes a various of padding and margin classes for modification of the appearance of the element.
.m-0 { margin:0!important; }
.m-1 { margin:.25rem!important; }
.m-2 { margin:.5rem!important; }
.m-3 { margin:1rem!important; }
.m-4 { margin:1.5rem!important; }
.m-5 { margin:3rem!important; }
.mt-0 { margin-top:0!important; }
.mr-0 { margin-right:0!important; }
.mb-0 { margin-bottom:0!important; }
.ml-0 { margin-left:0!important; }
.mx-0 { margin-left:0 !important;margin-right:0 !important; }
.my-0 { margin-top:0!important;margin-bottom:0!important; }
.mt-1 { margin-top:.25rem!important; }
.mr-1 { margin-right:.25rem!important; }
.mb-1 { margin-bottom:.25rem!important; }
.ml-1 { margin-left:.25rem!important; }
.mx-1 { margin-left:.25rem!important;margin-right:.25rem!important; }
.my-1 { margin-top:.25rem!important;margin-bottom:.25rem!important; }
.mt-2 { margin-top:.5rem!important; }
.mr-2 { margin-right:.5rem!important; }
.mb-2 { margin-bottom:.5rem!important; }
.ml-2 { margin-left:.5rem!important; }
.mx-2 { margin-right:.5rem!important;margin-left:.5rem!important; }
.my-2 { margin-top:.5rem!important;margin-bottom:.5rem!important; }
.mt-3 { margin-top:1rem!important; }
.mr-3 { margin-right:1rem!important; }
.mb-3 { margin-bottom:1rem!important; }
.ml-3 { margin-left:1rem!important; }
.mx-3 { margin-right:1rem!important;margin-left:1rem!important; }
.my-3 { margin-bottom:1rem!important;margin-top:1rem!important; }
.mt-4 { margin-top:1.5rem!important; }
.mr-4 { margin-right:1.5rem!important; }
.mb-4 { margin-bottom:1.5rem!important; }
.ml-4 { margin-left:1.5rem!important; }
.mx-4 { margin-right:1.5rem!important;margin-left:1.5rem!important; }
.my-4 { margin-top:1.5rem!important;margin-bottom:1.5rem!important; }
.mt-5 { margin-top:3rem!important; }
.mr-5 { margin-right:3rem!important; }
.mb-5 { margin-bottom:3rem!important; }
.ml-5 { margin-left:3rem!important; }
.mx-5 { margin-right:3rem!important;margin-left:3rem!important; }
.my-5 { margin-top:3rem!important;margin-bottom:3rem!important; }
.mt-auto { margin-top:auto!important; }
.mr-auto { margin-right:auto!important; }
.mb-auto { margin-bottom:auto!important; }
.ml-auto { margin-left:auto!important; }
.mx-auto { margin-right:auto!important;margin-left:auto!important; }
.my-auto { margin-bottom:auto!important;margin-top:auto!important; }
.p-0 { padding:0!important; }
.p-1 { padding:.25rem!important; }
.p-2 { padding:.5rem!important; }
.p-3 { padding:1rem!important; }
.p-4 { padding:1.5rem!important; }
.p-5 { padding:3rem!important; }
.pt-0 { padding-top:0!important; }
.pr-0 { padding-right:0!important; }
.pb-0 { padding-bottom:0!important; }
.pl-0 { padding-left:0!important; }
.px-0 { padding-left:0!important;padding-right:0!important; }
.py-0 { padding-top:0!important;padding-bottom:0!important; }
.pt-1 { padding-top:.25rem!important; }
.pr-1 { padding-right:.25rem!important; }
.pb-1 { padding-bottom:.25rem!important; }
.pl-1 { padding-left:.25rem!important; }
.px-1 { padding-left:.25rem!important;padding-right:.25rem!important; }
.py-1 { padding-top:.25rem!important;padding-bottom:.25rem!important; }
.pt-2 { padding-top:.5rem!important; }
.pr-2 { padding-right:.5rem!important; }
.pb-2 { padding-bottom:.5rem!important; }
.pl-2 { padding-left:.5rem!important; }
.px-2 { padding-right:.5rem!important;padding-left:.5rem!important; }
.py-2 { padding-top:.5rem!important;padding-bottom:.5rem!important; }
.pt-3 { padding-top:1rem!important; }
.pr-3 { padding-right:1rem!important; }
.pb-3 { padding-bottom:1rem!important; }
.pl-3 { padding-left:1rem!important; }
.py-3 { padding-bottom:1rem!important;padding-top:1rem!important; }
.px-3 { padding-right:1rem!important;padding-left:1rem!important; }
.pt-4 { padding-top:1.5rem!important; }
.pr-4 { padding-right:1.5rem!important; }
.pb-4 { padding-bottom:1.5rem!important; }
.pl-4 { padding-left:1.5rem!important; }
.px-4 { padding-right:1.5rem!important;padding-left:1.5rem!important; }
.py-4 { padding-top:1.5rem!important;padding-bottom:1.5rem!important; }
.pt-5 { padding-top:3rem!important; }
.pr-5 { padding-right:3rem!important; }
.pb-5 { padding-bottom:3rem!important; }
.pl-5 { padding-left:3rem!important; }
.px-5 { padding-right:3rem!important;padding-left:3rem!important; }
.py-5 { padding-top:3rem!important;padding-bottom:3rem!important; }
https://jsfiddle.net/ssuryar/x47bca1u/
Bootstrap 4 has a new notation for margin and padding classes. Refer to Bootstrap 4.0 Documentation - Spacing.
From the documentation:
Notation
Spacing utilities that apply to all breakpoints, from xs to xl, have
no breakpoint abbreviation in them. This is because those classes are
applied from min-width: 0 and up, and thus are not bound by a media
query. The remaining breakpoints, however, do include a breakpoint
abbreviation.
The classes are named using the format {property}{sides}-{size} for xs
and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Examples
.mt-0 { margin-top: 0 !important; }
.p-3 { padding: $spacer !important; }
This is taken from the docs and it works very well.
Here is the link
m - for classes that set margin
p - for classes that set padding
Where sides are one of:
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
if you want to give margin to the left use ml-x where x stands for [1,2,3,4,5]
same for padding
example be like
<div class = "mt-5"></div>
<div class = "pt-5"></div>
Use only p-x or m-x for getting padding and margin of x from all sides.
I'm adding this code to my Bootstrap3.3 project with the same grid columns breakpoints, based with the #guest answer. Before I have used the Bootstrap 4 padding and margins helper it seens to be a good choice.
/*Margin and Padding helpers*/
/*xs*/
.p-xs { padding: .25em; }
.p-x-xs { padding: 0 .25em; }
.p-y-xs { padding: .25em 0 ; }
.p-t-xs { padding-top: .25em; }
.p-r-xs { padding-right: .25em; }
.p-b-xs { padding-bottom: .25em; }
.p-l-xs { padding-left: .25em; }
.m-xs { margin: .25em; }
.m-x-xs { margin: 0 .25em; }
.m-y-xs { margin: .25em 0 ; }
.m-r-xs { margin-right: .25em; }
.m-l-xs { margin-left: .25em; }
.m-t-xs { margin-top: .25em; }
.m-b-xs { margin-bottom: .25em; }
/*sm*/
#media (min-width:768px){
/*sm*/
.p-sm { padding: .5em; }
.p-x-sm { padding: 0 .5em; }
.p-y-sm { padding: .5em 0 ; }
.p-t-sm { padding-top: .5em; }
.p-r-sm { padding-right: .5em; }
.p-b-sm { padding-bottom: .5em; }
.p-l-sm { padding-left: .5em; }
.m-sm { margin: .5em; }
.m-x-sm { margin: 0 .5em; }
.m-y-sm { margin: .5em 0 ; }
.m-t-sm { margin-top: .5em; }
.m-r-sm { margin-right: .5em; }
.m-b-sm { margin-bottom: .5em; }
.m-l-sm { margin-left: .5em; }
}
/*md*/
#media (min-width: 992px){
.p-md { padding: 1em; }
.p-x-md { padding: 0 1em; }
.p-y-md { padding: 1em 0; }
.p-t-md { padding-top: 1em; }
.p-r-md { padding-right: 1em; }
.p-b-md { padding-bottom: 1em; }
.p-l-md { padding-left: 1em; }
.m-md { margin: 1em; }
.m-x-md { margin: 0 1em; }
.m-y-md { margin: 1em 0 ; }
.m-t-md { margin-top: 1em; }
.m-r-md { margin-right: 1em; }
.m-b-md { margin-bottom: 1em; }
.m-l-md { margin-left: 1em; }
}
/*lg*/
#media (min-width: 1200px){
.p-lg { padding: 1.5em; }
.p-x-lg { padding: 0 1.5em; }
.p-y-lg { padding: 1.5em 0; }
.p-t-lg { padding-top: 1.5em; }
.p-r-lg { padding-right: 1.5em; }
.p-b-lg { padding-bottom: 1.5em; }
.p-l-lg { padding-left: 1.5em; }
.m-lg { margin: 1.5em; }
.m-x-lg { margin: 0 1.5em; }
.m-y-lg { margin: 1.5em 0; }
.m-t-lg { margin-top: 1.5em; }
.m-r-lg { margin-right: 1.5em; }
.m-b-lg { margin-bottom: 1.5em; }
.m-l-lg { margin-left: 1.5em; }
}
/*xl*/
.p-xl { padding: 3em; }
.p-x-xl { padding: 0 3em; }
.p-y-xl { padding: 3em 0 ; }
.p-t-xl { padding-top: 3em; }
.p-r-xl { padding-right: 3em; }
.p-b-xl { padding-bottom: 3em; }
.p-l-xl { padding-left: 3em; }
.m-xl { margin: 3em; }
.m-x-xl { margin: 0 3em; }
.m-y-xl { margin: 3em 0; }
.m-t-xl { margin-top: 3em; }
.m-r-xl { margin-right: 3em; }
.m-b-xl { margin-bottom: 3em; }
.m-l-xl { margin-left: 3em; }``
For bootstrap 4 we have new classes named with following notation
m - for classes that set margin
p - for classes that set padding
Specify Top, bottom,left, right, left & right, top & bottom using below letters
t - for classes that set margin-top (mt) or padding-top (pt)
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
Specify size using following numbers
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
Actual Code from bootstrap 4 css file
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Usage
So when you need some padding left just add any class from pl-0 to pl-5 based on your need
If you need margin on top just add any class from mt-0 to mt-5 based on your need
<div class="col-sm-6 mt-5"> this div will have margin top added </div>
<div class="col-sm-6 pl-5"> this div will have padding left added </div>
Bootstrap 4 CDN
Bootstrap 5 has changed the ml,mr,pl,pr classes, which no longer work if you're upgrading from a lower version.
The l and r have now been replaced with s(...which is confusing) and e(east?) respectively.
From bootstrap website:
Where property is one of:
m - for classes that set margin
p - for classes that set padding
Where sides is one of:
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
(You can add more sizes by adding entries to the $spacers Sass map variable.)
I think what you're asking about is how to create responsive spacing between rows or col-xx-xx classes.
You can definitely do this with the col-xx-offset-xx class:
<div class="col-xs-4">
</div>
<div class="col-xs-7 col-xs-offset-1">
</div>
As for adding margin or padding directly to elements, there are some simple ways to do this depending on your element. You can use btn-lg or label-lg or well-lg. If you're ever wondering, how can i give this alittle padding. Try adding the primary class name + lg or sm or md depending on your size needs:
<button class="btn btn-success btn-lg btn-block">Big Button w/ Display: Block</button>
Bootstrap versions before 4 and 5 do not define ml, mr, pl, and pr.
Bootstrap versions 4 and 5 define the classes of ml, mr, pl, and pr.
For example:
mr--1
ml--1
pr--1
pl--1
I would like to give an example which I tried by understanding above documentation and works correctly.
If you wish to apply 25% padding on left and right sides medium screen size then please use px-md-1.
It works as desired and can similarly follow for other screen sizes. :)
These spacing notations are quite effective in custom changes. You can also use negative values there too. Official
Though we can use them whenever we want. Bootstrap Spacing

Mobile First Breakpoints for nth child

I have this code that works, it is a group of client icons that starts off with a 2 column list on mobile, then gradually moves to a 3 column list and then onto a 4 column list and so on.
I am using the nth child pseudo element to remove the margin on certain numbers depending on the breakpoint i.e :nth-child(2n) on the column breakpoint.
But check my code out I feel it is messy, Does anyone know of a better way to write this?
.list-horiz-images li {
float: left;
margin-right: 7px;
margin-bottom: 7px;
width: 49%;
&:nth-child(2n) {
margin-right: 0px;
}
#include mobilefirst(em(670)) {
width: 32.57%;
&:nth-child(2n) {
margin-right: 7px;
}
&:nth-child(3n) {
margin-right: 0px;
}
}
#include mobilefirst(em(1024)) {
width: 24.44%;
&:nth-child(2n) {
margin-right: 7px;
}
&:nth-child(3n) {
margin-right: 7px;
}
&:nth-child(4n) {
margin-right: 0px;
}
}
#include mobilefirst(em($bp-large)) {
width: 13.666666666%;
&:nth-child(2n) {
margin-right: 7px;
}
&:nth-child(3n) {
margin-right: 7px;
}
&:nth-child(4n) {
margin-right: 7px;
}
}
}

Should I specify all 4 paddings or overriding just one of them is also a good practice?

For a given class, I want to have the following styles:
stlye1 {
padding-top: 0;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0px;
}
But that's a lot of duplicates so I would like to just write:
stlye1 {
padding: 0;
padding-bottom: 10px;
}
Will this be something bad to do?
update:
when I see 3 values (the short hand), i'm not sure what is the last one going to apply to.
so i came up with the second method above to make it clear which one i want to override.
update 2:
for a short hand method, how do you specific the followings:
stlye1 {
padding-top: 0;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0px;
}
style1 {
padding: 0 0 10px; // now i know this one, thanks!
}
stlye2 {
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
}
style2 {
padding: 0 10px 0; // is this correct?
}
stlye3 {
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
}
style3 {
padding: 10px 0 0; // is this correct?
}
stlye4 {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
}
style4 {
padding: // i have no clue.
}
update 3:
in short, style2 and 4 cannot be done in shorthand format by suppling 3 values only.
as indicated by PassKit, left and right can't be specified alone with 3 values only.
Why don't you just use the shorthand?
stlye1 {
padding: 0 0 10px; /* top (right/left) bottom */
}
Where it's:
padding: top right bottom left;
While your suggestion is perfectly valid, the most concise form would be:
stlye1 {
padding: 0 0 10px;
}
This short hand format breaks down as padding: top(0) right(0) bottom(10px); and left defaults to the right value because a left value has not been specified.
For the 4 styles in your question, styles 1 and 3 are correct, but for styles 2 and 4, see style 5 below and the accompanying note.
For reference, the style shorthand breaks down as follows:
If there is one value, it applies to all 4 attributes, top, right, bottom and left.
stlye1value {
padding: 10px;
}
/* equals */
stlye1value {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
If there are two values, the first value applies to top & bottom attributes and the second value to left & right
stlye2values {
padding: 0 10px;
}
/* equals */
stlye2values {
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
If there are 3 valus, the first applies to top, the second applies to left & right and the third applies to bottom.
stlye3values {
padding: 0 10px 20px;
}
/* equals */
stlye3values {
padding-top: 0;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
Specifying all 4 values sets padding in the order top, right, bottom, left (think of a clockwise circle starting at the top).
stlye4values {
padding: 0 10px 20px 30px;
}
/* equals */
stlye4values {
padding-top: 0;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 30px;
}
Note: There is no way to independently specify a right or left value using shorthand without entering all 4 values or using the padding-left or padding-right.
style5 {
padding-left: 10px;
}
/* providing there are no previous padding rule for style5 equals */
style5 {
padding: 0 0 0 10px;
}
/* equals */
stlye5 {
padding:0;
padding-left:10px;
}
/* equals */
stlye5 {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
}

Resources