Does bootstrap have builtin padding and margin classes?

后端 未结 9 2332
庸人自扰
庸人自扰 2020-12-25 09:57

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 th

9条回答
  •  佛祖请我去吃肉
    2020-12-25 10:38

    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

    this div will have margin top added
    this div will have padding left added

    Bootstrap 4 CDN

提交回复
热议问题