mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Refactor some docs examples CSS (#36194)
* Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
This commit is contained in:
Mark Otto
GitHub
parent
9ec51f4499
commit
e089aef00f
@ -1,83 +1,3 @@
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row {
|
||||
.row {
|
||||
> .col,
|
||||
> [class^="col-"] {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(39, 41, 43, .03);
|
||||
border: 1px solid rgba(39, 41, 43, .1);
|
||||
}
|
||||
}
|
||||
|
||||
.row + .row {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
}
|
||||
|
||||
.bd-example-cssgrid {
|
||||
text-align: center;
|
||||
|
||||
.grid + .grid {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(255, 0, 255, .1);
|
||||
border: 1px solid rgba(255, 0, 255, .25);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-highlight {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
border: 1px solid rgba($bd-purple, .15);
|
||||
}
|
||||
|
||||
// Grid mixins
|
||||
.example-container {
|
||||
width: 800px;
|
||||
@include make-container();
|
||||
}
|
||||
|
||||
.example-row {
|
||||
@include make-row();
|
||||
}
|
||||
|
||||
.example-content-main {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(8);
|
||||
}
|
||||
}
|
||||
|
||||
.example-content-secondary {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Docs examples
|
||||
//
|
||||
@ -92,15 +12,18 @@
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
--bd-example-padding: 1rem;
|
||||
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
padding: var(--bd-example-padding);
|
||||
margin: 0 ($bd-gutter-x * -.5);
|
||||
border: solid $border-color;
|
||||
border-width: 1px 0 0;
|
||||
border-width: 1px 0;
|
||||
@include clearfix();
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 1.5rem;
|
||||
--bd-example-padding: 1.5rem;
|
||||
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
@ -127,7 +50,7 @@
|
||||
> .alert + .alert,
|
||||
> .navbar + .navbar,
|
||||
> .progress + .progress {
|
||||
margin-top: 1rem;
|
||||
margin-top: $spacer;
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
@ -171,30 +94,80 @@
|
||||
.fixed-top,
|
||||
.sticky-top {
|
||||
position: static;
|
||||
margin: -1rem -1rem 1rem;
|
||||
margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
|
||||
.fixed-bottom,
|
||||
.sticky-bottom {
|
||||
position: static;
|
||||
margin: 1rem -1rem -1rem;
|
||||
}
|
||||
margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.fixed-top,
|
||||
.sticky-top {
|
||||
margin: -1.5rem -1.5rem 1rem;
|
||||
}
|
||||
.fixed-bottom,
|
||||
.sticky-bottom {
|
||||
margin: 1rem -1.5rem -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row [class^="col"],
|
||||
.bd-example-cssgrid .grid > * {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(var(--bd-violet-rgb), .1);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .25);
|
||||
}
|
||||
|
||||
.bd-example-row .row + .row,
|
||||
.bd-example-cssgrid .grid + .grid {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
}
|
||||
|
||||
.bd-example-flex div {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
border: 1px solid rgba($bd-purple, .15);
|
||||
}
|
||||
|
||||
// Grid mixins
|
||||
.example-container {
|
||||
width: 800px;
|
||||
@include make-container();
|
||||
}
|
||||
|
||||
.example-row {
|
||||
@include make-row();
|
||||
}
|
||||
|
||||
.example-content-main {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(8);
|
||||
}
|
||||
}
|
||||
|
||||
.example-content-secondary {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
|
||||
@ -224,18 +197,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-modal {
|
||||
background-color: #fafafa;
|
||||
|
||||
.modal {
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-offcanvas {
|
||||
@include border-start-radius(0);
|
||||
|
||||
.offcanvas {
|
||||
position: static;
|
||||
display: block;
|
||||
@ -250,9 +212,11 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// scss-docs-start custom-tooltip
|
||||
.custom-tooltip {
|
||||
--bs-tooltip-bg: var(--bs-primary);
|
||||
}
|
||||
// scss-docs-end custom-tooltip
|
||||
|
||||
// scss-docs-start custom-popovers
|
||||
.custom-popover {
|
||||
@ -290,7 +254,6 @@
|
||||
.active {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bd-example-border-utils {
|
||||
@ -317,7 +280,7 @@
|
||||
|
||||
.bd-example-position-utils {
|
||||
position: relative;
|
||||
padding: 3em;
|
||||
padding: 2rem;
|
||||
|
||||
.position-relative {
|
||||
height: 200px;
|
||||
@ -325,8 +288,8 @@
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: $dark;
|
||||
@include border-radius();
|
||||
}
|
||||
@ -398,6 +361,7 @@
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -38,8 +38,8 @@ Keep reading for demos and usage guidelines.
|
||||
|
||||
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
|
||||
|
||||
<div class="bd-example bd-example-modal">
|
||||
<div class="modal" tabindex="-1">
|
||||
<div class="bd-example bg-light">
|
||||
<div class="modal position-static d-block" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
||||
@ -151,7 +151,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified
|
||||
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
|
||||
|
||||
@ -122,7 +122,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
||||
|
||||
## Alignment
|
||||
|
||||
Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}).
|
||||
Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}). For example, with `.justify-content-center`:
|
||||
|
||||
{{< example >}}
|
||||
<nav aria-label="Page navigation example">
|
||||
@ -140,6 +140,8 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
|
||||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
Or with `.justify-content-end`:
|
||||
|
||||
{{< example >}}
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-end">
|
||||
|
||||
@ -47,10 +47,10 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
|
||||
Hover over the links below to see tooltips:
|
||||
|
||||
<div class="bd-example tooltip-demo">
|
||||
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
|
||||
</p>
|
||||
</div>
|
||||
{{< example class="tooltip-demo" >}}
|
||||
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
|
||||
</p>
|
||||
{{< /example >}}
|
||||
|
||||
### Custom tooltips
|
||||
|
||||
@ -58,11 +58,8 @@ Hover over the links below to see tooltips:
|
||||
|
||||
You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
|
||||
|
||||
```scss
|
||||
.custom-tooltip {
|
||||
--bs-tooltip-bg: var(--bs-primary);
|
||||
}
|
||||
```
|
||||
{{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}}
|
||||
|
||||
|
||||
{{< example class="tooltip-demo" >}}
|
||||
<button type="button" class="btn btn-secondary"
|
||||
|
||||
@ -47,7 +47,7 @@ Compared to the default grid system:
|
||||
|
||||
Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid">
|
||||
<div class="g-col-4">.g-col-4</div>
|
||||
<div class="g-col-4">.g-col-4</div>
|
||||
@ -59,7 +59,7 @@ Three equal-width columns across all viewports and devices can be created by usi
|
||||
|
||||
Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid">
|
||||
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
|
||||
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
|
||||
@ -69,7 +69,7 @@ Use responsive classes to adjust your layout across viewports. Here we start wit
|
||||
|
||||
Compare that to this two column layout at all viewports.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid">
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
@ -80,7 +80,7 @@ Compare that to this two column layout at all viewports.
|
||||
|
||||
Grid items automatically wrap to the next line when there's no more room horizontally. Note that the `gap` applies to horizontal and vertical gaps between grid items.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid">
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
@ -94,7 +94,7 @@ Grid items automatically wrap to the next line when there's no more room horizon
|
||||
|
||||
Start classes aim to replace our default grid's offset classes, but they're not entirely the same. CSS Grid creates a grid template through styles that tell browsers to "start at this column" and "end at this column." Those properties are `grid-column-start` and `grid-column-end`. Start classes are shorthand for the former. Pair them with the column classes to size and align your columns however you need. Start classes begin at `1` as `0` is an invalid value for these properties.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid">
|
||||
<div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
|
||||
<div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
|
||||
@ -105,7 +105,7 @@ Start classes aim to replace our default grid's offset classes, but they're not
|
||||
|
||||
When there are no classes on the grid items (the immediate children of a `.grid`), each grid item will automatically be sized to one column.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid">
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
@ -124,7 +124,7 @@ When there are no classes on the grid items (the immediate children of a `.grid`
|
||||
|
||||
This behavior can be mixed with grid column classes.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid">
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div>1</div>
|
||||
@ -147,7 +147,7 @@ Similar to our default grid system, our CSS Grid allows for easy nesting of `.gr
|
||||
|
||||
In practice this allows for more complex and custom layouts when compared to our default grid system.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid" style="--bs-columns: 3;">
|
||||
<div>
|
||||
First auto-column
|
||||
@ -186,7 +186,7 @@ These CSS variables have no default value; instead, they apply fallback values t
|
||||
|
||||
Immediate children elements of `.grid` are grid items, so they'll be sized without explicitly adding a `.g-col` class.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid" style="--bs-columns: 3;">
|
||||
<div>Auto-column</div>
|
||||
<div>Auto-column</div>
|
||||
@ -198,14 +198,14 @@ Immediate children elements of `.grid` are grid items, so they'll be sized witho
|
||||
|
||||
Adjust the number of columns and the gap.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
|
||||
<div class="g-col-2">.g-col-2</div>
|
||||
<div class="g-col-2">.g-col-2</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-4">.g-col-4</div>
|
||||
@ -216,7 +216,7 @@ Adjust the number of columns and the gap.
|
||||
|
||||
Adding more rows and changing the placement of columns:
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
|
||||
<div>Auto-column</div>
|
||||
<div class="g-start-2" style="grid-row: 2">Auto-column</div>
|
||||
@ -228,7 +228,7 @@ Adding more rows and changing the placement of columns:
|
||||
|
||||
Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid" style="row-gap: 0;">
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
@ -240,7 +240,7 @@ Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap`
|
||||
|
||||
Because of that, you can have different vertical and horizontal `gap`s, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for `gap`, or with our `--bs-gap` CSS variable.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid" style="--bs-gap: .25rem 1rem;">
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
<div class="g-col-6">.g-col-6</div>
|
||||
@ -259,7 +259,7 @@ One limitation of the CSS Grid is that our default classes are still generated b
|
||||
|
||||
For example, you can increase the column count and change the gap size, and then size your "columns" with a mix of inline styles and predefined CSS Grid column classes (e.g., `.g-col-4`).
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
{{< example class="bd-example-cssgrid text-center" >}}
|
||||
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
|
||||
<div style="grid-column: span 14;">14 columns</div>
|
||||
<div class="g-col-4">.g-col-4</div>
|
||||
|
||||
@ -10,12 +10,12 @@ toc: true
|
||||
|
||||
Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-flex p-2">I'm a flexbox container!</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
|
||||
{{< /example >}}
|
||||
|
||||
Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
|
||||
@ -35,31 +35,31 @@ Set the direction of flex items in a flex container with direction utilities. In
|
||||
|
||||
Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex flex-row bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item 1</div>
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
<div class="p-2 bd-highlight">Flex item 3</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-flex flex-row mb-3">
|
||||
<div class="p-2">Flex item 1</div>
|
||||
<div class="p-2">Flex item 2</div>
|
||||
<div class="p-2">Flex item 3</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row-reverse bd-highlight">
|
||||
<div class="p-2 bd-highlight">Flex item 1</div>
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
<div class="p-2 bd-highlight">Flex item 3</div>
|
||||
<div class="d-flex flex-row-reverse">
|
||||
<div class="p-2">Flex item 1</div>
|
||||
<div class="p-2">Flex item 2</div>
|
||||
<div class="p-2">Flex item 3</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex flex-column bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item 1</div>
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
<div class="p-2 bd-highlight">Flex item 3</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-flex flex-column mb-3">
|
||||
<div class="p-2">Flex item 1</div>
|
||||
<div class="p-2">Flex item 2</div>
|
||||
<div class="p-2">Flex item 3</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column-reverse bd-highlight">
|
||||
<div class="p-2 bd-highlight">Flex item 1</div>
|
||||
<div class="p-2 bd-highlight">Flex item 2</div>
|
||||
<div class="p-2 bd-highlight">Flex item 3</div>
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<div class="p-2">Flex item 1</div>
|
||||
<div class="p-2">Flex item 2</div>
|
||||
<div class="p-2">Flex item 3</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -80,36 +80,36 @@ Responsive variations also exist for `flex-direction`.
|
||||
|
||||
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`, `around`, or `evenly`.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex justify-content-start bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex justify-content-start mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex justify-content-end mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex justify-content-center mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-around bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex justify-content-around mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-evenly bd-highlight">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex justify-content-evenly">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -141,31 +141,31 @@ Responsive variations also exist for `justify-content`.
|
||||
|
||||
Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex align-items-start mb-3" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex align-items-end mb-3" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex align-items-center mb-3" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline bd-highlight mb-3" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex align-items-baseline mb-3" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-stretch bd-highlight" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex align-items-stretch" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -195,31 +195,31 @@ Responsive variations also exist for `align-items`.
|
||||
|
||||
Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight mb-3" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="align-self-start p-2 bd-highlight">Aligned flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex mb-3" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="align-self-start p-2">Aligned flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex bd-highlight mb-3" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="align-self-end p-2 bd-highlight">Aligned flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex mb-3" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="align-self-end p-2">Aligned flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex bd-highlight mb-3" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="align-self-center p-2 bd-highlight">Aligned flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex mb-3" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="align-self-center p-2">Aligned flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex bd-highlight mb-3" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="align-self-baseline p-2 bd-highlight">Aligned flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex mb-3" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="align-self-baseline p-2">Aligned flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
<div class="d-flex bd-highlight" style="height: 100px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="align-self-stretch p-2 bd-highlight">Aligned flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex" style="height: 100px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="align-self-stretch p-2">Aligned flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -249,11 +249,11 @@ Responsive variations also exist for `align-self`.
|
||||
|
||||
Use the `.flex-fill` class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex bd-highlight">
|
||||
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
|
||||
<div class="p-2 flex-fill bd-highlight">Flex item</div>
|
||||
<div class="p-2 flex-fill bd-highlight">Flex item</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-flex">
|
||||
<div class="p-2 flex-fill">Flex item with a lot of content</div>
|
||||
<div class="p-2 flex-fill">Flex item</div>
|
||||
<div class="p-2 flex-fill">Flex item</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -271,20 +271,20 @@ Responsive variations also exist for `flex-fill`.
|
||||
|
||||
Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex bd-highlight">
|
||||
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Third flex item</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-flex">
|
||||
<div class="p-2 flex-grow-1">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Third flex item</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex bd-highlight">
|
||||
<div class="p-2 w-100 bd-highlight">Flex item</div>
|
||||
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-flex">
|
||||
<div class="p-2 w-100">Flex item</div>
|
||||
<div class="p-2 flex-shrink-1">Flex item</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -303,23 +303,23 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
|
||||
|
||||
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-flex mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex bd-highlight mb-3">
|
||||
<div class="me-auto p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="me-auto p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex bd-highlight mb-3">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="ms-auto p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="ms-auto p-2">Flex item</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -327,17 +327,17 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
|
||||
|
||||
Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
|
||||
<div class="mb-auto p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
|
||||
<div class="mb-auto p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="mt-auto p-2 bd-highlight">Flex item</div>
|
||||
<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="mt-auto p-2">Flex item</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -345,13 +345,13 @@ Vertically move one flex item to the top or bottom of a container by mixing `ali
|
||||
|
||||
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex flex-nowrap" style="width: 8rem;">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -361,23 +361,23 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-wrap bd-highlight">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex flex-wrap">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -387,23 +387,23 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-wrap-reverse bd-highlight">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex flex-wrap-reverse">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -430,11 +430,11 @@ Responsive variations also exist for `flex-wrap`.
|
||||
|
||||
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 from 0 to 5, add custom CSS for any additional values needed.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-flex flex-nowrap bd-highlight">
|
||||
<div class="order-3 p-2 bd-highlight">First flex item</div>
|
||||
<div class="order-2 p-2 bd-highlight">Second flex item</div>
|
||||
<div class="order-1 p-2 bd-highlight">Third flex item</div>
|
||||
{{< example class="bd-example-flex" >}}
|
||||
<div class="d-flex flex-nowrap">
|
||||
<div class="order-3 p-2">First flex item</div>
|
||||
<div class="order-2 p-2">Second flex item</div>
|
||||
<div class="order-1 p-2">Third flex item</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -468,23 +468,23 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
|
||||
|
||||
**Heads up!** This property has no effect on single rows of flex items.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-content-start flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex align-content-start flex-wrap mb-3" style="height: 200px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -494,23 +494,23 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex align-content-end flex-wrap mb-3" style="height: 200px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -518,23 +518,23 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
|
||||
<div class="d-flex align-content-end flex-wrap">...</div>
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex align-content-center flex-wrap mb-3" style="height: 200px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -542,23 +542,23 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
|
||||
<div class="d-flex align-content-center flex-wrap">...</div>
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex align-content-between flex-wrap mb-3" style="height: 200px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -566,23 +566,23 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
|
||||
<div class="d-flex align-content-between flex-wrap">...</div>
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex align-content-around flex-wrap mb-3" style="height: 200px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -590,23 +590,23 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
|
||||
<div class="d-flex align-content-around flex-wrap">...</div>
|
||||
```
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px">
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="p-2 bd-highlight">Flex item</div>
|
||||
<div class="bd-example bd-example-flex">
|
||||
<div class="d-flex align-content-stretch flex-wrap mb-3" style="height: 200px">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -94,7 +94,7 @@ Here are some real life examples of these classes:
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-dark position-relative">
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user