Skip to content

fix(docs): broken links and sync layout docs with Bootstrap's #4261

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2032,7 +2032,7 @@ Released: (2019-02-14)
- **table:** add support for transitions on tbody element
([#1821](https://github.com/bootstrap-vue/bootstrap-vue/issues/1821))
([#2450](https://github.com/bootstrap-vue/bootstrap-vue/issues/2450))
([91514af](https://github.com/bootstrap-vue/bootstrap-vue/commit/91514af))
([91514af](https://github.com/bootstrap-vue/bootstrap-vue/commit/91514af445221286ef0bc55985556d58e3c54fdc))
- **table:** add table row middle click (auxclicked) event
([#2425](https://github.com/bootstrap-vue/bootstrap-vue/issues/2425))
([23250a2](https://github.com/bootstrap-vue/bootstrap-vue/commit/23250a2))
Expand Down Expand Up @@ -2261,7 +2261,7 @@ Released: 2018-04-01
### Bug Fixes v2.0.0-rc.4

- **build:** don't exclude lodash.get
([543c3c2](https://github.com/bootstrap-vue/bootstrap-vue/commit/543c3c2))
([543c3c2](https://github.com/bootstrap-vue/bootstrap-vue/commit/543c3c2f9aeccffb03c571aeea93333774243ab3))
- **card:** pass children instead of default prop to sub-components
([63b35e3](https://github.com/bootstrap-vue/bootstrap-vue/commit/63b35e3))

Expand Down
74 changes: 39 additions & 35 deletions src/components/layout/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ functional layout components.

## How it works

Bootstrap's grid system uses a series of containers, rows, and columns to lay out and align content.
It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the
grid comes together.
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content.
It's built with
[flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

```html
<b-container class="bv-example-row">
Expand All @@ -29,17 +30,18 @@ grid comes together.

The above example creates three equal-width columns on small, medium, large, and extra large devices
using Bootstrap v4's predefined grid classes. Those columns are centered in the page with the parent
.container.

Here's how it works:

- Containers provide a means to center your site's contents. Use `<b-container>` for fixed width or
`<b-container fluid>` for full width.
- Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the
negative margin method on `<b-row>` to ensure all your content is aligned properly down the left
side.
- Content should be placed within `<b-col>` columns, and only columns may be immediate children of
`<b-row>`.
`.container`.

Breaking it down, here's how it works:

- Containers provide a means to center and horizontally pad your site's contents. Use
`<b-container>` for a responsive pixel width or `<b-container fluid>` for `width: 100%` across all
viewport and device sizes.
- Rows are wrappers for columns. Each column has horizontal `padding` (called a gutter) for
controlling the space between them. This `padding` is then counteracted on the rows with negative
margins. This way, all the content in your columns is visually aligned down the left side.
- In a grid layout, content must be placed within columns and only columns may be immediate children
of rows.
- Thanks to flexbox, grid columns without a set width will automatically layout with equal widths.
For example, four instances of `<b-col sm="auto">` will each automatically be 25% wide for small
breakpoints.
Expand All @@ -50,20 +52,21 @@ Here's how it works:
possible 12 per row, at the various breakpoints. So, if you want three equal-width columns at
breakpoint `sm`, you can use `<b-col sm="4">`. the special value `auto` can be used to take up the
remaining available column space in a row.
- Column widths, internally, are set in percentages, so they're always fluid and sized relative to
their parent element.
- Columns have horizontal padding to create the gutters between individual columns, however, you can
remove the margin from `<b-row>` and padding from `<b-col>` by setting the `no-gutters` prop on
`<b-row>`.
- There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small),
small, medium, large, and extra large.
- Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it
(e.g., `<b-col sm="4">` applies to small, medium, large, and extra large devices).
- Column `width`s are set in percentages, so they're always fluid and sized relative to their parent
element.
- Columns have horizontal `padding` to create the gutters between individual columns, however, you
can remove the `margin` from `<b-row>` and `padding` from `<b-col>` by setting the `no-gutters`
prop on `<b-row>`.
- To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint:
all breakpoints (extra small), small, medium, large, and extra large.
- Grid breakpoints are based on minimum width media queries, meaning **they apply to that one
breakpoint and all those above it** (e.g., `<b-col sm="4">` applies to small, medium, large, and
extra large devices, but not the first `xs` breakpoint).
- You can use predefined grid classes or Sass mixins for more semantic markup.

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#9-some-html-elements-cant-be-flex-containers).
[inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).

## Containers `<b-container>`

Expand Down Expand Up @@ -109,7 +112,7 @@ the class `row` applied to it, or - in the case of [forms](/docs/components/form

## Grid options

While Bootstrap uses `ems` or `rems` for defining most sizes, `px`s are used for grid breakpoints
While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints
and container widths. This is because the viewport width is in pixels and does not change with the
[font size](https://drafts.csswg.org/mediaqueries-3/#units).

Expand Down Expand Up @@ -198,8 +201,8 @@ like `<b-col sm="6">`.

### Equal-width columns

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
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.

```html
Expand All @@ -219,15 +222,16 @@ width.
<!-- b-grid-equal-width.vue -->
```

Equal-width columns can be broken into multiple lines, but there is a
[Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items)
that prevents this from working without an explicit flex-basis or border. Our example works thanks
to the border being set; you can do the same with `.col { border: 1px solid transparent; }`.
Alternatively, you can set the flex-basis to the width of the column (e.g.,
`.col { flex: 1 0 50%; }`).
### Equal-width multi-line

Create equal-width columns that span multiple lines by inserting a `.w-100` where you want the
columns to break to a new line. Make the breaks responsive by mixing `.w-100` with some
[responsive display utilities](https://getbootstrap.com/docs/4.3/utilities/display/).

Both these fixes have been documented in a
[reduced test case outside Bootstrap](https://output.jsbin.com/micohor).
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.

```html
<b-container class="bv-example-row">
Expand Down
2 changes: 1 addition & 1 deletion src/components/table/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1932,7 +1932,7 @@ sorts _before_ `z`) or Swedish set `sort-compare-locale="sv"` (in Swedish, `ä`
**Notes:**

- Refer to
[MDN `String.prototype.localeCompare()` documentation](https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)
[MDN `String.prototype.localeCompare()` documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)
for details on the options object property values.
- Refer to
[MDN locales documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)
Expand Down