Does bootstrap have builtin padding and margin classes

Question

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

User · Answer

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!immortant;margin-right:0!immortant; }
.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/

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  amp  right  top  amp  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   lt div class  col-sm-6 mt-5  gt  this div will have margin top added  lt  div gt   lt div class  col-sm-6 pl-5  gt  this div will have padding left added  lt  div gt    Bootstrap 4 CDN

User · Answer

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 mt-x where x stands for  1 2 3 4 5   same for padding  example be like   lt div class    mt-5  gt  lt  div gt   lt div class    pt-5  gt  lt  div gt    Use only p-x or m-x for getting padding and margin of x from all sides

User · Answer

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

User · Answer

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    lt div class  col-xs-4  gt   lt  div gt    lt div class  col-xs-7 col-xs-offset-1  gt   lt  div gt    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    lt button class  btn btn-success btn-lg btn-block  gt Big Button w  Display  Block lt  button gt

[css] Does bootstrap have builtin padding and margin classes?

Examples related to css

Examples related to twitter-bootstrap

Examples related to margin

Examples related to padding