aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorJohann-S <[email protected]>2017-09-11 10:54:35 +0200
committerGitHub <[email protected]>2017-09-11 10:54:35 +0200
commit96659a3cad351eca5e84a38001f19cb4bf8637a9 (patch)
tree418a42be22a9191c295c1f2f53675877b2f27353 /docs
parent45276521778c9843c3d308f7fcda4168a75f4825 (diff)
parent65cb97b3d6fdb245e521efabc565945918012e09 (diff)
downloadbootstrap-96659a3cad351eca5e84a38001f19cb4bf8637a9.tar.xz
bootstrap-96659a3cad351eca5e84a38001f19cb4bf8637a9.zip
Merge branch 'v4-dev' into collapse-js-with-text-truncate
Diffstat (limited to 'docs')
-rw-r--r--docs/4.0/about/history.md2
-rw-r--r--docs/4.0/components/forms.md4
-rw-r--r--docs/4.0/content/reboot.md2
-rw-r--r--docs/4.0/examples/blog/blog.css2
-rw-r--r--docs/4.0/getting-started/introduction.md2
-rw-r--r--docs/4.0/getting-started/options.md4
-rw-r--r--docs/4.0/migration.md4
-rw-r--r--docs/4.0/utilities/display.md23
8 files changed, 35 insertions, 8 deletions
diff --git a/docs/4.0/about/history.md b/docs/4.0/about/history.md
index b63845bfc..0b5de7776 100644
--- a/docs/4.0/about/history.md
+++ b/docs/4.0/about/history.md
@@ -3,7 +3,7 @@ layout: docs
title: History
description: A brief overview of the history of Bootstrap.
redirect_from:
- - /about/
+ - /docs/4.0/about/
group: about
---
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index c8e0f2bd7..1fe14ba19 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1004,8 +1004,8 @@ Here's how it works:
- We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
- We hide the default file `<input>` via `opacity`.
-- We use `:after` to generate a custom background and directive (*Choose file...*).
-- We use `:before` to generate and position the *Browse* button.
+- We use `::after` to generate a custom background and directive (*Choose file...*).
+- We use `::before` to generate and position the *Browse* button.
- We declare a `height` on the `<input>` for proper spacing for surrounding content.
In other words, it's an entirely custom element, all generated via CSS.
diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md
index 6fa38a381..f69d2519e 100644
--- a/docs/4.0/content/reboot.md
+++ b/docs/4.0/content/reboot.md
@@ -22,7 +22,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
-- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
+- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
- No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies.
- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
diff --git a/docs/4.0/examples/blog/blog.css b/docs/4.0/examples/blog/blog.css
index 5fed56424..18db4290e 100644
--- a/docs/4.0/examples/blog/blog.css
+++ b/docs/4.0/examples/blog/blog.css
@@ -62,7 +62,7 @@ h6, .h6 {
.nav-link.active {
color: #fff;
}
-.nav-link.active:after {
+.nav-link.active::after {
position: absolute;
bottom: 0;
left: 50%;
diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md
index 08dd83209..4035ae8f4 100644
--- a/docs/4.0/getting-started/introduction.md
+++ b/docs/4.0/getting-started/introduction.md
@@ -97,7 +97,7 @@ On the rare occasion you need to override it, use something like the following:
}
{% endhighlight %}
-With the above snippet, nested elements—including generated content via `:before` and `:after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
+With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md
index 0b83c47f8..2547ef1ad 100644
--- a/docs/4.0/getting-started/options.md
+++ b/docs/4.0/getting-started/options.md
@@ -46,11 +46,11 @@ All colors available in Bootstrap 4, available as Sass variables and a Sass map
<div class="row">
{% for color in site.data.colors %}
+ {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
<div class="col-md-4">
- {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
<div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
- {% endunless %}
</div>
+ {% endunless %}
{% endfor %}
</div>
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index 6c1bf14fc..5a63988cb 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -219,6 +219,10 @@ Dropped entirely for the new card component.
- `.panel-footer` to `.card-footer`
- `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` have been dropped for `.bg-`, `.text-`, and `.border` utilities generated from our `$theme-colors` Sass map.
+### Progress
+
+- Replaced contextual `.progress-bar-*` classes with `.bg-*` utilities. For example, `class="progress-bar progress-bar-danger"` becomes `class="progress-bar bg-danger"`.
+
### Carousel
- Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md
index 86c741190..bfb7f091e 100644
--- a/docs/4.0/utilities/display.md
+++ b/docs/4.0/utilities/display.md
@@ -47,6 +47,29 @@ Responsive variations also exist for every single utility mentioned above.
- `.d{{ bp.abbr }}-flex`
- `.d{{ bp.abbr }}-inline-flex`{% endfor %}
+## Hiding Elements
+
+For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
+
+To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation.
+
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none.d-md-block.d-xl-none` will hide the element for all screen sizes except on medium and large devices.
+
+| Screen Size | Class |
+| --- | --- |
+| Hidden on all | `d-none` |
+| Hidden only on xs | `d-none d-sm-block` |
+| Hidden only on sm | `d-sm-none d-md-block` |
+| Hidden only on md | `d-md-none d-lg-block` |
+| Hidden only on lg | `d-lg-none d-xl-block` |
+| Hidden only on xl | `d-xl-none` |
+| Visible on all | `d-block` |
+| Visible only on xs | `d-block d-sm-none` |
+| Visible only on sm | `d-none d-sm-block d-md-none` |
+| Visible only on md | `d-none d-md-block d-lg-none` |
+| Visible only on lg | `d-none d-lg-block d-xl-none` |
+| Visible only on xl | `d-none d-xl-block` |
+
## Display in print
Change the `display` value of elements when printing with our print display utilities.
generated by cgit v1.2.3 (git 2.25.1) at 2026-07-05 23:26:48 +0000