src/scss/bootstrap-4.0.0-alpha.6/docs/utilities/spacing.md

   1 ---
   2 layout: docs
   3 title: Spacing
   4 group: utilities
   5 ---
   6
   7 Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`.
   8
   9 ## Contents
  10
  11 * Will be replaced with the ToC, excluding the "Contents" header
  12 {:toc}
  13
  14 ## Notation
  15
  16 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.
  17
  18 The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.
  19
  20 Where *property* is one of:
  21
  22 * `m` - for classes that set `margin`
  23 * `p` - for classes that set `padding`
  24
  25 Where *sides* is one of:
  26
  27 * `t` - for classes that set `margin-top` or `padding-top`
  28 * `b` - for classes that set `margin-bottom` or `padding-bottom`
  29 * `l` - for classes that set `margin-left` or `padding-left`
  30 * `r` - for classes that set `margin-right` or `padding-right`
  31 * `x` - for classes that set both `*-left` and `*-right`
  32 * `y` - for classes that set both `*-top` and `*-bottom`
  33 * blank - for classes that set a `margin` or `padding` on all 4 sides of the element
  34
  35 Where *size* is one of:
  36
  37 * `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
  38 * `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .25` or `$spacer-y * .25`
  39 * `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .5` or `$spacer-y * .5`
  40 * `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
  41 * `4` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
  42 * `5` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
  43
  44 (You can add more sizes by adding entries to the `$spacers` Sass map variable.)
  45
  46 ## Examples
  47
  48 Here are some representative examples of these classes:
  49
  50 {% highlight scss %}
  51 .mt-0 {
  52   margin-top: 0 !important;
  53 }
  54
  55 .ml-1 {
  56   margin-left: ($spacer-x * .25) !important;
  57 }
  58
  59 .px-2 {
  60   padding-left: ($spacer-x * .5) !important;
  61   padding-right: ($spacer-x * .5) !important;
  62 }
  63
  64 .p-3 {
  65   padding: $spacer-y $spacer-x !important;
  66 }
  67 {% endhighlight %}
  68
  69 ### Horizontal centering
  70 Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
  71
  72 <div class="bd-example">
  73   <div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
  74     Centered element
  75   </div>
  76 </div>
  77
  78 {% highlight html %}
  79 <div class="mx-auto" style="width: 200px;">
  80   Centered element
  81 </div>
  82 {% endhighlight %}