mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-12 00:08:59 +01:00
0e920ce3f4
With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager.
84 lines
3.0 KiB
Markdown
84 lines
3.0 KiB
Markdown
---
|
|
layout: docs
|
|
title: Spacing
|
|
description: Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
|
|
group: utilities
|
|
toc: true
|
|
---
|
|
|
|
## How it works
|
|
|
|
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`.
|
|
|
|
## 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`.
|
|
|
|
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`
|
|
* `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`
|
|
* 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.)
|
|
|
|
## Examples
|
|
|
|
Here are some representative examples of these classes:
|
|
|
|
{% highlight scss %}
|
|
.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;
|
|
}
|
|
{% endhighlight %}
|
|
|
|
### Horizontal centering
|
|
|
|
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`.
|
|
|
|
<div class="bd-example">
|
|
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
|
Centered element
|
|
</div>
|
|
</div>
|
|
|
|
{% highlight html %}
|
|
<div class="mx-auto" style="width: 200px;">
|
|
Centered element
|
|
</div>
|
|
{% endhighlight %}
|