]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
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 %} |