diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 2245dbe54f..22ba961192 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -12,8 +12,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout **New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets. -
-{{< example >}} +{{< example class="bd-example-row" >}}
@@ -28,7 +27,6 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
{{< /example >}} -
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`. @@ -123,8 +121,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width. -
-{{< example >}} +{{< example class="bd-example-row" >}}
@@ -147,7 +144,6 @@ For example, here are two grid layouts that apply to every device and viewport,
{{< /example >}} -
### Equal-width multi-line @@ -155,8 +151,7 @@ Create equal-width columns that span multiple lines by inserting a `.w-100` wher There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if your target browsers don't fall into the buggy versions. -
-{{< example >}} +{{< example class="bd-example-row" >}}
col
@@ -167,14 +162,12 @@ There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbu
{{< /example >}} -
### Setting one column width Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. -
-{{< example >}} +{{< example class="bd-example-row" >}}
@@ -200,14 +193,12 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
{{< /example >}} -
### Variable width content Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content. -
-{{< example >}} +{{< example class="bd-example-row" >}}
@@ -233,7 +224,6 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
{{< /example >}} -
## Responsive classes @@ -243,8 +233,7 @@ Bootstrap's grid includes five tiers of predefined classes for building complex For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`. -
-{{< example >}} +{{< example class="bd-example-row" >}}
col
@@ -258,14 +247,12 @@ For grids that are the same from the smallest of devices to the largest, use the
{{< /example >}} -
### Stacked to horizontal Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`). -
-{{< example >}} +{{< example class="bd-example-row" >}}
col-sm-8
@@ -278,14 +265,12 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
{{< /example >}} -
### Mix and match Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works. -
-{{< example >}} +{{< example class="bd-example-row" >}}
@@ -307,7 +292,6 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
{{< /example >}} -
### Gutters @@ -330,8 +314,7 @@ Use the responsive `.row-cols-*` classes to quickly set the number of columns th Use these row columns classes to quickly create basic grid layouts or to control your card layouts. -
-{{< example >}} +{{< example class="bd-example-row" >}}
Column
@@ -341,10 +324,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}} -
-
-{{< example >}} +{{< example class="bd-example-row" >}}
Column
@@ -354,10 +335,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}} -
-
-{{< example >}} +{{< example class="bd-example-row" >}}
Column
@@ -367,10 +346,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}} -
-
-{{< example >}} +{{< example class="bd-example-row" >}}
Column
@@ -380,10 +357,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}} -
-
-{{< example >}} +{{< example class="bd-example-row" >}}
Column
@@ -393,7 +368,6 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}} -
You can also use the accompanying Sass mixin, `row-cols()`: @@ -415,8 +389,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns. ** ### Vertical alignment -
-{{< example >}} +{{< example class="bd-example-row bd-example-row-flex-cols" >}}
@@ -453,10 +426,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
{{< /example >}} -
-
-{{< example >}} +{{< example class="bd-example-row bd-example-row-flex-cols" >}}
@@ -471,12 +442,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
{{< /example >}} -
### Horizontal alignment -
-{{< example >}} +{{< example class="bd-example-row" >}}
@@ -520,7 +489,6 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
{{< /example >}} -
### No gutters @@ -545,21 +513,18 @@ Here's the source code for creating these styles. Note that column overrides are In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more). -
-{{< example >}} +{{< example class="bd-example-row" >}}
.col-sm-6 .col-md-8
.col-6 .col-md-4
{{< /example >}} -
### Column wrapping If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. -
-{{< example >}} +{{< example class="bd-example-row" >}}
.col-9
@@ -568,14 +533,12 @@ If more than 12 columns are placed within a single row, each group of extra colu
{{< /example >}} -
### Column breaks Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this. -
-{{< example >}} +{{< example class="bd-example-row" >}}
.col-6 .col-sm-3
@@ -589,12 +552,10 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
{{< /example >}} -
You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}). -
-{{< example >}} +{{< example class="bd-example-row" >}}
.col-6 .col-sm-4
@@ -608,7 +569,6 @@ You may also apply this break at specific breakpoints with our [responsive displ
{{< /example >}} -
## Reordering @@ -616,8 +576,7 @@ You may also apply this break at specific breakpoints with our [responsive displ Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all five grid tiers. -
-{{< example >}} +{{< example class="bd-example-row" >}}
@@ -632,12 +591,10 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
{{< /example >}} -
There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed. -
-{{< example >}} +{{< example class="bd-example-row" >}}
@@ -652,7 +609,6 @@ There are also responsive `.order-first` and `.order-last` classes that change t
{{< /example >}} -
### Offsetting columns @@ -662,8 +618,7 @@ You can offset grid columns in two ways: our responsive `.offset-` grid classes Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns. -
-{{< example >}} +{{< example class="bd-example-row" >}}
.col-md-4
@@ -678,12 +633,10 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
{{< /example >}} -
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}). -
-{{< example >}} +{{< example class="bd-example-row" >}}
.col-sm-5 .col-md-6
@@ -695,14 +648,12 @@ In addition to column clearing at responsive breakpoints, you may need to reset
{{< /example >}} -
#### Margin utilities With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another. -
-{{< example >}} +{{< example class="bd-example-row" >}}
.col-md-4
@@ -718,14 +669,12 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
{{< /example >}} -
## Nesting To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns). -
-{{< example >}} +{{< example class="bd-example-row" >}}
@@ -742,7 +691,6 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
{{< /example >}} -
## Sass mixins diff --git a/site/content/docs/4.3/utilities/borders.md b/site/content/docs/4.3/utilities/borders.md index b2457353fd..8264e77400 100644 --- a/site/content/docs/4.3/utilities/borders.md +++ b/site/content/docs/4.3/utilities/borders.md @@ -12,34 +12,29 @@ Use border utilities to add or remove an element's borders. Choose from all bord ### Additive -
-{{< example >}} +{{< example class="bd-example-border-utils" >}} {{< /example >}} -
### Subtractive -
-{{< example >}} +{{< example class="bd-example-border-utils bd-example-border-utils-0" >}} {{< /example >}} -
## Border color Change the border color using utilities built on our theme colors. -
-{{< example >}} +{{< example class="bd-example-border-utils" >}} {{< border.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -47,7 +42,6 @@ Change the border color using utilities built on our theme colors. {{< /border.inline >}} {{< /example >}} -
## Border-radius