@@ -338,13 +338,13 @@ Note that dynamic tabbed interfaces should not contain dropdown menus, {{< highlight html >}}

@@ -397,13 +397,13 @@ The tabs plugin also works with pills.

@@ -422,13 +422,13 @@ The tabs plugin also works with pills. {{< highlight html >}}

@@ -498,16 +498,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp {{< highlight html >}}

@@ -572,16 +572,16 @@ Activates a tab element and content container. Tab should have either a `data-ta {{< highlight html >}}

-- cgit v1.2.3 From c0efceb6d586cff4256478fb1e242c6075248f72 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 28 Mar 2020 11:41:03 +0200 Subject: docs: remove duplicate code for indeterminate (#30471) --- site/content/docs/4.3/forms/checks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/content') diff --git a/site/content/docs/4.3/forms/checks.md b/site/content/docs/4.3/forms/checks.md index 6b90fb9bf..e189d1bb9 100644 --- a/site/content/docs/4.3/forms/checks.md +++ b/site/content/docs/4.3/forms/checks.md @@ -35,7 +35,7 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it). -{{< example >}} +{{< example class="bd-example-indeterminate">}}

-- cgit v1.2.3 From 74afe149c48e8386c4de2bbd8fab36142227f755 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 28 Mar 2020 12:29:08 +0200 Subject: Dist (#29924) --- site/content/docs/4.3/examples/floating-labels/floating-labels.css | 4 ---- 1 file changed, 4 deletions(-) (limited to 'site/content') diff --git a/site/content/docs/4.3/examples/floating-labels/floating-labels.css b/site/content/docs/4.3/examples/floating-labels/floating-labels.css index b9c5d7cdc..163d21300 100644 --- a/site/content/docs/4.3/examples/floating-labels/floating-labels.css +++ b/site/content/docs/4.3/examples/floating-labels/floating-labels.css @@ -48,10 +48,6 @@ body { color: transparent; } -.form-label-group input:-ms-input-placeholder { - color: transparent; -} - .form-label-group input::-ms-input-placeholder { color: transparent; } -- cgit v1.2.3 From 841412626633a89b8ba7910a683b7e0830fd4d2d Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Mon, 30 Mar 2020 15:12:36 +0200 Subject: Switch to custom properties to control grid gutter widths (#30475) --- site/content/docs/4.3/layout/grid.md | 1 + 1 file changed, 1 insertion(+) (limited to 'site/content') diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 834386a48..c4089e05f 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -45,6 +45,7 @@ Breaking it down, here's how it works: - The horizontal gutter width can be changed with `.gx-*` classes like `.gx-2` (smaller horizontal gutters) or `.gx-xl-4` (larger horizontal gutters on viewports larger than the `xl` breakpoint). - The vertical gutter width can be changed with `.gy-*` classes like `.gy-2` (smaller vertical gutters) or `.gy-xl-4` (larger vertical gutters on viewports larger than the `xl` breakpoint). To achieve vertical gutters, additional margin is added to the top of each column. The `.row` counteracts this margin to the top with a negative margin. - The gutter width in both directions can be changed with `.g-*` classes like `.g-2` (smaller gutters) or `.g-xl-4` (larger gutters on viewports larger than the `xl` breakpoint) +- CSS custom properties (`--grid-gutter-x` and `--grid-gutter-y`) are used to calculate the gutter widths. Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9). -- cgit v1.2.3 From a0c2a29a8dbb563fb84591522c6412063df70d59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 31 Mar 2020 16:28:10 +0200 Subject: =?UTF-8?q?docs(tables):=201,=202,=202,=204=E2=80=A6=20(#30489)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: XhmikosR --- site/content/docs/4.3/content/tables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/content') diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md index c13a24517..f42d37d68 100644 --- a/site/content/docs/4.3/content/tables.md +++ b/site/content/docs/4.3/content/tables.md @@ -407,7 +407,7 @@ Table cells of `` are always vertical aligned to the bottom. Table cells Heading 1 Heading 2 - Heading 2 + Heading 3 Heading 4 -- cgit v1.2.3 From df707cd7272f9165dda895f08bdd15d093d96a25 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 31 Mar 2020 20:02:57 +0200 Subject: Require `.form-label` classes on form labels (#30476) --- site/content/docs/4.3/components/dropdowns.md | 8 ++-- site/content/docs/4.3/examples/checkout/index.html | 26 +++++------ .../examples/floating-labels/floating-labels.css | 1 - site/content/docs/4.3/forms/form-control.md | 8 ++-- site/content/docs/4.3/forms/input-group.md | 2 +- site/content/docs/4.3/forms/layout.md | 18 ++++---- site/content/docs/4.3/forms/overview.md | 10 ++--- site/content/docs/4.3/forms/range.md | 6 +-- site/content/docs/4.3/forms/validation.md | 50 +++++++++++----------- site/content/docs/4.3/migration.md | 1 + 10 files changed, 65 insertions(+), 65 deletions(-) (limited to 'site/content') diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md index 54aad5ce4..6b3fe8fc9 100644 --- a/site/content/docs/4.3/components/dropdowns.md +++ b/site/content/docs/4.3/components/dropdowns.md @@ -690,11 +690,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar

- Email address + Email address

- Password + Password

@@ -716,11 +716,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar {{< example >}}

- Email address + Email address

- Password + Password

diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html index 94f89db72..82079d19a 100644 --- a/site/content/docs/4.3/examples/checkout/index.html +++ b/site/content/docs/4.3/examples/checkout/index.html @@ -68,7 +68,7 @@ body_class: "bg-light"

- First name + First name

Valid first name is required. @@ -76,7 +76,7 @@ body_class: "bg-light"

- Last name + Last name

Valid last name is required. @@ -84,7 +84,7 @@ body_class: "bg-light"

- Username + Username

@ @@ -95,7 +95,7 @@ body_class: "bg-light"

- Email (Optional) + Email (Optional)

Please enter a valid email address for shipping updates. @@ -103,7 +103,7 @@ body_class: "bg-light"

- Address + Address

Please enter your shipping address. @@ -111,12 +111,12 @@ body_class: "bg-light"

- Address 2 (Optional) + Address 2 (Optional)

- Country + Country @@ -138,7 +138,7 @@ body_class: "bg-light"

- Zip + Zip

Zip code required. @@ -179,7 +179,7 @@ body_class: "bg-light"

- Name on card + Name on card Full name as displayed on card

@@ -188,7 +188,7 @@ body_class: "bg-light"

- Credit card number + Credit card number

Credit card number is required @@ -196,7 +196,7 @@ body_class: "bg-light"

- Expiration + Expiration

Expiration date required @@ -204,7 +204,7 @@ body_class: "bg-light"

- CVV + CVV

Security code required diff --git a/site/content/docs/4.3/examples/floating-labels/floating-labels.css b/site/content/docs/4.3/examples/floating-labels/floating-labels.css index 163d21300..a9224c0d2 100644 --- a/site/content/docs/4.3/examples/floating-labels/floating-labels.css +++ b/site/content/docs/4.3/examples/floating-labels/floating-labels.css @@ -35,7 +35,6 @@ body { left: 0; display: block; width: 100%; - margin-bottom: 0; /* Override default `` margin */ color: #495057; pointer-events: none; cursor: text; /* Match the input under the label */ diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md index e74338d09..87b5c4ace 100644 --- a/site/content/docs/4.3/forms/form-control.md +++ b/site/content/docs/4.3/forms/form-control.md @@ -10,11 +10,11 @@ toc: true {{< example >}}

- Email address + Email address

- Example textarea + Example textarea

{{< /example >}} @@ -75,7 +75,7 @@ If you want to have `` elements in your form styled as plain tex ## Color {{< example >}} -Color picker +Color picker {{< /example >}} @@ -86,7 +86,7 @@ Datalists allow you to create a group of `

