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

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

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

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

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

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

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

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

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 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

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

[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