11 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!26437merge,!22391V4 dev,!22547Finished a new translation for bootstrap,!22143Fix selectable disabled toggle radio buttons,!22598test,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!17021v4
@@ -59,69 +59,6 @@ Responsive variations also exist for `.flex-row` and `.flex-column`.
-`.flex{{ bp.abbr }}-row`
-`.flex{{ bp.abbr }}-column`{% endfor %}
## Auto margins
Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so.
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`.
{% example html %}
<divclass="d-flex flex-nowrap bd-highlight">
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
</div>
{% endexample %}
{% example html %}
<divclass="d-flex flex-wrap bd-highlight">
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
</div>
{% endexample %}
Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`.
{% for bp in site.data.breakpoints %}
-`.flex{{ bp.abbr }}-nowrap`
-`.flex{{ bp.abbr }}-wrap`{% endfor %}
## Justify content
Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`.
...
...
@@ -242,6 +179,68 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so.
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`.
{% example html %}
<divclass="d-flex flex-nowrap bd-highlight">
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
</div>
{% endexample %}
{% example html %}
<divclass="d-flex flex-wrap bd-highlight">
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
<divclass="p-2 bd-highlight">Flex item</div>
</div>
{% endexample %}
Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`.
{% for bp in site.data.breakpoints %}
-`.flex{{ bp.abbr }}-nowrap`
-`.flex{{ bp.abbr }}-wrap`{% endfor %}
## Order
Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed.