-Your vanity URL +Your vanity URL

https://example.com/users/ diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md index 3e5b45f8a..fb3cd68cb 100644 --- a/site/content/docs/4.3/forms/layout.md +++ b/site/content/docs/4.3/forms/layout.md @@ -24,11 +24,11 @@ Feel free to build your forms however you like, with `

`s, `

`s, or {{< example >}}

- Example label + Example label

- Another label + Another label

{{< /example >}} @@ -68,34 +68,34 @@ More complex layouts can also be created with the grid system. {{< example >}}

- Email + Email

- Password + Password

- Address + Address

- Address 2 + Address 2

- City + City

- State + State

- Zip + Zip

diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md index 8ba099dfe..a4cc78008 100644 --- a/site/content/docs/4.3/forms/overview.md +++ b/site/content/docs/4.3/forms/overview.md @@ -35,12 +35,12 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for {{< example >}}

- Email address + Email address We'll never share your email with anyone else.

- Password + Password

@@ -64,7 +64,7 @@ Help text should be explicitly associated with the form control it relates to us Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above. {{< example >}} -Password +Password Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. @@ -105,11 +105,11 @@ By default, browsers will treat all native form controls (``, `

- Disabled select menu + Disabled select menu diff --git a/site/content/docs/4.3/forms/range.md b/site/content/docs/4.3/forms/range.md index 979e765c3..f229908b0 100644 --- a/site/content/docs/4.3/forms/range.md +++ b/site/content/docs/4.3/forms/range.md @@ -11,7 +11,7 @@ toc: true Create custom `` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. {{< example >}} -Example range +Example range {{< /example >}} @@ -20,7 +20,7 @@ Create custom `` controls with `.form-range`. The track (the Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes. {{< example >}} -Example range +Example range {{< /example >}} @@ -29,6 +29,6 @@ Range inputs have implicit values for `min` and `max`—`0` and `100`, respectiv By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`. {{< example >}} -Example range +Example range {{< /example >}} diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md index 2bac57860..2d6e2cab1 100644 --- a/site/content/docs/4.3/forms/validation.md +++ b/site/content/docs/4.3/forms/validation.md @@ -34,21 +34,21 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun {{< example >}}

- First name + First name

Looks good!

- Last name + Last name

Looks good!

- Username + Username

@ @@ -58,14 +58,14 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun

- City + City

Please provide a valid city.

- State + State

Please provide a valid zip. @@ -130,33 +130,33 @@ While these feedback styles cannot be styled with CSS, you can still customize t {{< example >}}

- First name + First name

- Last name + Last name

- Username + Username

- City + City

- State + State

- Zip + Zip

@@ -180,21 +180,21 @@ We recommend using client-side validation, but in case you require server-side v {{< example >}}

- First name + First name

Looks good!

- Last name + Last name

Looks good!

- Username + Username

@ @@ -204,14 +204,14 @@ We recommend using client-side validation, but in case you require server-side v

- City + City

Please provide a valid city.

- State + State

Please provide a valid zip. @@ -256,7 +256,7 @@ Validation styles are available for the following form controls and components: {{< example >}}

- Textarea + Textarea

Please enter a message in the textarea. @@ -311,21 +311,21 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas {{< example >}}

- First name + First name

- Last name + Last name

- Username + Username

@ @@ -335,14 +335,14 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas

- City + City

- State + State

{{< /example >}} @@ -154,10 +154,10 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli - +

@@ -165,28 +165,28 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli - +

- +

diff --git a/site/content/docs/4.3/components/navs.md b/site/content/docs/4.3/components/navs.md index 0c7f54981..ba8290242 100644 --- a/site/content/docs/4.3/components/navs.md +++ b/site/content/docs/4.3/components/navs.md @@ -260,13 +260,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin

Link @@ -286,13 +286,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin

Link diff --git a/site/content/docs/4.3/components/scrollspy.md b/site/content/docs/4.3/components/scrollspy.md index 51c109df4..29b6468d0 100644 --- a/site/content/docs/4.3/components/scrollspy.md +++ b/site/content/docs/4.3/components/scrollspy.md @@ -33,12 +33,12 @@ Scroll the area below the navbar and watch the active class change. The dropdown

@@ -70,12 +70,12 @@ Scroll the area below the navbar and watch the active class change. The dropdown diff --git a/site/content/docs/4.3/forms/input-group.md b/site/content/docs/4.3/forms/input-group.md index 4186f6b36..5d0e13ac2 100644 --- a/site/content/docs/4.3/forms/input-group.md +++ b/site/content/docs/4.3/forms/input-group.md @@ -154,46 +154,46 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}}

- +

- + - +

{{< /example >}} @@ -205,13 +205,13 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve - +

@@ -221,13 +221,13 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve - +

{{< /example >}} -- cgit v1.2.3 From c48d89cb70566c2378a563609789e7aa0b36d917 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 31 Mar 2020 22:41:28 +0200 Subject: Use unordered lists in dropdown-menus --- .../docs/4.3/examples/navbar-bottom/index.html | 10 +-- site/content/docs/4.3/examples/navbars/index.html | 100 ++++++++++----------- .../content/docs/4.3/examples/offcanvas/index.html | 10 +-- .../docs/4.3/examples/starter-template/index.html | 10 +-- 4 files changed, 65 insertions(+), 65 deletions(-) (limited to 'site/content') diff --git a/site/content/docs/4.3/examples/navbar-bottom/index.html b/site/content/docs/4.3/examples/navbar-bottom/index.html index fadf35737..68c247f85 100644 --- a/site/content/docs/4.3/examples/navbar-bottom/index.html +++ b/site/content/docs/4.3/examples/navbar-bottom/index.html @@ -29,11 +29,11 @@ title: Bottom navbar example

- +

diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html index 1016b5b9a..6cd9ae380 100644 --- a/site/content/docs/4.3/examples/navbars/index.html +++ b/site/content/docs/4.3/examples/navbars/index.html @@ -25,11 +25,11 @@ extra_css: @@ -82,11 +82,11 @@ extra_css: @@ -116,11 +116,11 @@ extra_css: @@ -150,11 +150,11 @@ extra_css: @@ -184,11 +184,11 @@ extra_css: @@ -218,11 +218,11 @@ extra_css: @@ -252,11 +252,11 @@ extra_css: @@ -289,11 +289,11 @@ extra_css:

@@ -321,11 +321,11 @@ extra_css: @@ -354,11 +354,11 @@ extra_css:

diff --git a/site/content/docs/4.3/examples/offcanvas/index.html b/site/content/docs/4.3/examples/offcanvas/index.html index 4a8501e3a..cc41316bc 100644 --- a/site/content/docs/4.3/examples/offcanvas/index.html +++ b/site/content/docs/4.3/examples/offcanvas/index.html @@ -31,11 +31,11 @@ body_class: "bg-light" diff --git a/site/content/docs/4.3/examples/starter-template/index.html b/site/content/docs/4.3/examples/starter-template/index.html index 0a6ea6291..d2869091e 100644 --- a/site/content/docs/4.3/examples/starter-template/index.html +++ b/site/content/docs/4.3/examples/starter-template/index.html @@ -25,11 +25,11 @@ extra_css: -- cgit v1.2.3 From e138decdbb3597813c762995753db52abfbc76fb Mon Sep 17 00:00:00 2001 From: gsoti Date: Tue, 23 Apr 2019 17:03:59 +0300 Subject: Add Full-Screen size to Modal and Responsive variations for breakpoints (Works from breakpoint and down) --- site/content/docs/4.3/components/modal.md | 156 ++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) (limited to 'site/content') diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md index 6789ccc7c..a5732c6a0 100644 --- a/site/content/docs/4.3/components/modal.md +++ b/site/content/docs/4.3/components/modal.md @@ -678,6 +678,162 @@ Our default modal without modifier class constitutes the "medium" size modal.

+## Fullscreen Modal + +Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Class	Availability
`.modal-fullscreen`	Always
`.modal-fullscreen-xl-down`	`Below 1200px`
`.modal-fullscreen-lg-down`	`Below 992px`
`.modal-fullscreen-md-down`	`Below 768px`
`.modal-fullscreen-sm-down`	`Below 576px`

+ +

+ + + + + +

+ +{{< highlight html >}} + + + + +{{< /highlight >}} + + + + + + + + + + + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. -- cgit v1.2.3 From 062002d9521e2d3d77e9880f8b151bbbf05ef085 Mon Sep 17 00:00:00 2001 From: ysds Date: Thu, 27 Feb 2020 17:30:06 +0200 Subject: Fix CSS and improve docs --- site/content/docs/4.3/components/modal.md | 76 +++++++++++++++++-------------- 1 file changed, 41 insertions(+), 35 deletions(-) (limited to 'site/content') diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md index a5732c6a0..c202aa70e 100644 --- a/site/content/docs/4.3/components/modal.md +++ b/site/content/docs/4.3/components/modal.md @@ -695,50 +695,44 @@ Another override is the option to pop up a modal that covers the user viewport, Always - .modal-fullscreen-xl-down - Below 1200px - - - .modal-fullscreen-lg-down - Below 992px + .modal-fullscreen-sm-down + Below 576px .modal-fullscreen-md-down Below 768px - .modal-fullscreen-sm-down - Below 576px + .modal-fullscreen-lg-down + Below 992px + + + .modal-fullscreen-xl-down + Below 1200px

- - - - - + + + + +

{{< highlight html >}} - - -