margin and padding in Bootstrap
margin and padding in Bootstrap
xxxxxxxxxx"margin": ( responsive: true, property: margin, class: m, values: map-merge($spacers, (auto: auto)) ), "margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: map-merge($spacers, (auto: auto)) ), "margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: map-merge($spacers, (auto: auto)) ), "margin-top": ( responsive: true, property: margin-top, class: mt, values: map-merge($spacers, (auto: auto)) ), "margin-end": ( responsive: true, property: margin-right, class: me, values: map-merge($spacers, (auto: auto)) ), "margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: map-merge($spacers, (auto: auto)) ), "margin-start": ( responsive: true, property: margin-left, class: ms, values: map-merge($spacers, (auto: auto)) ), // Negative margin utilities "negative-margin": ( responsive: true, property: margin, class: m, values: $negative-spacers ), "negative-margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: $negative-spacers ), "negative-margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: $negative-spacers ), "negative-margin-top": ( responsive: true, property: margin-top, class: mt, values: $negative-spacers ), "negative-margin-end": ( responsive: true, property: margin-right, class: me, values: $negative-spacers ), "negative-margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: $negative-spacers ), "negative-margin-start": ( responsive: true, property: margin-left, class: ms, values: $negative-spacers ), // Padding utilities "padding": ( responsive: true, property: padding, class: p, values: $spacers ), "padding-x": ( responsive: true, property: padding-right padding-left, class: px, values: $spacers ), "padding-y": ( responsive: true, property: padding-top padding-bottom, class: py, values: $spacers ), "padding-top": ( responsive: true, property: padding-top, class: pt, values: $spacers ), "padding-end": ( responsive: true, property: padding-right, class: pe, values: $spacers ), "padding-bottom": ( responsive: true, property: padding-bottom, class: pb, values: $spacers ), "padding-start": ( responsive: true, property: padding-left, class: ps, values: $spacers ),Source: getbootstrap.com
Closely Related Answers
xxxxxxxxxx/* bootstrap 5.2 */mt-0 /* margin-top */mb-0 /* margin-bottom */ms-0 /* margin-left */me-0 /* margin-right */mx-0 /* margin-left+right */my-0 /* margin-top+bottom *//* Where size is one of:0 - setting it to 01 - $spacer * .252 - $spacer * .53 - $spacer4 - $spacer * 1.55 - $spacer * 3 */Source: getbootstrap.com
xxxxxxxxxx/* bootstrap 5.2 */pt-0 /* padding-top */pb-0 /* padding-bottom */ps-0 /* padding-left */pe-0 /* padding-right */px-0 /* padding-left+right */py-0 /* padding-top+bottom *//* Where size is one of:0 - setting it to 01 - $spacer * .252 - $spacer * .53 - $spacer4 - $spacer * 1.55 - $spacer * 3 */Source: getbootstrap.com
xxxxxxxxxx/* bootstrap 4.6 */mt-0 /* margin-top */mb-0 /* margin-bottom */ml-0 /* margin-left */mr-0 /* margin-right */mx-0 /* margin-left+right */my-0 /* margin-top+bottom *//* Where size is one of:0 - for classes that eliminate the margin or padding by setting it to 01 - (by default) for classes that set the margin or padding to $spacer * .252 - (by default) for classes that set the margin or padding to $spacer * .53 - (by default) for classes that set the margin or padding to $spacer4 - (by default) for classes that set the margin or padding to $spacer * 1.55 - (by default) for classes that set the margin or padding to $spacer * 3auto - for classes that set the margin to auto(You can add more sizes by adding entries to the $spacers Sass map variable.) */Source: Grepper
Margin Classes
xxxxxxxxxx<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div></div>Source: getbootstrap.com
Twitter 
LinkedIn