mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-09 02:46:15 +01:00
b46f05a948
This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
105 lines
3.9 KiB
Markdown
105 lines
3.9 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:
|
|
|
|
```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;
|
|
}
|
|
```
|
|
|
|
### 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>
|
|
|
|
```html
|
|
<div class="mx-auto" style="width: 200px;">
|
|
Centered element
|
|
</div>
|
|
```
|
|
|
|
### Negative margin
|
|
|
|
In CSS, `margin` properties can utilize negative values (`padding` cannot). As of 4.2, we've added negative margin utilities for every non-zero integer size listed above (e.g., `1`, `2`, `3`, `4`, `5`). These utilities are ideal for customizing grid column gutters across breakpoints.
|
|
|
|
The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here's an example class that's the opposite of `.mt-1`:
|
|
|
|
```scss
|
|
.mt-n1 {
|
|
margin-top: -0.25rem !important;
|
|
}
|
|
```
|
|
|
|
Here's an example of customizing the Bootstrap grid at the medium (`md`) breakpoint and above. We've increased the `.col` padding with `.px-md-5` and then counteracted that with `.mx-md-n5` on the parent `.row`.
|
|
|
|
{{< example >}}
|
|
<div class="row mx-md-n5">
|
|
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
|
|
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
|
|
</div>
|
|
{{< /example >}}
|