diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 5a8679ec57..672bcf503c 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -10,8 +10,8 @@ > [class^="col-"] { padding-top: .75rem; padding-bottom: .75rem; - background-color: rgba(86, 61, 124, .15); - border: 1px solid rgba(86, 61, 124, .2); + background-color: rgba(39, 41, 43, .03); + border: 1px solid rgba(39, 41, 43, .1); } } diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md index 14ec94e062..5fd1fce459 100644 --- a/site/content/docs/4.3/components/card.md +++ b/site/content/docs/4.3/components/card.md @@ -379,11 +379,11 @@ Note that content should not be larger than the height of the image. If content ## Horizontal -Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.no-gutters` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. +Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. {{< example >}}
-
+
{{< placeholder width="100%" height="250" text="Image" >}}
@@ -531,83 +531,13 @@ When using card groups with footers, their content will automatically line up.
{{< /example >}} -### Card decks - -Need a set of equal width and height cards that aren't attached to one another? Use card decks. - -{{< example >}} -
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

-
-
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This card has supporting text below as a natural lead-in to additional content.

-

Last updated 3 mins ago

-
-
-
- {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

-

Last updated 3 mins ago

-
-
-
-{{< /example >}} - -Just like with card groups, card footers in decks will automatically line up. - -{{< example >}} -
-
- {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- Last updated 3 mins ago -
-
-
- {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This card has supporting text below as a natural lead-in to additional content.

-
-
- Last updated 3 mins ago -
-
-
- {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} -
-
Card title
-

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

-
-
- Last updated 3 mins ago -
-
-
-{{< /example >}} - ### Grid cards Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up. {{< example >}} -
-
+
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -616,7 +546,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -625,7 +555,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -634,7 +564,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -649,8 +579,8 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout Change it to `.row-cols-3` and you'll see the fourth card wrap. {{< example >}} -
-
+
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -659,7 +589,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -668,7 +598,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -677,7 +607,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -692,8 +622,8 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap. When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass. {{< example >}} -
-
+
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -702,7 +632,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -711,7 +641,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -720,7 +650,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
-
+
{{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
@@ -732,6 +662,49 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
{{< /example >}} +Just like with card groups, card footers will automatically line up. + +{{< example >}} +
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ Last updated 3 mins ago +
+
+
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This card has supporting text below as a natural lead-in to additional content.

+
+
+ Last updated 3 mins ago +
+
+
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

+
+
+ Last updated 3 mins ago +
+
+
+
+{{< /example >}} + ### Masonry In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started. diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md index 940510c922..bc3c606d72 100644 --- a/site/content/docs/4.3/components/navbar.md +++ b/site/content/docs/4.3/components/navbar.md @@ -30,7 +30,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from - `.navbar-brand` for your company, product, or project name. - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns). - `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors. -- `.form-inline` for any form controls and actions. +- Flex and spacing utilities for any form controls and actions. - `.navbar-text` for adding vertically centered strings of text. - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint. @@ -43,9 +43,8 @@ Here's an example of all the sub-components included in a responsive light-theme -
@@ -217,14 +216,14 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap ### Forms -Place various form controls and components within a navbar with `.form-inline`. +Place various form controls and components within a navbar: {{< example >}} @@ -236,28 +235,26 @@ Immediate children elements in `.navbar` use flex layout and will default to `ju {{< /example >}} -Input groups work, too: +Input groups work, too. If your navbar is an entire form, or mostly form, you can use the `
` element as the container and save some HTML. Applies to the option above and below this copy. {{< example >}}
{{< /example >}} @@ -265,12 +262,10 @@ Various buttons are supported as part of these navbar forms, too. This is also a {{< example >}} {{< /example >}} @@ -298,7 +293,7 @@ Mix and match with other components and utilities as needed. @@ -358,7 +353,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
@@ -387,7 +382,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl -
+
@@ -506,7 +501,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
@@ -535,9 +530,8 @@ With a brand name shown on the left and toggler on the right: -
@@ -566,9 +560,8 @@ With a toggler on the left and brand name on the right: Navbar -
diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md index fa27ebea4e..30b569edf1 100644 --- a/site/content/docs/4.3/forms/form-control.md +++ b/site/content/docs/4.3/forms/form-control.md @@ -61,16 +61,18 @@ If you want to have `` elements in your form styled as plain tex {{< /example >}} {{< example >}} -
-
+ +
-
+
- +
+ +
{{< /example >}} diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md index cf5cf6c103..b580be6d39 100644 --- a/site/content/docs/4.3/forms/layout.md +++ b/site/content/docs/4.3/forms/layout.md @@ -40,31 +40,27 @@ Feel free to build your forms however you like, with `
`s, `
`s, or More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. **Requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). {{< example >}} -
-
-
- -
-
- -
+ +
+ +
+
+
{{< /example >}} -## Form row +## Gutters -You may also swap `.row` for `.form-row`, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). +By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). {{< example >}} -
-
-
- -
-
- -
+ +
+ +
+
+
{{< /example >}} @@ -72,43 +68,39 @@ You may also swap `.row` for `.form-row`, a variation of our standard grid row t More complex layouts can also be created with the grid system. {{< example >}} -
-
-
- - -
-
- - -
+ +
+ +
-
+
+ + +
+
-
+
-
-
- - -
-
- - -
-
- - -
+
+ +
-
+
+ + +
+
+ + +
+
- +
+ +
{{< /example >}} @@ -128,20 +122,20 @@ At times, you maybe need to use margin or padding utilities to create that perfe {{< example >}}
-
+
-
+
-
-
+
+
Radios
@@ -165,8 +159,8 @@ At times, you maybe need to use margin or padding utilities to create that perfe
-
-
Checkbox
+
+
Checkbox
@@ -176,11 +170,7 @@ At times, you maybe need to use margin or padding utilities to create that perfe
-
-
- -
-
+ {{< /example >}} @@ -190,19 +180,19 @@ Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `