`. Be sure to escape HTML angle brackets.
+
+{{< example >}}
+For example, <section> should be wrapped as inline.
+{{< /example >}}
+
+## Code blocks
+
+Use ``s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The `` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
+
+{{< example >}}
+<p>Sample text here...</p>
+<p>And another line of sample text here...</p>
+` tag.
+
+{{< example >}}
+y = m x + b
+{{< /example >}}
+
+## User input
+
+Use the `` to indicate input that is typically entered via keyboard.
+
+{{< example >}}
+To switch directories, type cd followed by the name of the directory.Ctrl + , ` tag.
+
+{{< example >}}
+This text is meant to be treated as sample output from a computer program.
+{{< /example >}}
+
+## Tables
+
+Tables are slightly adjusted to style ``s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
+
+{{< example >}}
+
+
+ This is an example table, and this is its caption to describe the contents.
+
+
+
+ Table heading
+ Table heading
+ Table heading
+ Table heading
+
+
+
+
+ Table cell
+ Table cell
+ Table cell
+ Table cell
+
+
+ Table cell
+ Table cell
+ Table cell
+ Table cell
+
+
+ Table cell
+ Table cell
+ Table cell
+ Table cell
+
+
+
+{{< /example >}}
+
+## Forms
+
+Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
+
+- ``s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
+- ``s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
+- ``s are set to `display: inline-block` to allow `margin` to be applied.
+- ``s, `
+
+
+ Example date
+
+
+ Example time
+
+
+ Example password
+
+
+ Example datetime-local
+
+
+ Example week
+
+
+ Example month
+
+
+ Example color
+
+
+ Example output
+ 100
+
+
+ Button submit
+
+
+ Button submit
+
+
+
+
+### Pointers on buttons
+
+Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `` elements, which get their own `cursor` change.
+
+{{< example >}}
+Non-button element button
+{{< /example >}}
+
+## Misc elements
+
+### Address
+
+The `` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. ``s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
+
+ ACME Corporation P: (123) 456-7890
+
+
+
+ Full Name first.last@example.com
+
+
+
+ A well-known quote, contained in a blockquote element.
+
+
Someone famous in Source Title
+
` element receives basic styling to make it stand out amongst paragraph text.
+
+
+ The
HTML abbreviation element.
+
+
+ Some details
+ More info about the details.
+
+
+
+ Even more details
+ Here are even more details about the details.
+
+
` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any ``, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.
+
+Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
+
+{{< table class="table" simplified="false" >}}
+
+## Variants
+
+Use contextual classes to color tables, table rows or individual cells.
+
+{{< callout info >}}
+**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6.
+{{< /callout >}}
+
+
+
+
+
+ Class
+ Heading
+ Heading
+
+
+
+
+ Default
+ Cell
+ Cell
+
+ {{< table.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ {{ .name | title }}
+ Cell
+ Cell
+
+ {{- end -}}
+ {{< /table.inline >}}
+
+
+
...
+{{- end -}}
+{{< /table.inline >}}
+
+
+{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+ ...
+{{- end -}}
+{{< /table.inline >}}
+
+{{< /highlight >}}
+
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
+## Accented tables
+
+### Striped rows
+
+Use `.table-striped` to add zebra-striping to any table row within the ``.
+
+{{< table class="table table-striped" >}}
+
+### Striped columns
+
+Use `.table-striped-columns` to add zebra-striping to any table column.
+
+{{< table class="table table-striped-columns" >}}
+
+These classes can also be added to table variants:
+
+{{< table class="table table-dark table-striped" >}}
+
+{{< table class="table table-dark table-striped-columns" >}}
+
+{{< table class="table table-success table-striped" >}}
+
+{{< table class="table table-success table-striped-columns" >}}
+
+### Hoverable rows
+
+Add `.table-hover` to enable a hover state on table rows within a ` `.
+
+{{< table class="table table-hover" >}}
+
+{{< table class="table table-dark table-hover" >}}
+
+These hoverable rows can also be combined with the striped rows variant:
+
+{{< table class="table table-striped table-hover" >}}
+
+### Active tables
+
+Highlight a table row or cell by adding a `.table-active` class.
+
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+ ...
+
+
+
+ ...
+
+
+ ...
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+```
+
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+ ...
+
+
+
+ ...
+
+
+ ...
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+```
+
+## How do the variants and accented tables work?
+
+For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
+
+- We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
+- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don't have a default box shadow.
+- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
+- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
+- Text and border colors are generated the same way, and their colors are inherited by default.
+
+Behind the scenes it looks like this:
+
+{{< scss-docs name="table-variant" file="scss/mixins/_table-variants.scss" >}}
+
+## Table borders
+
+### Bordered tables
+
+Add `.table-bordered` for borders on all sides of the table and cells.
+
+{{< table class="table table-bordered" >}}
+
+[Border color utilities]({{< docsref "/utilities/borders#border-color" >}}) can be added to change colors:
+
+{{< table class="table table-bordered border-primary" >}}
+
+### Tables without borders
+
+Add `.table-borderless` for a table without borders.
+
+{{< table class="table table-borderless" >}}
+
+{{< table class="table table-dark table-borderless" >}}
+
+## Small tables
+
+Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.
+
+{{< table class="table table-sm" >}}
+
+{{< table class="table table-dark table-sm" >}}
+
+## Table group dividers
+
+Add a thicker border, darker between table groups—``, ` `, and ` `—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time).
+
+{{< example >}}
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+{{< /example >}}
+
+## Vertical alignment
+
+Table cells of `` are always vertical aligned to the bottom. Table cells in ` ` inherit their alignment from `` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
+
+
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+
+
+
+
+ This cell inherits vertical-align: middle; from the table
+ This cell inherits vertical-align: middle; from the table
+ This cell inherits vertical-align: middle; from the table
+ This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
+
+
+ This cell inherits vertical-align: bottom; from the table row
+ This cell inherits vertical-align: bottom; from the table row
+ This cell inherits vertical-align: bottom; from the table row
+ This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
+
+
+ This cell inherits vertical-align: middle; from the table
+ This cell inherits vertical-align: middle; from the table
+ This cell is aligned to the top.
+ This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
+
+
+
+
+
+
+
+
+ ...
+
+
+
+
+ ...
+
+
+ ...
+
+
+ ...
+ ...
+ This cell is aligned to the top.
+ ...
+
+
+
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+
+
+
+
+ Header
+ Header
+ Header
+
+
+
+
+ A
+ First
+ Last
+
+
+ B
+ First
+ Last
+
+
+ C
+ First
+ Last
+
+
+
+
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+ ...
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+```
+
+## How nesting works
+
+To prevent _any_ styles from leaking to nested tables, we use the child combinator (`>`) selector in our CSS. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > *` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables.
+
+Note that if you add ``s as direct children of a table, those ` ` will be wrapped in a ` ` by default, thus making our selectors work as intended.
+
+## Anatomy
+
+### Table head
+
+Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make ``s appear light or dark gray.
+
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+ Footer
+ Footer
+ Footer
+ Footer
+
+
+
+
+
+ ...
+
+
+ ...
+
+
+ ...
+
+
+```
+
+### Captions
+
+A `` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
+
+
+
+ List of users
+ {{< partial "table-content" >}}
+
+
+ List of users
+
+ ...
+
+
+ ...
+
+
+```
+
+You can also put the `` on the top of the table with `.caption-top`.
+
+{{< example >}}
+
+ List of users
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+{{< /example >}}
+
+## Responsive tables
+
+Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
+
+{{< callout warning >}}
+##### Vertical clipping/truncation
+
+Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
+{{< /callout >}}
+
+### Always responsive
+
+Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
+
+
+
+
+
+
+ #
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+
+
+
+
+ 1
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+ 2
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+ 3
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+
+
+
+
+
+
+
+ #
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+
+
+
+
+ 1
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+ 2
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+ 3
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+
+
+
` through ``, are available.
+
+{{< bs-table >}}
+| Heading | Example |
+| --- | --- |
+| `h1. Bootstrap heading |
+| `h2. Bootstrap heading |
+| `h3. Bootstrap heading |
+| `h4. Bootstrap heading |
+| `h5. Bootstrap heading |
+| `h6. Bootstrap heading |
+{{< /bs-table >}}
+
+```html
+h1. Bootstrap heading
+h2. Bootstrap heading
+h3. Bootstrap heading
+h4. Bootstrap heading
+h5. Bootstrap heading
+h6. Bootstrap heading
+```
+
+`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
+
+{{< example >}}
+ h1. Bootstrap heading
+h2. Bootstrap heading
+h3. Bootstrap heading
+h4. Bootstrap heading
+h5. Bootstrap heading
+h6. Bootstrap heading
+{{< /example >}}
+
+### Customizing headings
+
+Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
+
+{{< example >}}
+
+ Fancy display heading
+ With faded secondary text
+
+{{< /example >}}
+
+## Display headings
+
+Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
+
+
+
Display 1
+
Display 2
+
Display 3
+
Display 4
+
Display 5
+
Display 6
+
Display 1
+Display 2
+Display 3
+Display 4
+Display 5
+Display 6
+```
+
+Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
+
+Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`.
+
+{{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
+
+## Lead
+
+Make a paragraph stand out by adding `.lead`.
+
+{{< example >}}
+
+ This is a lead paragraph. It stands out from regular paragraphs.
+
+{{< /example >}}
+
+## Inline text elements
+
+Styling for common inline HTML5 elements.
+
+{{< example >}}
+You can use the mark tag to highlight text.
+This line of text is meant to be treated as deleted text.
+This line of text is meant to be treated as no longer accurate.
+This line of text is meant to be treated as an addition to the document.
+This line of text will render as underlined.
+This line of text is meant to be treated as fine print.
+This line rendered as bold text.
+This line rendered as italicized text.
+{{< /example >}}
+
+Beware that those tags should be used for semantic purpose:
+
+- `` represents text which is marked or highlighted for reference or notation purposes.
+- `` represents side-comments and small print, like copyright and legal text.
+- `` represents element that are no longer relevant or no longer accurate.
+- `` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
+
+If you want to style your text, you should use the following classes instead:
+
+- `.mark` will apply the same styles as ``.
+- `.small` will apply the same styles as ``.
+- `.text-decoration-underline` will apply the same styles as ``.
+- `.text-decoration-line-through` will apply the same styles as ``.
+
+While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance, while `` is mostly for voice, technical terms, etc.
+
+## Text utilities
+
+Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
+
+## Abbreviations
+
+Stylized implementation of HTML's `` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
+
+Add `.initialism` to an abbreviation for a slightly smaller font-size.
+
+{{< example >}}
+attr
+HTML
+{{< /example >}}
+
+## Blockquotes
+
+For quoting blocks of content from another source within your document. Wrap `` around any HTML as the quote.
+
+{{< example >}}
+
+ A well-known quote, contained in a blockquote element.
+
+{{< /example >}}
+
+### Naming a source
+
+The HTML spec requires that blockquote attribution be placed outside the ``. When providing attribution, wrap your `` in a `` and use a `` or a block level element (e.g., ``) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `` as well.
+
+{{< example >}}
+
+
+ A well-known quote, contained in a blockquote element.
+
+
+
+{{< /example >}}
+
+### Alignment
+
+Use text utilities as needed to change the alignment of your blockquote.
+
+{{< example >}}
+
+
+ A well-known quote, contained in a blockquote element.
+
+
+
+{{< /example >}}
+
+{{< example >}}
+
+
+ A well-known quote, contained in a blockquote element.
+
+
+
+{{< /example >}}
+
+## Lists
+
+### Unstyled
+
+Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
+
+{{< example >}}
+
+ This is a list.
+ It appears completely unstyled.
+ Structurally, it's still a list.
+ However, this style only applies to immediate child elements.
+ Nested lists:
+
+ are unaffected by this style
+ will still show a bullet
+ and have appropriate left margin
+
+
+ This may still come in handy in some situations.
+
+{{< /example >}}
+
+### Inline
+
+Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
+
+{{< example >}}
+
+ This is a list item.
+ And another one.
+ But they're displayed inline.
+
+{{< /example >}}
+
+### Description list alignment
+
+Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
+
+{{< example >}}
+
+ Description lists
+ A description list is perfect for defining terms.
+
+ Term
+
+ Definition for the term.
+ And some more placeholder definition text.
+
+
+ Another term
+ This definition is short, so no extra paragraphs or anything.
+
+ Truncated term is truncated
+ This can be useful when space is tight. Adds an ellipsis at the end.
+
+ Nesting
+
+
+ Nested definition list
+ I heard you like definition lists. Let me put a definition list inside your definition list.
+
+
+
+{{< /example >}}
+
+## Responsive font sizes
+
+In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
+
+## CSS
+
+### Sass variables
+
+Headings have some dedicated variables for sizing and spacing.
+
+{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}}
+
+Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables.
+
+{{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
+
+### Sass mixins
+
+There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
diff --git a/gawa/static/bs5/site/content/docs/5.3/customize/color-modes.md b/gawa/static/bs5/site/content/docs/5.3/customize/color-modes.md
new file mode 100644
index 0000000..945d5ec
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/customize/color-modes.md
@@ -0,0 +1,258 @@
+---
+layout: docs
+title: Color modes
+description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
+group: customize
+toc: true
+added: "5.3"
+---
+
+{{< callout >}}
+**Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html).
+{{< /callout >}}
+
+## Dark mode
+
+**Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
+
+Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
+
+## Example
+
+For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
+
+{{< example class="d-flex justify-content-between" >}}
+
+
+
+
+
+
+
+
+
+{{< /example >}}
+
+## How it works
+
+- As shown above, color mode styles are controlled by the `data-bs-theme` attribute. This attribute can be applied to the `` element, or to any other element or Bootstrap component. If applied to the `` element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.
+
+- For each color mode you wish to support, you'll need to add new overrides for the shared global CSS variables. We do this already in our `_root.scss` stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:
+
+ ```scss
+ // Color mode variables in _root.scss
+ @include color-mode(dark) {
+ // CSS variable overrides here...
+ }
+ ```
+
+- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
+
+## Usage
+
+### Enable dark mode
+
+Enable the built in dark color mode across your entire project by adding the `data-bs-theme="dark"` attribute to the `` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]({{< docsref "/getting-started/introduction#quick-start" >}}):
+
+```html
+
+
+
+ Bootstrap demo
+ Hello, world!
+
+
+
+```
+
+Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. [Learn more in the JavaScript section.](#javascript)
+
+### Building with Sass
+
+Our new dark mode option is available to use for all users of Bootstrap, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `$enable-dark-mode` to `false`.
+
+We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
+
+In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and its compiled CSS output.
+
+```scss
+$color-mode-type: data;
+
+@include color-mode(dark) {
+ .element {
+ color: var(--bs-primary-text-emphasis);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+}
+```
+
+Outputs to:
+
+```css
+[data-bs-theme=dark] .element {
+ color: var(--bs-primary-text-emphasis);
+ background-color: var(--bs-primary-bg-subtle);
+}
+```
+
+And when setting to `media-query`:
+
+```scss
+$color-mode-type: media-query;
+
+@include color-mode(dark) {
+ .element {
+ color: var(--bs-primary-text-emphasis);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+}
+```
+
+Outputs to:
+
+```css
+@media (prefers-color-scheme: dark) {
+ .element {
+ color: var(--bs-primary-text-emphasis);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+}
+```
+
+## Custom color modes
+
+While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap's dark mode specific Sass variables, but that's not required for you.
+
+For example, you can create a "blue theme" with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you're using Sass, you can also use Sass's functions within your CSS variable overrides.
+
+{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
+
+
+
Example blue theme
+
Some paragraph text to show how the blue theme might look with written copy.
+
+
+
+
+
+
+
+
+ ...
+
+```
+
+## JavaScript
+
+To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, ``. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode.
+
+Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
+
+{{< example lang="js" show_preview="false" >}}
+{{< js.inline >}}
+{{- readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/js/color-modes.js") -}}
+{{< /js.inline >}}
+{{< /example >}}
+
+## Adding theme colors
+
+Adding a new color in `$theme-colors` is not enough for some of our components like [alerts]({{< docsref "/components/alerts" >}}) and [list groups]({{< docsref "/components/list-group" >}}). New colors must also be defined in `$theme-colors-text`, `$theme-colors-bg-subtle`, and `$theme-colors-border-subtle` for light theme; but also in `$theme-colors-text-dark`, `$theme-colors-bg-subtle-dark`, and `$theme-colors-border-subtle-dark` for dark theme.
+
+This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we'll revisit this setup to reduce the duplication.
+
+```scss
+// Required
+@import "functions";
+@import "variables";
+@import "variables-dark";
+
+// Add a custom color to $theme-colors
+$custom-colors: (
+ "custom-color": #712cf9
+);
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+@import "maps";
+@import "mixins";
+@import "utilities";
+
+// Add a custom color to new theme maps
+
+// Light mode
+$custom-colors-text: ("custom-color": #712cf9);
+$custom-colors-bg-subtle: ("custom-color": #e1d2fe);
+$custom-colors-border-subtle: ("custom-color": #bfa1fc);
+
+$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
+$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
+$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);
+
+// Dark mode
+$custom-colors-text-dark: ("custom-color": #e1d2f2);
+$custom-colors-bg-subtle-dark: ("custom-color": #8951fa);
+$custom-colors-border-subtle-dark: ("custom-color": #e1d2f2);
+
+$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
+$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
+$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);
+
+// Remainder of Bootstrap imports
+@import "root";
+@import "reboot";
+// etc
+```
+
+## CSS
+
+### Variables
+
+Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#building-with-sass) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.
+
+{{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}}
+
+### Sass variables
+
+CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
+
+{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
+
+### Sass mixins
+
+Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details.
+
+{{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}}
diff --git a/gawa/static/bs5/site/content/docs/5.3/customize/color.md b/gawa/static/bs5/site/content/docs/5.3/customize/color.md
new file mode 100644
index 0000000..6a3c323
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/customize/color.md
@@ -0,0 +1,510 @@
+---
+layout: docs
+title: Color
+description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
+group: customize
+toc: true
+---
+
+## Colors
+
+{{< added-in "5.3.0" >}}
+
+Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
+
+Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
+
+{{< callout warning>}}
+**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
+{{< /callout >}}
+
+
+
+
+ Description
+ Swatch
+ Variables
+
+
+
+
+
+ {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-body-color`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-body-bg`
+
+
+
+ {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-secondary-color`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-secondary-bg`
+
+
+
+ {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-tertiary-color`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-tertiary-bg`
+
+
+
+ {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-emphasis-color`
+
+
+
+ {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-border-color`
+
+
+
+ {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-primary`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
+
+
+
+
+
+
+
+ {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
+
+
+
+
+ Text
+
+
+ {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
+
+
+
+
+ {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-success`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
+
+
+
+
+
+
+
+ {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
+
+
+
+
+ Text
+
+
+ {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
+
+
+
+
+ {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-danger`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
+
+
+
+
+
+
+
+ {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
+
+
+
+
+ Text
+
+
+ {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
+
+
+
+
+ {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-warning`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
+
+
+
+
+
+
+
+ {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
+
+
+
+
+ Text
+
+
+ {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
+
+
+
+
+ {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-info`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
+
+
+
+
+
+
+
+ {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
+
+
+
+
+ Text
+
+
+ {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
+
+
+
+
+ {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-light`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
+
+
+
+
+
+
+
+ {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
+
+
+
+
+ Text
+
+
+ {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
+
+
+
+
+ {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
+
+
+
+
+
+ {{< markdown >}}`--bs-dark`
+
+
+
+
+
+
+ {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
+
+
+
+
+
+
+
+ {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
+
+
+
+
+ Text
+
+
+ {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
+
+
+
+
+
+### Using the new colors
+
+These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
+
+{{< example >}}
+
+ Example element with utilities
+
+{{< /example >}}
+
+### Theme colors
+
+We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
+
+
+ {{< theme-colors.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ {{ end -}}
+ {{< /theme-colors.inline >}}
+
+ {{< theme-colors.inline >}}
+ {{- range $color := $.Site.Data.colors }}
+ {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
+
+
+ ${{ $color.name }}
+ {{ $color.hex }}
+
+ {{ range (seq 100 100 900) }}
+
${{ $color.name }}-{{ . }}
+ {{ end }}
+
+ {{ end -}}
+ {{ end -}}
+
+
+
+ $gray-500
+ #adb5bd
+
+ {{- range $.Site.Data.grays }}
+
$gray-{{ .name }}
+ {{ end -}}
+
+ {{< /theme-colors.inline >}}
+
+
+
+ $black
+ #000
+
+
+ $white
+ #fff
+
+
+
+
+ This is a callout. We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes.
+
+
...
+```
+
+In your CSS, you'd have something like the following where the bulk of the styling is done via `.callout`. Then, the unique styles between each variant is controlled via modifier class.
+
+```scss
+// Base class
+.callout {}
+
+// Modifier classes
+.callout-info {}
+.callout-warning {}
+.callout-danger {}
+```
+
+For the callouts, that unique styling is just a `border-left-color`. When you combine that base class with one of those modifier classes, you get your complete component family:
+
+{{< callout info >}}
+**This is an info callout.** Example text to show it in action.
+{{< /callout >}}
+
+{{< callout warning >}}
+**This is a warning callout.** Example text to show it in action.
+{{< /callout >}}
+
+{{< callout danger >}}
+**This is a danger callout.** Example text to show it in action.
+{{< /callout >}}
diff --git a/gawa/static/bs5/site/content/docs/5.3/customize/css-variables.md b/gawa/static/bs5/site/content/docs/5.3/customize/css-variables.md
new file mode 100644
index 0000000..ffb40c0
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/customize/css-variables.md
@@ -0,0 +1,93 @@
+---
+layout: docs
+title: CSS variables
+description: Use Bootstrap's CSS custom properties for fast and forward-looking design and development.
+group: customize
+toc: true
+---
+
+Bootstrap includes many [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping.
+
+**All our custom properties are prefixed with `bs-`** to avoid conflicts with third party CSS.
+
+## Root variables
+
+Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
+
+### Default
+
+These CSS variables are available everywhere, regardless of color mode.
+
+```css
+{{< root.inline >}}
+{{- $css := readFile "dist/css/bootstrap.css" -}}
+{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}}
+
+{{- if (eq (len $match) 0) -}}
+{{- errorf "Got no matches for :root in %q!" $.Page.Path -}}
+{{- end -}}
+
+{{- index $match 0 -}}
+
+{{< /root.inline >}}
+```
+
+### Dark mode
+
+These variables are scoped to our built-in dark mode.
+
+```css
+{{< root.inline >}}
+{{- $css := readFile "dist/css/bootstrap.css" -}}
+{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}}
+{{- if (eq (len $match) 0) -}}
+{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}}
+{{- end -}}
+{{- index $match 0 -}}
+{{< /root.inline >}}
+```
+
+## Component variables
+
+Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
+
+Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). Our [navbars also use CSS variables]({{< docsref "/components/navbar#css" >}}) as of v5.2.0. We're also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]({{< docsref "/layout/css-grid" >}})—with more component usage coming in the future.
+
+Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
+
+## Prefix
+
+Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
+
+Customize the prefix via the `$prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash).
+
+## Examples
+
+CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.
+
+```css
+body {
+ font: 1rem/1.5 var(--bs-font-sans-serif);
+}
+a {
+ color: var(--bs-blue);
+}
+```
+
+## Focus variables
+
+{{< added-in "5.3.0" >}}
+
+Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.
+
+In our Sass, we set default values that can be customized before compiling.
+
+{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
+
+Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`).
+
+{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
+
+## Grid breakpoints
+
+While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript.
diff --git a/gawa/static/bs5/site/content/docs/5.3/customize/optimize.md b/gawa/static/bs5/site/content/docs/5.3/customize/optimize.md
new file mode 100644
index 0000000..2622f88
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/customize/optimize.md
@@ -0,0 +1,92 @@
+---
+layout: docs
+title: Optimize
+description: Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.
+group: customize
+toc: true
+---
+
+## Lean Sass imports
+
+When using Sass in your asset pipeline, make sure you optimize Bootstrap by only `@import`ing the components you need. Your largest optimizations will likely come from the `Layout & Components` section of our `bootstrap.scss`.
+
+{{< scss-docs name="import-stack" file="scss/bootstrap.scss" >}}
+
+
+If you're not using a component, comment it out or delete it entirely. For example, if you're not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file.
+
+## Lean JavaScript
+
+Bootstrap's JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you're customizing via Sass, be sure to remove related JavaScript.
+
+For instance, assuming you're using your own JavaScript bundler like Webpack, Parcel, or Vite, you'd only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript:
+
+
+```js
+// Import just what we need
+
+// import 'bootstrap/js/dist/alert';
+// import 'bootstrap/js/dist/button';
+// import 'bootstrap/js/dist/carousel';
+// import 'bootstrap/js/dist/collapse';
+// import 'bootstrap/js/dist/dropdown';
+import 'bootstrap/js/dist/modal';
+// import 'bootstrap/js/dist/offcanvas';
+// import 'bootstrap/js/dist/popover';
+// import 'bootstrap/js/dist/scrollspy';
+// import 'bootstrap/js/dist/tab';
+// import 'bootstrap/js/dist/toast';
+// import 'bootstrap/js/dist/tooltip';
+```
+
+This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file.
+
+{{< callout info >}}
+**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following:
+
+
+```js
+import Modal from 'bootstrap/js/dist/modal'
+const modal = new Modal(document.getElementById('myModal'))
+```
+{{< /callout >}}
+
+## Autoprefixer .browserslistrc
+
+Bootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our `.browserslistrc` file, found in the root of the Bootstrap repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version.
+
+## Unused CSS
+
+_Help wanted with this section, please consider opening a PR. Thanks!_
+
+While we don't have a prebuilt example for using [PurgeCSS](https://github.com/FullHuman/purgecss) with Bootstrap, there are some helpful articles and walkthroughs that the community has written. Here are some options:
+
+-
+- CSP configurations**, we've documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.
+
+- [Accordion]({{< docsref "/components/accordion" >}})
+- [Carousel controls]({{< docsref "/components/carousel#with-controls" >}})
+- [Close button]({{< docsref "/components/close-button" >}}) (used in alerts and modals)
+- [Form checkboxes and radio buttons]({{< docsref "/forms/checks-radios" >}})
+- [Form switches]({{< docsref "/forms/checks-radios#switches" >}})
+- [Form validation icons]({{< docsref "/forms/validation#server-side" >}})
+- [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}})
+- [Select menus]({{< docsref "/forms/select" >}})
+
+Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]({{< docsref "/getting-started/webpack#extracting-svg-files" >}}), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
diff --git a/gawa/static/bs5/site/content/docs/5.3/customize/sass.md b/gawa/static/bs5/site/content/docs/5.3/customize/sass.md
new file mode 100644
index 0000000..6da6bbe
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/customize/sass.md
@@ -0,0 +1,314 @@
+---
+layout: docs
+title: Sass
+description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
+group: customize
+toc: true
+---
+
+Utilize our source Sass files to take advantage of variables, maps, mixins, and more.
+
+## File structure
+
+Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
+
+```text
+your-project/
+├── scss
+│ └── custom.scss
+└── node_modules/
+ └── bootstrap
+ ├── js
+ └── scss
+```
+
+If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping Bootstrap's source files separate from your own.
+
+```text
+your-project/
+├── scss
+│ └── custom.scss
+└── bootstrap/
+ ├── js
+ └── scss
+```
+
+## Importing
+
+In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
+
+```scss
+// Custom.scss
+// Option A: Include all of Bootstrap
+
+// Include any default variable overrides here (though functions won't be available)
+
+@import "../node_modules/bootstrap/scss/bootstrap";
+
+// Then add additional custom code here
+```
+
+```scss
+// Custom.scss
+// Option B: Include parts of Bootstrap
+
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "../node_modules/bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+
+// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
+
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/root";
+
+// 6. Optionally include any other parts as needed
+@import "../node_modules/bootstrap/scss/utilities";
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+@import "../node_modules/bootstrap/scss/images";
+@import "../node_modules/bootstrap/scss/containers";
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/helpers";
+
+// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "../node_modules/bootstrap/scss/utilities/api";
+
+// 8. Add additional custom code here
+```
+
+With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
+
+## Variable defaults
+
+Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
+
+You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration.
+
+Variable overrides must come after our functions are imported, but before the rest of the imports.
+
+Here's an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm:
+
+```scss
+// Required
+@import "../node_modules/bootstrap/scss/functions";
+
+// Default variable overrides
+$body-bg: #000;
+$body-color: #111;
+
+// Required
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/root";
+
+// Optional Bootstrap components here
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+// etc
+```
+
+Repeat as necessary for any variable in Bootstrap, including the global options below.
+
+{{< callout info >}}
+{{< partial "callouts/info-npm-starter.md" >}}
+{{< /callout >}}
+
+## Maps and loops
+
+Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended.
+
+Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult.
+
+### Modify map
+
+All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
+
+```scss
+$primary: #0074d9;
+$danger: #ff4136;
+```
+
+Later on, these variables are set in Bootstrap's `$theme-colors` map:
+
+```scss
+$theme-colors: (
+ "primary": $primary,
+ "danger": $danger
+);
+```
+
+### Add to map
+
+Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.
+
+```scss
+// Create your own map
+$custom-colors: (
+ "custom-color": #900
+);
+
+// Merge the maps
+$theme-colors: map-merge($theme-colors, $custom-colors);
+```
+
+### Remove from map
+
+To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert `$theme-colors` between our requirements just after its definition in `variables` and before its usage in `maps`:
+
+```scss
+// Required
+@import "../node_modules/bootstrap/scss/functions";
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
+
+$theme-colors: map-remove($theme-colors, "info", "light", "dark");
+
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/root";
+
+// Optional
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+// etc
+```
+
+## Required keys
+
+Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used.
+
+For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that makes use of those values.
+
+## Functions
+
+### Colors
+
+Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`.
+
+```scss
+.custom-element {
+ color: $gray-100;
+ background-color: $dark;
+}
+```
+
+You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
+
+{{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
+
+In practice, you'd call the function and pass in the color and weight parameters.
+
+```scss
+.custom-element {
+ color: tint-color($primary, 10%);
+}
+
+.custom-element-2 {
+ color: shade-color($danger, 30%);
+}
+```
+
+### Color contrast
+
+In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions.
+
+To help with this, we included the `color-contrast` function in Bootstrap. It uses the [WCAG contrast ratio algorithm](https://www.w3.org/TR/WCAG/#dfn-contrast-ratio) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/TR/WCAG/#dfn-relative-luminance) in an `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
+
+For example, to generate color swatches from our `$theme-colors` map:
+
+```scss
+@each $color, $value in $theme-colors {
+ .swatch-#{$color} {
+ color: color-contrast($value);
+ }
+}
+```
+
+It can also be used for one-off contrast needs:
+
+```scss
+.custom-element {
+ color: color-contrast(#000); // returns `color: #fff`
+}
+```
+
+You can also specify a base color with our color map functions:
+
+```scss
+.custom-element {
+ color: color-contrast($dark); // returns `color: #fff`
+}
+```
+
+### Escape SVG
+
+We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. When using the `escape-svg` function, data URIs must be quoted.
+
+### Add and Subtract functions
+
+We use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a "unitless" `0` value is passed into a `calc` expression. Expressions like `calc(10px - 0)` will return an error in all browsers, despite being mathematically correct.
+
+Example where the calc is valid:
+
+```scss
+$border-radius: .25rem;
+$border-width: 1px;
+
+.element {
+ // Output calc(.25rem - 1px) is valid
+ border-radius: calc($border-radius - $border-width);
+}
+
+.element {
+ // Output the same calc(.25rem - 1px) as above
+ border-radius: subtract($border-radius, $border-width);
+}
+```
+
+Example where the calc is invalid:
+
+```scss
+$border-radius: .25rem;
+$border-width: 0;
+
+.element {
+ // Output calc(.25rem - 0) is invalid
+ border-radius: calc($border-radius - $border-width);
+}
+
+.element {
+ // Output .25rem
+ border-radius: subtract($border-radius, $border-width);
+}
+```
+
+## Mixins
+
+Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.
+
+### Color schemes
+
+A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
+
+{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
+
+```scss
+.custom-element {
+ @include color-scheme(dark) {
+ // Insert dark mode styles here
+ }
+
+ @include color-scheme(custom-named-scheme) {
+ // Insert custom color scheme styles here
+ }
+}
+```
diff --git a/gawa/static/bs5/site/content/docs/5.3/docsref.md b/gawa/static/bs5/site/content/docs/5.3/docsref.md
new file mode 100644
index 0000000..d0fc42f
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/docsref.md
@@ -0,0 +1,49 @@
+---
+layout: docs
+title: Docs reference
+description: Examples of Bootstrap's documentation-specific components and styles.
+aliases: "/docsref/"
+toc: true
+robots: noindex,follow
+sitemap_exclude: true
+---
+
+## Buttons
+
+Primary button
+Accent button
+Light button
+
+## Callouts
+
+{{< callout >}}
+ Default callout
+{{< /callout >}}
+
+{{< callout warning >}}
+ Warning callout
+{{< /callout >}}
+
+{{< callout danger >}}
+ Danger callout
+{{< /callout >}}
+
+## Code example
+
+```scss
+.test {
+ --color: blue;
+}
+```
+
+
+ The
HTML abbreviation element.
+
This is a test.
+{{< /example >}}
+
+{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
+
+{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/_index.md b/gawa/static/bs5/site/content/docs/5.3/examples/_index.md
new file mode 100644
index 0000000..c3c2423
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/_index.md
@@ -0,0 +1,66 @@
+---
+layout: single
+title: Examples
+description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
+aliases: "/examples/"
+---
+
+{{< list-examples.inline >}}
+{{ range $entry := $.Site.Data.examples -}}
+
+
{{ $entry.category }}
+
{{ $entry.description }}
+ {{ if eq $entry.category "RTL" -}}
+
+
+ RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest?
+
+
Please open an issue.
+
+ {{ end -}}
+ {{ range $i, $example := $entry.examples -}}
+ {{- $len := len $entry.examples -}}
+ {{ if (eq $i 0) }}
{{ end }}
+ {{ if $entry.external }}
+
+
+
+
+
{{ $example.description }}
+
+ {{- $indexPath := "index.html" -}}
+ {{- if $example.indexPath -}}
+ {{- $indexPath = $example.indexPath -}}
+ {{- end }}
+
+
+
+
+
+ {{ else }}
+
+ {{ end }}
+ {{ if (eq (add $i 1) $len) }}
{{ end }}
+ {{ end -}}
+
+
+
+
+
+
مثال الألبوم
+
وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.
+
+ الدعوة الرئيسية للعمل
+ عمل ثانوي
+
+
+
+
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+ عرض
+ تعديل
+
+
9 دقائق
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+ عرض
+ تعديل
+
+
9 دقائق
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+ عرض
+ تعديل
+
+
9 دقائق
+
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+ عرض
+ تعديل
+
+
9 دقائق
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+ عرض
+ تعديل
+
+
9 دقائق
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+ عرض
+ تعديل
+
+
9 دقائق
+
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+ عرض
+ تعديل
+
+
9 دقائق
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+ عرض
+ تعديل
+
+
9 دقائق
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
+
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
+
+ عرض
+ تعديل
+
+
9 دقائق
+
+
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/album/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/album/index.html
new file mode 100644
index 0000000..54b2c5b
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/album/index.html
@@ -0,0 +1,208 @@
+---
+layout: examples
+title: Album example
+---
+
+
+
+
+
+
+
+
+
Album example
+
Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
+
+ Main call to action
+ Secondary action
+
+
+
+
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+ View
+ Edit
+
+
9 mins
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+ View
+ Edit
+
+
9 mins
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+ View
+ Edit
+
+
9 mins
+
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+ View
+ Edit
+
+
9 mins
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+ View
+ Edit
+
+
9 mins
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+ View
+ Edit
+
+
9 mins
+
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+ View
+ Edit
+
+
9 mins
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+ View
+ Edit
+
+
9 mins
+
+
+
+
+
+
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
+
+
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+ View
+ Edit
+
+
9 mins
+
+
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/badges/badges.css b/gawa/static/bs5/site/content/docs/5.3/examples/badges/badges.css
new file mode 100644
index 0000000..b6ce0f5
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/badges/badges.css
@@ -0,0 +1,3 @@
+.badge > a {
+ color: inherit;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/badges/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/badges/index.html
new file mode 100644
index 0000000..a452d36
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/badges/index.html
@@ -0,0 +1,149 @@
+---
+layout: examples
+title: Badges
+extra_css:
+ - "badges.css"
+body_class: ""
+---
+
+
+
+
+
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Primary
+
+
+ Primary
+
+
+ Primary
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
عنوان تدوينة مميزة أطول
+
عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.
+
أكمل القراءة...
+
+
+
+
+
+
العالم
+
مشاركة مميزة
+
نوفمبر 12
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
+
+ أكمل القراءة
+
+
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
+
+
+
+
+
+
+
التصميم
+
عنوان الوظيفة
+
نوفمبر 11
+
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
+
+ أكمل القراءة
+
+
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
+
+
+
+
+
+
+ من Firehose
+
+
+
+ مثال على تدوينة
+ 1 يناير 2021 بواسطة Mark
+
+ تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.
+ يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.
+
+ تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية
+
+ تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.
+ عنوان
+ تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!
+ عنوان فرعي
+ ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.
+ Example code blockوخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.
+ عنوان فرعي
+ بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.
+ يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:
+
+ البروتينات
+ الكربوهيدرات
+ الدهون
+
+ وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:
+
+ الكربون
+ الهيدروجين
+ الأكسجين
+ النيتروجين
+
+ ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.
+
+
+
+ تدوينة أخرى
+ 23 ديسمبر 2020 بواسطة Jacob
+
+ في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.
+
+ تم تصنيع اللحوم بأنواع عديدة
+
+ إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.
+ وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.
+
+
+
+ ميزة جديدة
+ 14 ديسمبر 2020 بواسطة Jacob
+
+ كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).
+ وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.
+ وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:
+
+ توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء
+ تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة
+ تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م
+
+ فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!
+
+
+
+
+
+
+
+
+
+
حول
+
أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.
+
+
+
+
+
+
+
+
+
+
+
+
+ تم تصميم نموذج المدونة لـ Bootstrap بواسطة @mdo
+
+ عد إلى الأعلى
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/blog/blog.css b/gawa/static/bs5/site/content/docs/5.3/examples/blog/blog.css
new file mode 100644
index 0000000..ddbca5a
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/blog/blog.css
@@ -0,0 +1,39 @@
+/* stylelint-disable stylistic/selector-list-comma-newline-after */
+
+.blog-header-logo {
+ font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+ font-size: 2.25rem;
+}
+
+.blog-header-logo:hover {
+ text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+}
+
+.flex-auto {
+ flex: 0 0 auto;
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+ .h-md-250 { height: 250px; }
+}
+
+/* Pagination */
+.blog-pagination {
+ margin-bottom: 4rem;
+}
+
+/*
+ * Blog posts
+ */
+.blog-post {
+ margin-bottom: 4rem;
+}
+.blog-post-meta {
+ margin-bottom: 1.25rem;
+ color: #727272;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/blog/blog.rtl.css b/gawa/static/bs5/site/content/docs/5.3/examples/blog/blog.rtl.css
new file mode 100644
index 0000000..043d4e6
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/blog/blog.rtl.css
@@ -0,0 +1,39 @@
+/* stylelint-disable stylistic/selector-list-comma-newline-after */
+
+.blog-header-logo {
+ font-family: Amiri, Georgia, "Times New Roman", serif;
+ font-size: 2.25rem;
+}
+
+.blog-header-logo:hover {
+ text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: Amiri, Georgia, "Times New Roman", serif;
+}
+
+.flex-auto {
+ flex: 0 0 auto;
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+ .h-md-250 { height: 250px; }
+}
+
+/* Pagination */
+.blog-pagination {
+ margin-bottom: 4rem;
+}
+
+/*
+ * Blog posts
+ */
+.blog-post {
+ margin-bottom: 4rem;
+}
+.blog-post-meta {
+ margin-bottom: 1.25rem;
+ color: #727272;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/blog/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/blog/index.html
new file mode 100644
index 0000000..d0d6f08
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/blog/index.html
@@ -0,0 +1,309 @@
+---
+layout: examples
+title: Blog Template
+extra_css:
+ - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
+ - "blog.css"
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Title of a longer featured blog post
+
Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.
+
Continue reading...
+
+
+
+
+
+
World
+
Featured post
+
Nov 12
+
This is a wider card with supporting text below as a natural lead-in to additional content.
+
+ Continue reading
+
+
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
+
+
+
+
+
+
+
Design
+
Post title
+
Nov 11
+
This is a wider card with supporting text below as a natural lead-in to additional content.
+
+ Continue reading
+
+
+
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
+
+
+
+
+
+
+ From the Firehose
+
+
+
+ Sample blog post
+ January 1, 2021 by Mark
+
+ This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.
+ This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+ Blockquotes
+ This is an example blockquote in action:
+
+ Quoted text goes here.
+
+ This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+ Example lists
+ This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:
+
+ First list item
+ Second list item with a longer description
+ Third list item to close it out
+
+ And this is an ordered list:
+
+ First list item
+ Second list item with a longer description
+ Third list item to close it out
+
+ And this is a definition list:
+
+ HyperText Markup Language (HTML)
+ The language used to describe and define the content of a Web page
+ Cascading Style Sheets (CSS)
+ Used to describe the appearance of Web content
+ JavaScript (JS)
+ The programming language used to build advanced Web sites and applications
+
+ Inline HTML elements
+ HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network .
+
+ To bold text , use <strong>.To italicize text , use <em>.Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
+ Citations, like — Mark Otto , should use <cite>.
+ Deleted text should use <del> and inserted text should use <ins>.Superscript text uses <sup> and subscript text uses <sub>.
+
+ Most of these elements are styled by browsers with few modifications on our part.
+ Heading
+ This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+ Sub-heading
+ This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+ Example code blockThis is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.
+
+
+
+ Another blog post
+ December 23, 2020 by Jacob
+
+ This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+
+ Longer quote goes here, maybe with some emphasized text in the middle of it.
+
+ This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+ Example table
+ And don't forget about tables in these posts:
+
+
+
+ Name
+ Upvotes
+ Downvotes
+
+
+
+
+ Alice
+ 10
+ 11
+
+
+ Bob
+ 4
+ 3
+
+
+ Charlie
+ 7
+ 9
+
+
+
+
+ Totals
+ 21
+ 23
+
+
+
+
+ This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.
+
+
+
+ New feature
+ December 14, 2020 by Chris
+
+ This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.
+
+ First list item
+ Second list item with a longer description
+ Third list item to close it out
+
+ This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.
+
+
+
+
+
+
+
+
+
+
About
+
Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.
+
+
+
+
+
+
+
+
+
+
+
+
+ Blog template built for Bootstrap by @mdo .
+
+ Back to top
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css b/gawa/static/bs5/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css
new file mode 100644
index 0000000..a6be558
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/breadcrumbs/breadcrumbs.css
@@ -0,0 +1,50 @@
+.breadcrumb-chevron {
+ --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+ gap: .5rem;
+}
+.breadcrumb-chevron .breadcrumb-item {
+ display: flex;
+ gap: inherit;
+ align-items: center;
+ padding-left: 0;
+ line-height: 1;
+}
+.breadcrumb-chevron .breadcrumb-item::before {
+ gap: inherit;
+ float: none;
+ width: 1rem;
+ height: 1rem;
+}
+
+.breadcrumb-custom .breadcrumb-item {
+ position: relative;
+ flex-grow: 1;
+ padding: .75rem 3rem;
+}
+.breadcrumb-custom .breadcrumb-item::before {
+ display: none;
+}
+.breadcrumb-custom .breadcrumb-item::after {
+ position: absolute;
+ top: 50%;
+ right: -25px;
+ z-index: 1;
+ display: inline-block;
+ width: 50px;
+ height: 50px;
+ margin-top: -25px;
+ content: "";
+ background-color: var(--bs-tertiary-bg);
+ border-top-right-radius: .5rem;
+ box-shadow: 1px -1px var(--bs-border-color);
+ transform: scale(.707) rotate(45deg);
+}
+.breadcrumb-custom .breadcrumb-item:first-child {
+ padding-left: 1.5rem;
+}
+.breadcrumb-custom .breadcrumb-item:last-child {
+ padding-right: 1.5rem;
+}
+.breadcrumb-custom .breadcrumb-item:last-child::after {
+ display: none;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/breadcrumbs/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/breadcrumbs/index.html
new file mode 100644
index 0000000..2d90962
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/breadcrumbs/index.html
@@ -0,0 +1,88 @@
+---
+layout: examples
+title: Breadcrumbs
+extra_css:
+ - "breadcrumbs.css"
+body_class: ""
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/buttons/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/buttons/index.html
new file mode 100644
index 0000000..f1b5ea6
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/buttons/index.html
@@ -0,0 +1,88 @@
+---
+layout: examples
+title: Buttons
+body_class: ""
+---
+
+
+
+
+
+
+
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+ Link
+
+
+
+
+
+
+ Secondary action
+ Primary action
+
+
+
+
+
+ Primary icon
+
+
+ Secondary icon
+
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+
+
+ Dismiss
+
+
+ Dismiss
+
+
+
+
+
+ Dismiss
+
+
+ Dismiss
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/carousel-rtl/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/carousel-rtl/index.html
new file mode 100644
index 0000000..db184d7
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/carousel-rtl/index.html
@@ -0,0 +1,167 @@
+---
+layout: examples
+title: قالب شرائح العرض
+direction: rtl
+extra_css:
+ - "../carousel/carousel.rtl.css"
+---
+
+
+
+
+
+
+
+
+
+
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+
+
+
عنوان المثال.
+
تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.
+
سجل اليوم
+
+
+
+
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+
+
+
عنوان مثال آخر.
+
حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.
+
أعرف أكثر
+
+
+
+
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+
+
+
واحد أكثر لقياس جيد.
+
الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.
+
تصفح المعرض
+
+
+
+
+
+ السابق
+
+
+ التالي
+
+
+
+
+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+
عنوان
+
تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.
+
عرض التفاصيل
+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+
عنوان آخر
+
إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.
+
عرض التفاصيل
+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+
عنوان ثالث لتأكيد المعلومة
+
بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.
+
عرض التفاصيل
+
+
+
+
+
+
+
+
+
+
+
العنوان الأول المميز. سيذهل عقلك.
+
وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.
+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+
+
+
+
+
+
+
+
أوه نعم، هذا جيد. شاهد بنفسك.
+
عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.
+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+
+
+
+
+
+
+
+
وأخيرًا، هذا. كش ملك.
+
إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ
+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/carousel/carousel.css b/gawa/static/bs5/site/content/docs/5.3/examples/carousel/carousel.css
new file mode 100644
index 0000000..be0af52
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/carousel/carousel.css
@@ -0,0 +1,82 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ color: rgb(var(--bs-tertiary-color-rgb));
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+ margin-bottom: 4rem;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+ bottom: 3rem;
+ z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel-item {
+ height: 32rem;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+ margin-bottom: 1.5rem;
+ text-align: center;
+}
+/* rtl:begin:ignore */
+.marketing .col-lg-4 p {
+ margin-right: .75rem;
+ margin-left: .75rem;
+}
+/* rtl:end:ignore */
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+ margin: 5rem 0; /* Space out the Bootstrap
+
+
+
+
+
+
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+
+
+
Example headline.
+
Some representative placeholder content for the first slide of the carousel.
+
Sign up today
+
+
+
+
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+
+
+
Another example headline.
+
Some representative placeholder content for the second slide of the carousel.
+
Learn more
+
+
+
+
+ {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
+
+
+
One more for good measure.
+
Some representative placeholder content for the third slide of this carousel.
+
Browse gallery
+
+
+
+
+
+ Previous
+
+
+ Next
+
+
+
+
+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+
Heading
+
Some representative placeholder content for the three columns of text below the carousel. This is the first column.
+
View details »
+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+
Heading
+
Another exciting bit of representative placeholder content. This time, we've moved on to the second column.
+
View details »
+
+
+ {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
+
Heading
+
And lastly this, the third column of representative placeholder content.
+
View details »
+
+
+
+
+
+
+
+
+
+
+
First featurette heading. It’ll blow your mind.
+
Some great placeholder content for the first featurette here. Imagine some exciting prose here.
+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+
+
+
+
+
+
+
+
Oh yeah, it’s that good. See for yourself.
+
Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.
+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+
+
+
+
+
+
+
+
And lastly, this one. Checkmate.
+
And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.
+
+
+ {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
+
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/cheatsheet-rtl/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
new file mode 100644
index 0000000..8ffbb57
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
@@ -0,0 +1,1622 @@
+---
+layout: examples
+title: ورقة الغش
+extra_css:
+ - "../cheatsheet/cheatsheet.rtl.css"
+extra_js:
+ - src: "../cheatsheet/cheatsheet.js"
+body_class: "bg-body-tertiary"
+direction: rtl
+---
+
+
+
+ على هذه الصفحة
+
+
+
+ المحتوى
+
+
+
+ النماذج
+
+
+
+ مكونات
+
+
+
+
+
+
+
+ المحتوى
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
العرض 1
+
العرض 2
+
العرض 3
+
العرض 4
+
العرض 5
+
العرض 6
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
عنوان 1
+
عنوان 2
+
عنوان 3
+
عنوان 4
+
عنوان 5
+
عنوان 6
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
يمكنك استخدام تصنيف mark لتحديد نص.
+
من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.
+
من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.
+
من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.
+
سيتم عرض النص في هذا السطر كما وتحته خط.
+
من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.
+
هذا السطر يحوي نص عريض.
+
هذا السطر يحوي نص مائل.
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ إقتباس مبهر، موضوع في عنصر blockquote
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ هذه قائمة عناصر.
+ بالرغم من أنها مصممة كي لا تظهر كذلك.
+ إلا أنها مجهزة كـ قائمة خلف الكواليس
+ هذا التصميم ينطبق فقد على القائمة الرئيسية
+ القوائم الفرعية
+
+ لا تتأثر بهذا التصميم
+ فهي تظهر عليها علامات الترقيم
+ وتحتوي على مساحة فارغة بجوارها
+
+
+ قد يكون هذا التصميم مفيدًا في بعض الأحيان.
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ هذا عنصر في قائمة.
+ وهذا أيضًا.
+ لكنهم يظهرون متجاورين.
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+ {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" >}}
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ {{< placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" >}}
+ {{< /example >}}
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+ #
+ الاسم الاول
+ الكنية
+ الاسم المستعار
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ #
+ الاسم الاول
+ الكنية
+ الاسم المستعار
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ Class
+ عنوان
+ عنوان
+
+
+
+
+ Default
+ خلية
+ خلية
+
+ {{< table.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ {{ .name | title }}
+ خلية
+ خلية
+
+ {{- end -}}
+ {{< /table.inline >}}
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ #
+ الاسم الاول
+ الكنية
+ الاسم المستعار
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
+ شرح للصورة أعلاه.
+
+ {{< /example >}}
+
+
+
+
+
+
+
+ العناصر
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+
+
+ هذا هو محتوى عنصر المطوية الأول. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
+
+
+
+
+
+
+
+ هذا هو محتوى عنصر المطوية الثاني. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
+
+
+
+
+
+
+
+ هذا هو محتوى عنصر المطوية الثالث. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
+
+
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+ {{< alerts.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ تنبيه {{ .name }} بسيط مع
رابط مثال . أعطها نقرة إذا أردت.
+
+
{{ end -}}
+ {{< /alerts.inline >}}
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
أحسنت!
+
لقد نجحت في قراءة رسالة التنبيه المهمة هذه. سيتم تشغيل نص المثال هذا لفترة أطول قليلاً حتى تتمكن من رؤية كيفية عمل التباعد داخل التنبيه مع هذا النوع من المحتوى.
+
+
كلما احتجت إلى ذلك ، تأكد من استخدام أدوات الهامش للحفاظ على الأشياء لطيفة ومرتبة.
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
مثال على عنوان جديد
+
مثال على عنوان جديد
+
مثال على عنوان جديد
+
مثال على عنوان جديد
+
مثال على عنوان جديد
+
مثال على عنوان جديد
+
مثال على عنوان جديد
+
مثال على عنوان جديد
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ {{< badge.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
{{ .name | title }} {{- end -}}
+ {{< /badge.inline >}}
+ {{< /example >}}
+
+
+
+
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+ {{< buttons.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+ {{ .name | title }}
+ {{- end -}}
+ {{< /buttons.inline >}}
+
+ رابط
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ {{< buttons.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+ {{ .name | title }}
+ {{- end -}}
+ {{< /buttons.inline >}}
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ زر صغير
+ زر قياسي
+ زر كبير
+ {{< /example >}}
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" >}}
+
+
عنوان البطاقة
+
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
+
اذهب لمكان ما
+
+
+
+
+
+
+
+
عنوان البطاقة
+
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
+
اذهب لمكان ما
+
+
+ منذ يومان
+
+
+
+
+
+
+
عنوان البطاقة
+
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
+
+
+ عنصر
+ عنصر آخر
+ عنصر ثالث
+
+
+
+
+
+
+
+
+ {{< placeholder width="100%" height="250" text="صورة" >}}
+
+
+
+
عنوان البطاقة
+
هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
+
آخر تحديث منذ 3 دقائق
+
+
+
+
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+
+
+ {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" >}}
+
+
عنوان الشريحة الأولى
+
محتوى وصفي يعبئ فراغ الشريحة الأولى.
+
+
+
+ {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="الشريحة الثانية" >}}
+
+
عنوان الشريحة الثانية
+
محتوى وصفي يعبئ فراغ الشريحة الأولى.
+
+
+
+ {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="الشريحة الثالثة" >}}
+
+
عنوان الشريحة الثالثة
+
محتوى وصفي يعبئ فراغ الشريحة الأولى.
+
+
+
+
+ السابق
+
+
+ التالي
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+ زر القائمة المنسدلة
+
+
+
+
+
+ زر القائمة المنسدلة
+
+
+
+
+
+ زر القائمة المنسدلة
+
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ Primary
+
+ تبديل القائمة المنسدلة
+
+
+
+
+ Secondary
+
+ تبديل القائمة المنسدلة
+
+
+
+
+ Success
+
+ تبديل القائمة المنسدلة
+
+
+
+
+ Info
+
+ تبديل القائمة المنسدلة
+
+
+
+
+ Warning
+
+ تبديل القائمة المنسدلة
+
+
+
+
+ Danger
+
+ تبديل القائمة المنسدلة
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ زر القائمة المنسدلة لليسار
+
+
+
+
+
+ زر القائمة المنسدلة للأعلى
+
+
+
+
+
+ زر القائمة المنسدلة لليمين
+
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ قائمة منسدلة بمحاذاة نهاية الزر
+
+
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+ عنصر معطل
+ عنصر ثاني
+ عنصر ثالث
+ عنصر رابع
+ وعنصر خامس أيضًا
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ عنصر
+ عنصر ثاني
+ عنصر ثالث
+ عنصر رابع
+ وعنصر خامس أيضًا
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+ إطلاق صندوق عائم تجريبي
+
+
+ إطلاق صندوق عائم عالق
+
+
+ صندوق عائم متنصف عاموديًا وقابل للتمرير
+
+
+ صندوق عائم يملأ الشاشة
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+ نشط
+ رابط
+ رابط
+ معطل
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+ الصفحة الرئيسية
+ الملف الشخصي
+ اتصل بنا
+
+
+
+
+
محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الصفحة الرئيسية. إذن، أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، لإخراجنا من هذه الورطة، لا سيّما أنها نفسها، مقرونة بالافتقار إلى البصيرة، هي التي أودت بنا إلى هذا التبدُّل المناخي في الدرجة الأولى.
+
+
+
محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الملف الشخصي. معظم البشر في بلدان العالَم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظًا بالسكان في العالم.
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{< /example >}}
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+ انقر لعرض/إخفاء الصندوق المنبثق
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ انبثاق إلى الأعلى
+
+
+ انبثاق إلى اليسار
+
+
+ انبثاق إلى الأسفل
+
+
+ انبثاق إلى اليمين
+
+ {{< /example >}}
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+
+
+
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+ {{< spinner.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ جار التحميل...
+
+ {{- end -}}
+ {{< /spinner.inline >}}
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ {{< spinner.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ جار التحميل...
+
+ {{- end -}}
+ {{< /spinner.inline >}}
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}}
+
+
+
+ مرحبًا بالعالم! هذه رسالة إشعار.
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" class="tooltip-demo" >}}
+ تلميح يظهر في الأعلى
+ تلميح يظهر على اليسار
+ تلميح يظهر في الأسفل
+ تلميح يظهر على اليمين
+ تلميح مع HTML
+ {{< /example >}}
+
+
+
+
+
+
+
+
+
لن أغلق إذا نقرت خارجي. لا تحاول حتى الضغط على مفتاح الهروب.
+
+
+
+
+
+
+
+
+
+
في ما يلي، نص طويل لتعبئة كامل الشاشة. قد يبدو أنني أثرثر كثيرًا، لذا سأقوم بنسخ مقالة من إحدى الصحف العربية.
+
تكييف الهواء هو من التكنولوجيا التي ما إن نمتلكها حتى نصبح عاجزين عن تخيّل العيش من دونها. وتكييف الهواء في مناطق عديدة من العالم ليس ترفاً يمكن الاستغناء عنه. ولكن هذه الحاجة الحيوية تثير تحديات كبيرة على مستوى استهلاك الطاقة في معظم بلدان العالم. ويُتوقع أن تتفاقم هذه التحديات خلال العقود الثلاثة المقبلة، مع توقُّع ارتفاع عدد المكيفات في العالم نحو ثلاثة أضعاف. وفي حين أن الابتكارات التكنولوجية تحقِّق كل يوم إنجازاً جديداً، وعلى الرغم من بعض التحسينات والتدابير المحدودة التي طرأت على صناعة المكيفات، “فإن تكنولوجيتها الأساسية لا تزال تعمل كما كانت، منذ اعتمادها قبل نحو قرن من السنين"، حسبما جاء في تقرير لمعهد ماساشوستس للتكنولوجيا (MIT)، في الأول من سبتمبر 2020م. ولمعالجة هذه المشكلات الخطيرة، لا مفر من إعادة التفكير بجد.
+
التكييف حاجة حيويّة. فالتعرّض للحرارة لمدة طويلة ضارٌ بالصحة. ووفقاً لمنظمة الصحة العالميّة يمكن للتعرُّض الطويل للحرارة أيضاً أن يؤدي إلى "إعياء حراري، وضربة شمس، وتورّم في الرجلين، وطفح جلدي على العنق، وتشنج، وصداع، وحساسيّة، والخمول والوهَن. ويمكن للحرارة أن تسبِّب جفافاً خطراً، وأعراضاً حادة في أوعية الدماغ الدمويّة، وتسهم في تكوّن الجلطات".
+
وموجات الحر أيضاً من أشد المخاطر الطبيعيّة المميتة. إذ يقدَّر أن بين عامي 1998 و2017م، توفي نحو 166 ألف شخص من موجات الحر. ومات 70 ألفاً من هؤلاء في أوروبا سنة 2003م وحدها. ومن دون أن يصل الخطر إلى الموت، تتسبَّب الحرارة العالية بانخفاض الأداء المعرفي لدى الشبان البالغين في المباني غير المكيّفة. فقد بيّنت دراسة أجرتها "كليّة ت. هـ. تشان" للصحة العامة في جامعة هارفرد، نشرتها "بلوس ميديسين" في 10 يوليو 2018م، أن التلاميذ الذين ينامون في مهاجع غير مكيّفة، يقل أداؤهم عن أولئك الذين ينامون في مهاجع مكيّفة. ولتجنّب مخاطر التعرّض للحرارة، يلتفت الناس إلى استخدام التكييف.
+
يتطلّب التكييف كثيراً من الطاقة. فنحو %10 من استهلاك الكهرباء في العالم يُنفَق في تشغيل المكيّفات. وتصل هذه النسبة إلى %50 في المملكة حسب "المركز السعودي لكفاءة الطاقة". أضف إلى ذلك أن معظم البشر في بلدان العالم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظاً بالسكان في العالم. وجاء في تقرير لوكالة الطاقة الدوليّة بعنوان "مستقبل التبريد"، ونُشر في مايو 2018م، أن في أجزاء من أمريكا الجنوبيّة وإفريقيا وآسيا والشرق الأوسط، يعيش 2.8 مليار نسمة، ولا يملك وحدات تكييف سوى %8 من المنازل. في حين الدول المتقدِّمة مثل كوريا الجنوبيّة، واليابان، والولايات المتحدة، فإن %89 من المنازل تملك مكيفات، وفي الصين %60 من البيوت تملكها أيضاً.
+
ولكن مع تنامي الدخل في بلدان الاقتصاد الصاعد، يتوقّع أن تزداد المنازل التي تقتني مكيّفاً. وبحسب مقالة نُشرت في صحيفة "نيويورك تايمز"، في 15 مايو 2018م، سيرتفع عدد المكيّفات في العالم من نحو 1.6 مليار حالياً، إلى 5.6 مليارات عام 2050م، طبقاً لمعدَّلات النمو الاقتصادي.
+
ومع الافتقار إلى الابتكار وتطوير النظم لفرض معايير الجدوى الأعلى، فسيتضاعف استهلاك الطاقة لتشغيل المكيّفات ثلاثة أضعاف. وسينتج من ذلك طلب إضافي للطاقة يساوي مجموع إنتاج الطاقة في الصين حالياً. فمبيعات المكيّفات ترتفع اليوم في البلدان النامية، لكن فعاليّة هذه الوحدات مشكوك فيها. فمثلاً، أوسع وحدات التكييف انتشاراً في بعض الأسواق الآسيوية تتطلّب ضعفي ما تتطلّبه وحدات تكييف أجدى. والمكيّفات التي تباع في اليابان والاتحاد الأوروبي أجدى بنسبة %25 عادة، من تلك التي تباع في الصين والولايات المتحدة.
+
وبصرف النظر عن كثير من الطاقة التي يحتاج إليها المكيّف، فإنه يبث مقادير وفيرة من غازات الدفيئة نفسها. وطبقاً لموقع تكييف الهواء (airconditioning.com)، فإن المبرِّدات في معظم المكيّفات مثل مواد مركبات الكربون الكلورية فلورية أو مواد هيدروفلوروولفينات، ومركبات ثاني أكسيد الكربون الهيدروكلورية فلورية، أسوأ بكثير للبيئة من ثاني أكسيد الكربون، لأنها تحتبس من الحرارة مقادير أكبر حين تتسرّب إلى الجو.
+
وبالإضافة إلى ظاهرة الدفيئة، فهذه الغازات تسهم أيضاً بالإضرار بطبقة الأوزون. ويمكن لهذه المواد الكيميائية أن تتسرّب خلال عملية التصنيع أو التصليح. ويعرف كل من يملك في منزله مكيّفاً كم تتكرر أعطال هذه الأجهزة. ثم إن المكيف يُرمَى حين يتعطّل نهائياً ولا يعود قابلاً للإصلاح، والمواد المبرِّدة فيه ستتسرّب على الأرجح لتلوث الهواء.
+
+
+
+
+
+ On this page
+
+
+
+ Contents
+
+
+
+ Forms
+
+
+
+ Components
+
+
+
+
+
+
+
+ Contents
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
Display 1
+
Display 2
+
Display 3
+
Display 4
+
Display 5
+
Display 6
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
Heading 1
+
Heading 2
+
Heading 3
+
Heading 4
+
Heading 5
+
Heading 6
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ This is a lead paragraph. It stands out from regular paragraphs.
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
You can use the mark tag to highlight text.
+
This line of text is meant to be treated as deleted text.
+
This line of text is meant to be treated as no longer accurate.
+
This line of text is meant to be treated as an addition to the document.
+
This line of text will render as underlined.
+
This line of text is meant to be treated as fine print.
+
This line rendered as bold text.
+
This line rendered as italicized text.
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ A well-known quote, contained in a blockquote element.
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ This is a list.
+ It appears completely unstyled.
+ Structurally, it's still a list.
+ However, this style only applies to immediate child elements.
+ Nested lists:
+
+ are unaffected by this style
+ will still show a bullet
+ and have appropriate left margin
+
+
+ This may still come in handy in some situations.
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ This is a list item.
+ And another one.
+ But they're displayed inline.
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+ {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
+ {{< /example >}}
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ Class
+ Heading
+ Heading
+
+
+
+
+ Default
+ Cell
+ Cell
+
+ {{< table.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ {{ .name | title }}
+ Cell
+ Cell
+
+ {{- end -}}
+ {{< /table.inline >}}
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
+ A caption for the above image.
+
+ {{< /example >}}
+
+
+
+
+
+
+
+ Components
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+
+
+ This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+
+
+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+
+
+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
+
+
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+ {{< alerts.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ A simple {{ .name }} alert with
an example link . Give it a click if you like.
+
+
{{ end -}}
+ {{< /alerts.inline >}}
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
Well done!
+
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+
+
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ {{< badge.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
{{ .name | title }} {{- end -}}
+ {{< /badge.inline >}}
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+ Home Library Data
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+ {{< buttons.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+ {{ .name | title }}
+ {{- end -}}
+ {{< /buttons.inline >}}
+
+ Link
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ {{< buttons.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+ {{ .name | title }}
+ {{- end -}}
+ {{< /buttons.inline >}}
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ Small button
+ Standard button
+ Large button
+ {{< /example >}}
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+ {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+
+
Card title
+
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Go somewhere
+
+
+
+
+
+
+
+
Card title
+
Some quick example text to build on the card title and make up the bulk of the card's content.
+
Go somewhere
+
+
+ 2 days ago
+
+
+
+
+
+
+
Card title
+
Some quick example text to build on the card title and make up the bulk of the card's content.
+
+
+ An item
+ A second item
+ A third item
+
+
+
+
+
+
+
+
+ {{< placeholder width="100%" height="250" text="Image" >}}
+
+
+
+
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
+
+
+
+
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+
+
+ {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
+
+
First slide label
+
Some representative placeholder content for the first slide.
+
+
+
+ {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
+
+
Second slide label
+
Some representative placeholder content for the second slide.
+
+
+
+ {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
+
+
Third slide label
+
Some representative placeholder content for the third slide.
+
+
+
+
+ Previous
+
+
+ Next
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+ Dropdown button
+
+
+
+
+
+ Dropdown button
+
+
+
+
+
+ Dropdown button
+
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ Primary
+
+ Toggle Dropdown
+
+
+
+
+ Secondary
+
+ Toggle Dropdown
+
+
+
+
+ Success
+
+ Toggle Dropdown
+
+
+
+
+ Info
+
+ Toggle Dropdown
+
+
+
+
+ Warning
+
+ Toggle Dropdown
+
+
+
+
+ Danger
+
+ Toggle Dropdown
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ Dropend button
+
+
+
+
+
+ Dropup button
+
+
+
+
+
+ Dropstart button
+
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+
+ End-aligned menu
+
+
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+ A disabled item
+ A second item
+ A third item
+ A fourth item
+ And a fifth one
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ An item
+ A second item
+ A third item
+ A fourth item
+ And a fifth one
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+ Launch demo modal
+
+
+ Launch static backdrop modal
+
+
+ Vertically centered scrollable modal
+
+
+ Full screen
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+ Active
+ Link
+ Link
+ Disabled
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+
+ Home
+ Profile
+ Contact
+
+
+
+
+
This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{< /example >}}
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+ Click to toggle popover
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ Popover on top
+
+
+ Popover on end
+
+
+ Popover on bottom
+
+
+ Popover on start
+
+ {{< /example >}}
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+
+
+
+
+
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+
+ {{< /example >}}
+
+
+
+
+
+
+
+
+
+
+ {{< example show_markup="false" >}}
+ {{< spinner.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ Loading...
+
+ {{- end -}}
+ {{< /spinner.inline >}}
+ {{< /example >}}
+
+ {{< example show_markup="false" >}}
+ {{< spinner.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ Loading...
+
+ {{- end -}}
+ {{< /spinner.inline >}}
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}}
+
+
+
+ Hello, world! This is a toast message.
+
+
+ {{< /example >}}
+
+
+
+
+
+ {{< example show_markup="false" class="tooltip-demo" >}}
+ Tooltip on top
+ Tooltip on end
+ Tooltip on bottom
+ Tooltip on start
+ Tooltip with HTML
+ {{< /example >}}
+
+
+
+
+
+
+
+
+
I will not close if you click outside me. Don't even try to press escape key.
+
+
+
+
+
+
+
+
+
نموذج إتمام الشراء
+
فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.
+
+
+
+ عربة التسوق
+ 3
+
+
+
+
+
اسم المنتج
+ وصف مختصر
+
+ $12
+
+
+
+
المنتج الثاني
+ وصف مختصر
+
+ $8
+
+
+
+
البند الثالث
+ وصف مختصر
+
+ $5
+
+
+
+
رمز ترويجي
+ EXAMPLECODE
+
+ -$5
+
+
+ مجموع (USD)
+ $20
+
+
+
+
+
+
+
+
+ © {{< year >}}-2017 اسم الشركة
+
+
+
+
+
+
+
Checkout form
+
Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
+
+
+
+ Your cart
+ 3
+
+
+
+
+
Product name
+ Brief description
+
+ $12
+
+
+
+
Second product
+ Brief description
+
+ $8
+
+
+
+
Third item
+ Brief description
+
+ $5
+
+
+
+
Promo code
+ EXAMPLECODE
+
+ −$5
+
+
+ Total (USD)
+ $20
+
+
+
+
+
+
+
+
+
+ © 2017–{{< year >}} Company Name
+
+
+
+
+
+
+ Cover your page.
+ Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.
+
+ Learn more
+
+
+
+
+ Cover template for Bootstrap , by @mdo .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ التقارير المحفوظة
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ عنوان القسم
+
+
+
+
+ #
+ عنوان
+ عنوان
+ عنوان
+ عنوان
+
+
+
+
+ 1,001
+ بيانات
+ عشوائية
+ تثري
+ الجدول
+
+
+ 1,002
+ تثري
+ مبهة
+ تصميم
+ تنسيق
+
+
+ 1,003
+ عشوائية
+ غنية
+ قيمة
+ مفيدة
+
+
+ 1,003
+ معلومات
+ تثري
+ توضيحية
+ عشوائية
+
+
+ 1,004
+ الجدول
+ بيانات
+ تنسيق
+ قيمة
+
+
+ 1,005
+ قيمة
+ مبهة
+ الجدول
+ تثري
+
+
+ 1,006
+ قيمة
+ توضيحية
+ غنية
+ عشوائية
+
+
+ 1,007
+ تثري
+ مفيدة
+ معلومات
+ مبهة
+
+
+ 1,008
+ بيانات
+ عشوائية
+ تثري
+ الجدول
+
+
+ 1,009
+ تثري
+ مبهة
+ تصميم
+ تنسيق
+
+
+ 1,010
+ عشوائية
+ غنية
+ قيمة
+ مفيدة
+
+
+ 1,011
+ معلومات
+ تثري
+ توضيحية
+ عشوائية
+
+
+ 1,012
+ الجدول
+ تثري
+ تنسيق
+ قيمة
+
+
+ 1,013
+ قيمة
+ مبهة
+ الجدول
+ تصميم
+
+
+ 1,014
+ قيمة
+ توضيحية
+ غنية
+ عشوائية
+
+
+ 1,015
+ بيانات
+ مفيدة
+ معلومات
+ الجدول
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Saved reports
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Section title
+
+
+
+
+ #
+ Header
+ Header
+ Header
+ Header
+
+
+
+
+ 1,001
+ random
+ data
+ placeholder
+ text
+
+
+ 1,002
+ placeholder
+ irrelevant
+ visual
+ layout
+
+
+ 1,003
+ data
+ rich
+ dashboard
+ tabular
+
+
+ 1,003
+ information
+ placeholder
+ illustrative
+ data
+
+
+ 1,004
+ text
+ random
+ layout
+ dashboard
+
+
+ 1,005
+ dashboard
+ irrelevant
+ text
+ placeholder
+
+
+ 1,006
+ dashboard
+ illustrative
+ rich
+ data
+
+
+ 1,007
+ placeholder
+ tabular
+ information
+ irrelevant
+
+
+ 1,008
+ random
+ data
+ placeholder
+ text
+
+
+ 1,009
+ placeholder
+ irrelevant
+ visual
+ layout
+
+
+ 1,010
+ data
+ rich
+ dashboard
+ tabular
+
+
+ 1,011
+ information
+ placeholder
+ illustrative
+ data
+
+
+ 1,012
+ text
+ placeholder
+ layout
+ dashboard
+
+
+ 1,013
+ dashboard
+ irrelevant
+ text
+ visual
+
+
+ 1,014
+ dashboard
+ illustrative
+ rich
+ data
+
+
+ 1,015
+ random
+ tabular
+ information
+ text
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ June
+
+ January
+ February
+ March
+ April
+ May
+ June
+ July
+ August
+ September
+ October
+ November
+ December
+
+
+
+
+
+
Sun
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
+
+ 30
+ 31
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+
+ 8
+ 9
+ 10
+ 11
+ 12
+ 13
+ 14
+
+ 15
+ 16
+ 17
+ 18
+ 19
+ 20
+ 21
+
+ 22
+ 23
+ 24
+ 25
+ 26
+ 27
+ 28
+
+ 29
+ 30
+ 31
+
+
+
+
+
+
+
+
+
+
+
+ June
+
+ January
+ February
+ March
+ April
+ May
+ June
+ July
+ August
+ September
+ October
+ November
+ December
+
+
+
+
+
+
Sun
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
+
+ 30
+ 31
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+
+ 8
+ 9
+ 10
+ 11
+ 12
+ 13
+ 14
+
+ 15
+ 16
+ 17
+ 18
+ 19
+ 20
+ 21
+
+ 22
+ 23
+ 24
+ 25
+ 26
+ 27
+ 28
+
+ 29
+ 30
+ 31
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/features/features.css b/gawa/static/bs5/site/content/docs/5.3/examples/features/features.css
new file mode 100644
index 0000000..debc263
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/features/features.css
@@ -0,0 +1,26 @@
+.feature-icon {
+ width: 4rem;
+ height: 4rem;
+ border-radius: .75rem;
+}
+
+.icon-square {
+ width: 3rem;
+ height: 3rem;
+ border-radius: .75rem;
+}
+
+.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
+.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
+.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
+
+.card-cover {
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+}
+
+.feature-icon-small {
+ width: 3rem;
+ height: 3rem;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/features/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/features/index.html
new file mode 100644
index 0000000..02fad75
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/features/index.html
@@ -0,0 +1,340 @@
+---
+layout: examples
+title: Features
+extra_css:
+ - "features.css"
+body_class: ""
+---
+
+
+
+ Bootstrap
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Features examples
+
+
+
Columns with icons
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
+
+ Call to action
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
+
+ Call to action
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
+
+ Call to action
+
+
+
+
+
+
+
Hanging icons
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
+
+ Primary button
+
+
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
+
+ Primary button
+
+
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
+
+ Primary button
+
+
+
+
+
+
+
+
Custom cards
+
+
+
+
+
+
Short title, long jacket
+
+
+
+
+ Earth
+
+
+ 3d
+
+
+
+
+
+
+
+
+
+
Much longer title that wraps to multiple lines
+
+
+
+
+ Pakistan
+
+
+ 4d
+
+
+
+
+
+
+
+
+
+
Another longer title belongs here
+
+
+
+
+ California
+
+
+ 5d
+
+
+
+
+
+
+
+
+
+
Icon grid
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
+
Features with title
+
+
+
+
Left-aligned title explaining these awesome features
+
Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
+
Primary button
+
+
+
+
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
+
+
+
Featured title
+
Paragraph of text beneath the heading to explain the heading.
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg b/gawa/static/bs5/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
new file mode 100644
index 0000000..ed2e36a
Binary files /dev/null and b/gawa/static/bs5/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg differ
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg b/gawa/static/bs5/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
new file mode 100644
index 0000000..b66864a
Binary files /dev/null and b/gawa/static/bs5/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg differ
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg b/gawa/static/bs5/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
new file mode 100644
index 0000000..c411b17
Binary files /dev/null and b/gawa/static/bs5/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg differ
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/footers/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/footers/index.html
new file mode 100644
index 0000000..83c2409
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/footers/index.html
@@ -0,0 +1,186 @@
+---
+layout: examples
+title: Footers
+body_class: ""
+---
+
+
+
+ Bootstrap
+
+
+
+
+
+
+
+
+
+
+ © {{< year >}} Company, Inc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
© {{< year >}} Company, Inc
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/grid/grid.css b/gawa/static/bs5/site/content/docs/5.3/examples/grid/grid.css
new file mode 100644
index 0000000..cbc7c31
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/grid/grid.css
@@ -0,0 +1,13 @@
+.themed-grid-col {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
+ background-color: rgba(112.520718, 44.062154, 249.437846, .15);
+ border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);
+}
+
+.themed-container {
+ padding: .75rem;
+ margin-bottom: 1.5rem;
+ background-color: rgba(112.520718, 44.062154, 249.437846, .15);
+ border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3);
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/grid/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/grid/index.html
new file mode 100644
index 0000000..8a61582
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/grid/index.html
@@ -0,0 +1,187 @@
+---
+layout: examples
+title: Grid Template
+extra_css:
+ - "grid.css"
+body_class: "py-4"
+---
+
+
+
+
+
Bootstrap grid examples
+
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
+
In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.
+
+
Five grid tiers
+
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
+
+
+
.col-4
+
.col-4
+
.col-4
+
+
+
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
+
+
+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+
+
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+
+
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4
+
+
+
+
.col-xxl-4
+
.col-xxl-4
+
.col-xxl-4
+
+
+
Three equal columns
+
Get three equal-width columns starting at desktops and scaling to large desktops . On mobile devices, tablets and below, the columns will automatically stack.
+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+
+
Three equal columns alternative
+
By using the .row-cols-* classes, you can easily create a grid with equal columns.
+
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
+
+
Three unequal columns
+
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+
+
Two columns
+
Get two columns starting at desktops and scaling to large desktops .
+
+
.col-md-8
+
.col-md-4
+
+
+
Full width, single column
+
+ No grid classes are necessary for full-width elements.
+
+
+
+
+
Two columns with two nested columns
+
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops , with another two (equal widths) within the larger column.
+
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
+
+
+
+ .col-md-8
+
+
+
.col-md-6
+
.col-md-6
+
+
+
.col-md-4
+
+
+
+
+
Mixed: mobile and desktop
+
The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
+
Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.
+
+
.col-md-8
+
.col-6 .col-md-4
+
+
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
+
+
+
+
+
Mixed: mobile, tablet, and desktop
+
+
.col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
+
+
+
+
Gutters
+
With .gx-* classes, the horizontal gutters can be adjusted.
+
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
+
Use the .gy-* classes to control the vertical gutters.
+
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
+
With .g-* classes, the gutters in both directions can be adjusted.
+
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
+
+
+
+
Containers
+
Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.
+
.container
+ .container-sm
+ .container-md
+ .container-lg
+ .container-xl
+ .container-xxl
+ .container-fluid
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/headers/headers.css b/gawa/static/bs5/site/content/docs/5.3/examples/headers/headers.css
new file mode 100644
index 0000000..f887573
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/headers/headers.css
@@ -0,0 +1,15 @@
+.form-control-dark {
+ border-color: var(--bs-gray);
+}
+.form-control-dark:focus {
+ border-color: #fff;
+ box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
+}
+
+.text-small {
+ font-size: 85%;
+}
+
+.dropdown-toggle:not(:focus) {
+ outline: 0;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/headers/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/headers/index.html
new file mode 100644
index 0000000..d47597f
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/headers/index.html
@@ -0,0 +1,297 @@
+---
+layout: examples
+title: Headers
+extra_css:
+ - "headers.css"
+body_class: ""
+---
+
+
+
+ Bootstrap
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Headers examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Login
+ Sign-up
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Login
+ Sign-up
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Login
+ Sign-up
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/heroes/bootstrap-docs.png b/gawa/static/bs5/site/content/docs/5.3/examples/heroes/bootstrap-docs.png
new file mode 100644
index 0000000..471a9ed
Binary files /dev/null and b/gawa/static/bs5/site/content/docs/5.3/examples/heroes/bootstrap-docs.png differ
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/heroes/bootstrap-themes.png b/gawa/static/bs5/site/content/docs/5.3/examples/heroes/bootstrap-themes.png
new file mode 100644
index 0000000..13c3233
Binary files /dev/null and b/gawa/static/bs5/site/content/docs/5.3/examples/heroes/bootstrap-themes.png differ
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/heroes/heroes.css b/gawa/static/bs5/site/content/docs/5.3/examples/heroes/heroes.css
new file mode 100644
index 0000000..e9deaf7
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/heroes/heroes.css
@@ -0,0 +1,3 @@
+@media (min-width: 992px) {
+ .rounded-lg-3 { border-radius: .3rem; }
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/heroes/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/heroes/index.html
new file mode 100644
index 0000000..7f5daa9
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/heroes/index.html
@@ -0,0 +1,125 @@
+---
+layout: examples
+title: Heroes
+extra_css:
+ - "heroes.css"
+body_class: ""
+---
+
+
+ Heroes examples
+
+
+
+
Centered hero
+
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+ Primary button
+ Secondary
+
+
+
+
+
+
Centered screenshot
+
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+ Primary button
+ Secondary
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Responsive left-aligned hero with image
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+ Primary
+ Default
+
+
+
+
+
+
+
+
+
Vertically centered hero sign-up form
+
Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
+
+
+
+
+
+
+
+
+
Border hero with cropped image and shadows
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+ Primary
+ Default
+
+
+
+
+
+
+
+
+
+
+
Dark color hero
+
+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
+
+ Custom button
+ Secondary
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/jumbotron/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/jumbotron/index.html
new file mode 100644
index 0000000..049684d
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/jumbotron/index.html
@@ -0,0 +1,44 @@
+---
+layout: examples
+title: Jumbotron example
+---
+
+
+
+
+
+
+
+
Custom jumbotron
+
Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.
+
Example button
+
+
+
+
+
+
+
Change the background
+
Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.
+
Example button
+
+
+
+
+
Add borders
+
Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.
+
Example button
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/jumbotrons/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/jumbotrons/index.html
new file mode 100644
index 0000000..ded1144
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/jumbotrons/index.html
@@ -0,0 +1,82 @@
+---
+layout: examples
+title: Jumbotrons
+extra_css:
+ - "jumbotrons.css"
+body_class: ""
+---
+
+
+
+ Bootstrap
+
+
+
+
+
+
+
+
+
+
+
Jumbotron with icon
+
+ This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive .col-* class, and a customized call to action.
+
+
+
+ Call to action
+
+
+ Secondary link
+
+
+
+
+
+
+
+
+
+
Placeholder jumbotron
+
+ This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.
+
+
+ Call to action
+
+
+
+
+
+
+
+
Full-width jumbotron
+
+ This takes the basic jumbotron above and makes its background edge-to-edge with a .container inside to align content. Similar to above, it's been recreated with built-in grid and utility classes.
+
+
+
+
+
+
+
+
Basic jumbotron
+
+ This is a simple Bootstrap jumbotron that sits within a .container, recreated with built-in utility classes.
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css b/gawa/static/bs5/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css
new file mode 100644
index 0000000..d7d065e
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css
@@ -0,0 +1 @@
+.border-dashed { --bs-border-style: dashed; }
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/list-groups/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/list-groups/index.html
new file mode 100644
index 0000000..1a6e5e8
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/list-groups/index.html
@@ -0,0 +1,225 @@
+---
+layout: examples
+title: List groups
+extra_css:
+ - "list-groups.css"
+body_class: ""
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/list-groups/list-groups.css b/gawa/static/bs5/site/content/docs/5.3/examples/list-groups/list-groups.css
new file mode 100644
index 0000000..b90cfa0
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/list-groups/list-groups.css
@@ -0,0 +1,63 @@
+.list-group {
+ width: 100%;
+ max-width: 460px;
+ margin-inline: 1.5rem;
+}
+
+.form-check-input:checked + .form-checked-content {
+ opacity: .5;
+}
+
+.form-check-input-placeholder {
+ border-style: dashed;
+}
+[contenteditable]:focus {
+ outline: 0;
+}
+
+.list-group-checkable .list-group-item {
+ cursor: pointer;
+}
+.list-group-item-check {
+ position: absolute;
+ clip: rect(0, 0, 0, 0);
+}
+.list-group-item-check:hover + .list-group-item {
+ background-color: var(--bs-secondary-bg);
+}
+.list-group-item-check:checked + .list-group-item {
+ color: #fff;
+ background-color: var(--bs-primary);
+ border-color: var(--bs-primary);
+}
+.list-group-item-check[disabled] + .list-group-item,
+.list-group-item-check:disabled + .list-group-item {
+ pointer-events: none;
+ filter: none;
+ opacity: .5;
+}
+
+.list-group-radio .list-group-item {
+ cursor: pointer;
+ border-radius: .5rem;
+}
+.list-group-radio .form-check-input {
+ z-index: 2;
+ margin-top: -.5em;
+}
+.list-group-radio .list-group-item:hover,
+.list-group-radio .list-group-item:focus {
+ background-color: var(--bs-secondary-bg);
+}
+
+.list-group-radio .form-check-input:checked + .list-group-item {
+ background-color: var(--bs-body);
+ border-color: var(--bs-primary);
+ box-shadow: 0 0 0 2px var(--bs-primary);
+}
+.list-group-radio .form-check-input[disabled] + .list-group-item,
+.list-group-radio .form-check-input:disabled + .list-group-item {
+ pointer-events: none;
+ filter: none;
+ opacity: .5;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/masonry/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/masonry/index.html
new file mode 100644
index 0000000..c554deb
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/masonry/index.html
@@ -0,0 +1,105 @@
+---
+layout: examples
+title: Masonry example
+extra_js:
+ - src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
+ integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
+ async: true
+---
+
+
+ Bootstrap and Masonry
+ Integrate Masonry with the Bootstrap grid system and cards component.
+
+ Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:
+
+
+<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
+ By adding data-masonry='{"percentPosition": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.
+
+
+
+
+ {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
+
+
Card title that wraps to a new line
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+ A well-known quote, contained in a blockquote element.
+
+
+ Someone famous in Source Title
+
+
+
+
+
+
+ {{< 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
+
+
+
+
+
+
+
+ A well-known quote, contained in a blockquote element.
+
+
+
+
+
+
+
+
+
Card title
+
This card has a regular title and short paragraph of text below it.
+
Last updated 3 mins ago
+
+
+
+
+
+ {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}}
+
+
+
+
+
+
+ A well-known quote, contained in a blockquote element.
+
+
+ Someone famous in Source Title
+
+
+
+
+
+
+
+
Card title
+
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
+
Last updated 3 mins ago
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/modals/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/modals/index.html
new file mode 100644
index 0000000..5fcc2d2
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/modals/index.html
@@ -0,0 +1,150 @@
+---
+layout: examples
+title: Modals
+extra_css:
+ - "modals.css"
+body_class: ""
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.
+
+
+ Save changes
+ Close
+
+
+
+
+
+
+
+
+
+
Enable this setting?
+
You can always change your mind in your account settings.
+
+
+
+
+
+
+
+
+
+
+
What's new
+
+
+
+
+
Grid view
+ Not into lists? Try the new grid view.
+
+
+
+
+
Bookmarks
+ Save items you love for easy access later.
+
+
+
+
+
Video embeds
+ Share videos wherever you go.
+
+
+
+
Great, thanks!
+
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/modals/modals.css b/gawa/static/bs5/site/content/docs/5.3/examples/modals/modals.css
new file mode 100644
index 0000000..924952a
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/modals/modals.css
@@ -0,0 +1,8 @@
+.modal-sheet .modal-dialog {
+ width: 380px;
+ transition: bottom .75s ease-in-out;
+}
+.modal-sheet .modal-footer {
+ padding-bottom: 2rem;
+}
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/navbar-bottom/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-bottom/index.html
new file mode 100644
index 0000000..92eed64
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-bottom/index.html
@@ -0,0 +1,41 @@
+---
+layout: examples
+title: Bottom navbar example
+---
+
+
+
+
Bottom Navbar example
+
This example is a quick exercise to illustrate how the bottom navbar works.
+
}}" role="button">View navbar docs »
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/navbar-fixed/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-fixed/index.html
new file mode 100644
index 0000000..a2a1c75
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-fixed/index.html
@@ -0,0 +1,40 @@
+---
+layout: examples
+title: Fixed top navbar example
+extra_css:
+ - "navbar-fixed.css"
+---
+
+
+
+
+
+
+
+
Navbar example
+
This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.
+
}}" role="button">View navbar docs »
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css
new file mode 100644
index 0000000..c77c0c1
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-fixed/navbar-fixed.css
@@ -0,0 +1,5 @@
+/* Show it is fixed to the top */
+body {
+ min-height: 75rem;
+ padding-top: 4.5rem;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/navbar-static/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-static/index.html
new file mode 100644
index 0000000..2b1b308
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-static/index.html
@@ -0,0 +1,40 @@
+---
+layout: examples
+title: Top navbar example
+extra_css:
+ - "navbar-static.css"
+---
+
+
+
+
+
+
+
+
Navbar example
+
This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.
+
}}" role="button">View navbar docs »
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/navbar-static/navbar-static.css b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-static/navbar-static.css
new file mode 100644
index 0000000..25bbdde
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/navbar-static/navbar-static.css
@@ -0,0 +1,4 @@
+/* Show it's not fixed to the top */
+body {
+ min-height: 75rem;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/navbars-offcanvas/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/navbars-offcanvas/index.html
new file mode 100644
index 0000000..858998f
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/navbars-offcanvas/index.html
@@ -0,0 +1,147 @@
+---
+layout: examples
+title: Navbar Template
+extra_css:
+ - "navbars-offcanvas.css"
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Navbar with offcanvas examples
+
This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the }}">top and }}">fixed top examples.
+
From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.
+
+ }}" role="button">Learn more about offcanvas navbars »
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css b/gawa/static/bs5/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css
new file mode 100644
index 0000000..70d2094
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/navbars-offcanvas/navbars-offcanvas.css
@@ -0,0 +1,7 @@
+body {
+ padding-bottom: 20px;
+}
+
+.navbar {
+ margin-bottom: 20px;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/navbars/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/navbars/index.html
new file mode 100644
index 0000000..4c903bb
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/navbars/index.html
@@ -0,0 +1,450 @@
+---
+layout: examples
+title: Navbar Template
+extra_css:
+ - "navbars.css"
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Matching .container-xl...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Navbar examples
+
This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a .container. For positioning of navbars, checkout the }}">top and }}">fixed top examples.
+
At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.
+
+ }}" role="button">View navbar docs »
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/navbars/navbars.css b/gawa/static/bs5/site/content/docs/5.3/examples/navbars/navbars.css
new file mode 100644
index 0000000..70d2094
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/navbars/navbars.css
@@ -0,0 +1,7 @@
+body {
+ padding-bottom: 20px;
+}
+
+.navbar {
+ margin-bottom: 20px;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/offcanvas-navbar/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/offcanvas-navbar/index.html
new file mode 100644
index 0000000..f72583f
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/offcanvas-navbar/index.html
@@ -0,0 +1,140 @@
+---
+layout: examples
+title: Offcanvas navbar template
+extra_css:
+ - "offcanvas-navbar.css"
+extra_js:
+ - src: "offcanvas-navbar.js"
+body_class: "bg-body-tertiary"
+aliases: "/docs/5.3/examples/offcanvas/"
+---
+
+
+
+
+
+
+
+
+
+
+
+
Bootstrap
+ Since 2011
+
+
+
Recent updates
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
+
+ @username
+ Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
+
+
+
+ {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}}
+
+ @username
+ Some more representative placeholder content, related to this other user. Another status update, perhaps.
+
+
+
+ {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}}
+
+ @username
+ This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.
+
+
+
+ All updates
+
+
+
Suggestions
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
+
+
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
+
+
+
+ {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
+
+
+
+ All suggestions
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css b/gawa/static/bs5/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
new file mode 100644
index 0000000..f855b96
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
@@ -0,0 +1,52 @@
+html,
+body {
+ overflow-x: hidden; /* Prevent scroll on narrow devices */
+}
+
+body {
+ padding-top: 56px;
+}
+
+@media (max-width: 991.98px) {
+ .offcanvas-collapse {
+ position: fixed;
+ top: 56px; /* Height of navbar */
+ bottom: 0;
+ left: 100%;
+ width: 100%;
+ padding-right: 1rem;
+ padding-left: 1rem;
+ overflow-y: auto;
+ visibility: hidden;
+ background-color: #343a40;
+ transition: transform .3s ease-in-out, visibility .3s ease-in-out;
+ }
+ .offcanvas-collapse.open {
+ visibility: visible;
+ transform: translateX(-100%);
+ }
+}
+
+.nav-scroller .nav {
+ color: rgba(255, 255, 255, .75);
+}
+
+.nav-scroller .nav-link {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
+ font-size: .875rem;
+ color: #6c757d;
+}
+
+.nav-scroller .nav-link:hover {
+ color: #007bff;
+}
+
+.nav-scroller .active {
+ font-weight: 500;
+ color: #343a40;
+}
+
+.bg-purple {
+ background-color: #6f42c1;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js b/gawa/static/bs5/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js
new file mode 100644
index 0000000..b97a171
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.js
@@ -0,0 +1,7 @@
+(() => {
+ 'use strict'
+
+ document.querySelector('#navbarSideCollapse').addEventListener('click', () => {
+ document.querySelector('.offcanvas-collapse').classList.toggle('open')
+ })
+})()
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/pricing/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/pricing/index.html
new file mode 100644
index 0000000..e4e7b8a
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/pricing/index.html
@@ -0,0 +1,186 @@
+---
+layout: examples
+title: Pricing example
+extra_css:
+ - "pricing.css"
+---
+
+
+
+ Check
+
+
+
+
+
+
+
+
+
+
+
+
+
$0/mo
+
+ 10 users included
+ 2 GB of storage
+ Email support
+ Help center access
+
+
Sign up for free
+
+
+
+
+
+
+
+
$15/mo
+
+ 20 users included
+ 10 GB of storage
+ Priority email support
+ Help center access
+
+
Get started
+
+
+
+
+
+
+
+
$29/mo
+
+ 30 users included
+ 15 GB of storage
+ Phone and email support
+ Help center access
+
+
Contact us
+
+
+
+
Compare plans
+
+
+
+
+
+ Free
+ Pro
+ Enterprise
+
+
+
+
+ Public
+
+
+ Private
+
+
+
+
+
+ Permissions
+
+
+ Sharing
+
+
+ Unlimited members
+
+
+ Extra security
+
+
+
+
+
+
+
+
+
+
© 2017–{{< year >}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Designed for engineers
+
Build anything you want with Aperture
+
+
+
+
+
+
+
+
Another headline
+
And an even wittier subheading.
+
+
+
+
+
+
Another headline
+
And an even wittier subheading.
+
+
+
+
+
+
+
Another headline
+
And an even wittier subheading.
+
+
+
+
+
+
Another headline
+
And an even wittier subheading.
+
+
+
+
+
+
+
Another headline
+
And an even wittier subheading.
+
+
+
+
+
+
Another headline
+
And an even wittier subheading.
+
+
+
+
+
+
+
Another headline
+
And an even wittier subheading.
+
+
+
+
+
+
Another headline
+
And an even wittier subheading.
+
+
+
+
+
+
+
+
+
Product
+
© 2017–{{< year >}}
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/product/product.css b/gawa/static/bs5/site/content/docs/5.3/examples/product/product.css
new file mode 100644
index 0000000..6c90ae5
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/product/product.css
@@ -0,0 +1,74 @@
+.container {
+ max-width: 960px;
+}
+
+.icon-link > .bi {
+ width: .75em;
+ height: .75em;
+}
+
+/*
+ * Custom translucent site header
+ */
+
+.site-header {
+ background-color: rgba(0, 0, 0, .85);
+ -webkit-backdrop-filter: saturate(180%) blur(20px);
+ backdrop-filter: saturate(180%) blur(20px);
+}
+.site-header a {
+ color: #8e8e8e;
+ transition: color .15s ease-in-out;
+}
+.site-header a:hover {
+ color: #fff;
+ text-decoration: none;
+}
+
+/*
+ * Dummy devices (replace them with your own or something else entirely!)
+ */
+
+.product-device {
+ position: absolute;
+ right: 10%;
+ bottom: -30%;
+ width: 300px;
+ height: 540px;
+ background-color: #333;
+ border-radius: 21px;
+ transform: rotate(30deg);
+}
+
+.product-device::before {
+ position: absolute;
+ top: 10%;
+ right: 10px;
+ bottom: 10%;
+ left: 10px;
+ content: "";
+ background-color: rgba(255, 255, 255, .1);
+ border-radius: 5px;
+}
+
+.product-device-2 {
+ top: -25%;
+ right: auto;
+ bottom: 0;
+ left: 5%;
+ background-color: #e5e5e5;
+}
+
+
+/*
+ * Extra utilities
+ */
+
+.flex-equal > * {
+ flex: 1;
+}
+@media (min-width: 768px) {
+ .flex-md-equal > * {
+ flex: 1;
+ }
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/sidebars/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/sidebars/index.html
new file mode 100644
index 0000000..ee1edc1
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/sidebars/index.html
@@ -0,0 +1,356 @@
+---
+layout: examples
+title: Sidebars
+extra_css:
+ - "sidebars.css"
+extra_js:
+ - src: "sidebars.js"
+body_class: ""
+---
+
+
+
+ Bootstrap
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sidebars examples
+
+
+
+
+
+
+
+
+
+
+
+ Icon-only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Collapsible
+
+
+
+
+ Home
+
+
+
+
+
+ Dashboard
+
+
+
+
+
+ Orders
+
+
+
+
+
+ Account
+
+
+
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/sidebars/sidebars.css b/gawa/static/bs5/site/content/docs/5.3/examples/sidebars/sidebars.css
new file mode 100644
index 0000000..f6a8f1c
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/sidebars/sidebars.css
@@ -0,0 +1,63 @@
+body {
+ min-height: 100vh;
+ min-height: -webkit-fill-available;
+}
+
+html {
+ height: -webkit-fill-available;
+}
+
+main {
+ height: 100vh;
+ height: -webkit-fill-available;
+ max-height: 100vh;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.dropdown-toggle { outline: 0; }
+
+.btn-toggle {
+ padding: .25rem .5rem;
+ font-weight: 600;
+ color: var(--bs-emphasis-color);
+ background-color: transparent;
+}
+.btn-toggle:hover,
+.btn-toggle:focus {
+ color: rgba(var(--bs-emphasis-color-rgb), .85);
+ background-color: var(--bs-tertiary-bg);
+}
+
+.btn-toggle::before {
+ width: 1.25em;
+ line-height: 0;
+ content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+ transition: transform .35s ease;
+ transform-origin: .5em 50%;
+}
+
+[data-bs-theme="dark"] .btn-toggle::before {
+ content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+}
+
+.btn-toggle[aria-expanded="true"] {
+ color: rgba(var(--bs-emphasis-color-rgb), .85);
+}
+.btn-toggle[aria-expanded="true"]::before {
+ transform: rotate(90deg);
+}
+
+.btn-toggle-nav a {
+ padding: .1875rem .5rem;
+ margin-top: .125rem;
+ margin-left: 1.25rem;
+}
+.btn-toggle-nav a:hover,
+.btn-toggle-nav a:focus {
+ background-color: var(--bs-tertiary-bg);
+}
+
+.scrollarea {
+ overflow-y: auto;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/sidebars/sidebars.js b/gawa/static/bs5/site/content/docs/5.3/examples/sidebars/sidebars.js
new file mode 100644
index 0000000..4075f1f
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/sidebars/sidebars.js
@@ -0,0 +1,8 @@
+/* global bootstrap: false */
+(() => {
+ 'use strict'
+ const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+ tooltipTriggerList.forEach(tooltipTriggerEl => {
+ new bootstrap.Tooltip(tooltipTriggerEl)
+ })
+})()
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/sign-in/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/sign-in/index.html
new file mode 100644
index 0000000..8420c45
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/sign-in/index.html
@@ -0,0 +1,32 @@
+---
+layout: examples
+title: Signin Template
+extra_css:
+ - "sign-in.css"
+body_class: "d-flex align-items-center py-4 bg-body-tertiary"
+---
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/sign-in/sign-in.css b/gawa/static/bs5/site/content/docs/5.3/examples/sign-in/sign-in.css
new file mode 100644
index 0000000..641f6d9
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/sign-in/sign-in.css
@@ -0,0 +1,25 @@
+html,
+body {
+ height: 100%;
+}
+
+.form-signin {
+ max-width: 330px;
+ padding: 1rem;
+}
+
+.form-signin .form-floating:focus-within {
+ z-index: 2;
+}
+
+.form-signin input[type="email"] {
+ margin-bottom: -1px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"] {
+ margin-bottom: 10px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/starter-template/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/starter-template/index.html
new file mode 100644
index 0000000..0a24a1e
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/starter-template/index.html
@@ -0,0 +1,107 @@
+---
+layout: examples
+title: Starter Template
+---
+
+
+
+
+
+ Bootstrap
+
+
+
+
+
+
+
+ Get started with Bootstrap
+ Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.
+
+
+
+
+
+
Starter projects
+
Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.
+
+
+
+
+
Guides
+
Read more detailed instructions and documentation on using or contributing to Bootstrap.
+
+
+
+
+ Created by the Bootstrap team · © {{< year >}}
+
+
+
+
Sticky footer with fixed navbar
+
Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container.
+
Back to }}">the default sticky footer minus the navbar.
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css b/gawa/static/bs5/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css
new file mode 100644
index 0000000..3087ead
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css
@@ -0,0 +1,7 @@
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+
+main > .container {
+ padding: 60px 15px 0;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/sticky-footer/index.html b/gawa/static/bs5/site/content/docs/5.3/examples/sticky-footer/index.html
new file mode 100644
index 0000000..631adda
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/sticky-footer/index.html
@@ -0,0 +1,23 @@
+---
+layout: examples
+title: Sticky Footer Template
+extra_css:
+ - "sticky-footer.css"
+html_class: "h-100"
+body_class: "d-flex flex-column h-100"
+---
+
+
+
+
+
+
+
diff --git a/gawa/static/bs5/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css b/gawa/static/bs5/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css
new file mode 100644
index 0000000..f8be437
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css
@@ -0,0 +1,9 @@
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+
+.container {
+ width: auto;
+ max-width: 680px;
+ padding: 0 15px;
+}
diff --git a/gawa/static/bs5/site/content/docs/5.3/extend/approach.md b/gawa/static/bs5/site/content/docs/5.3/extend/approach.md
new file mode 100644
index 0000000..392aef4
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/extend/approach.md
@@ -0,0 +1,86 @@
+---
+layout: docs
+title: Approach
+description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
+group: extend
+aliases:
+ - "/docs/5.3/extend/"
+---
+
+While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.
+
+See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new/choose)—we'd love to discuss it with you.
+
+## Summary
+
+We'll dive into each of these more throughout, but at a high level, here's what guides our approach.
+
+- Components should be responsive and mobile-first
+- Components should be built with a base class and extended via modifier classes
+- Component states should obey a common z-index scale
+- Whenever possible, prefer an HTML and CSS implementation over JavaScript
+- Whenever possible, use utilities over custom styles
+- Whenever possible, avoid enforcing strict HTML requirements (children selectors)
+
+## Responsive
+
+Bootstrap's responsive styles are built to be responsive, an approach that's often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger.
+
+Across Bootstrap, you'll see this most clearly in our media queries. In most cases, we use `min-width` queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up.
+
+At times we'll use `max-width` when a component's inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.
+
+## Classes
+
+Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., `input[type="text"]`) and extraneous parent classes (e.g., `.parent .child`) that make styles too specific to easily override.
+
+As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-primary` to add the color, background-color, border-color, etc.
+
+Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you're actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.
+
+## z-index scales
+
+There are two `z-index` scales in Bootstrap—elements within a component and overlay components.
+
+### Component elements
+
+- Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the `border` property. For example, button groups, input groups, and pagination.
+- These components share a standard `z-index` scale of `0` through `3`.
+- `0` is default (initial), `1` is `:hover`, `2` is `:active`/`.active`, and `3` is `:focus`.
+- This approach matches our expectations of highest user priority. If an element is focused, it's in view and at the user's attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly _anything_ can be hovered.
+
+### Overlay components
+
+Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project's custom styles.
+
+Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars.
+
+Learn more about this in our [`z-index` layout page]({{< docsref "/layout/z-index" >}}).
+
+## HTML and CSS over JS
+
+Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
+
+This principle is our first-class JavaScript API using `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]({{< docsref "/getting-started/javascript#data-attributes" >}}).
+
+Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide any semantic value or browser functionality. So instead, we use ``s and ``s.
+
+The same goes for more complex components. While we _could_ write our own form validation plugin to add classes to a parent element based on an input's state, thereby allowing us to style the text say red, we prefer using the `:valid`/`:invalid` pseudo-elements every browser provides us.
+
+## Utilities
+
+Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combating CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., `.d-block` represents `display: block;`). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
+
+Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
+
+## Flexible HTML
+
+While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (`>`). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
+
+## Code conventions
+
+[Code Guide](https://codeguide.co/) (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifies guidelines for general formatting, common sense defaults, property and attribute orders, and more.
+
+We use [Stylelint](https://stylelint.io/) to enforce these standards and more in our Sass/CSS. [Our custom Stylelint config](https://github.com/twbs/stylelint-config-twbs-bootstrap) is open source and available for others to use and extend.
+
+We use [vnu-jar](https://www.npmjs.com/package/vnu-jar) to enforce standard and semantic HTML, as well as detecting common errors.
diff --git a/gawa/static/bs5/site/content/docs/5.3/extend/icons.md b/gawa/static/bs5/site/content/docs/5.3/extend/icons.md
new file mode 100644
index 0000000..1e26503
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/extend/icons.md
@@ -0,0 +1,40 @@
+---
+layout: docs
+title: Icons
+description: Guidance and suggestions for using external icon libraries with Bootstrap.
+group: extend
+---
+
+While Bootstrap doesn't include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We've included details for Bootstrap Icons and other preferred icon sets below.
+
+While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
+
+## Bootstrap Icons
+
+Bootstrap Icons is a growing library of SVG icons that are designed by [@mdo](https://github.com/mdo) and maintained by [the Bootstrap Team](https://github.com/orgs/twbs/people). The beginnings of this icon set come from Bootstrap's very own components—our forms, carousels, and more. Bootstrap has very few icon needs out of the box, so we didn't need much. However, once we got going, we couldn't stop making more.
+
+Oh, and did we mention they're completely open source? Licensed under MIT, just like Bootstrap, our icon set is available to everyone.
+
+[Learn more about Bootstrap Icons]({{< param icons >}}), including how to install them and recommended usage.
+
+## Alternatives
+
+We've tested and used these icon sets ourselves as preferred alternatives to Bootstrap Icons.
+
+{{< markdown >}}
+{{< icons.inline >}}
+{{- $type := .Get "type" | default "preferred" -}}
+
+{{- range (index .Site.Data.icons $type) }}
+- [{{ .name }}]({{ .website }})
+{{- end }}
+{{< /icons.inline >}}
+{{< /markdown >}}
+
+## More options
+
+While we haven't tried these out ourselves, they do look promising and provide multiple formats, including SVG.
+
+{{< markdown >}}
+{{< icons.inline type="more" />}}
+{{< /markdown >}}
diff --git a/gawa/static/bs5/site/content/docs/5.3/forms/checks-radios.md b/gawa/static/bs5/site/content/docs/5.3/forms/checks-radios.md
new file mode 100644
index 0000000..13a5091
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/forms/checks-radios.md
@@ -0,0 +1,313 @@
+---
+layout: docs
+title: Checks and radios
+description: Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
+group: forms
+aliases: "/docs/5.3/forms/checks/"
+toc: true
+---
+
+## Approach
+
+Browser default checkboxes and radios are replaced with the help of `.form-check`, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
+
+Structurally, our ``s are sibling elements as opposed to an ``. This is slightly more verbose as you must specify `id` and `for` attributes to relate the ``. We use the sibling selector (`~`) for all our `
+
+ Default checkbox
+
+
+
+
+ Checked checkbox
+
+
+{{< /example >}}
+
+### Indeterminate
+
+Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
+
+{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
+
+
+ Indeterminate checkbox
+
+
+{{< /example >}}
+
+### Disabled
+
+Add the `disabled` attribute and the associated ``s are automatically styled to match with a lighter color to help indicate the input's state.
+
+{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
+
+
+ Disabled indeterminate checkbox
+
+
+
+
+ Disabled checkbox
+
+
+
+
+ Disabled checked checkbox
+
+
+{{< /example >}}
+
+## Radios
+
+{{< example >}}
+
+
+ Default radio
+
+
+
+
+ Default checked radio
+
+
+{{< /example >}}
+
+### Disabled
+
+Add the `disabled` attribute and the associated ``s are automatically styled to match with a lighter color to help indicate the input's state.
+
+{{< example >}}
+
+
+ Disabled radio
+
+
+
+
+ Disabled checked radio
+
+
+{{< /example >}}
+
+## Switches
+
+A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the `disabled` attribute.
+
+{{< example >}}
+
+ Default switch checkbox input
+
+
+ Checked switch checkbox input
+
+
+ Disabled switch checkbox input
+
+
+ Disabled checked switch checkbox input
+
+{{< /example >}}
+
+## Default (stacked)
+
+By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
+
+{{< example >}}
+
+
+ Default checkbox
+
+
+
+
+ Disabled checkbox
+
+
+{{< /example >}}
+
+{{< example >}}
+
+
+ Default radio
+
+
+
+
+ Second default radio
+
+
+
+
+ Disabled radio
+
+
+{{< /example >}}
+
+## Inline
+
+Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.
+
+{{< example >}}
+
+ 1
+
+
+ 2
+
+
+ 3 (disabled)
+
+{{< /example >}}
+
+{{< example >}}
+
+ 1
+
+
+ 2
+
+
+ 3 (disabled)
+
+{{< /example >}}
+
+## Reverse
+
+Put your checkboxes, radios, and switches on the opposite side with the `.form-check-reverse` modifier class.
+
+{{< example >}}
+
+
+ Reverse checkbox
+
+
+
+
+ Disabled reverse checkbox
+
+
+
+
+ Reverse switch checkbox input
+
+{{< /example >}}
+
+## Without labels
+
+Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the [forms overview accessibility]({{< docsref "/forms/overview#accessibility" >}}) section for details.
+
+{{< example >}}
+
+
+
+
+
+{{< /example >}}
+
+## Toggle buttons
+
+Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `` elements. These toggle buttons can further be grouped in a [button group]({{< docsref "/components/button-group" >}}) if needed.
+
+### Checkbox toggle buttons
+
+{{< example >}}
+Single toggle
+{{< /example >}}
+
+{{< example >}}
+Checked
+{{< /example >}}
+
+{{< example >}}
+Disabled
+{{< /example >}}
+
+{{< callout info >}}
+Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]({{< docsref "/components/buttons#button-plugin" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
+{{< /callout >}}
+
+### Radio toggle buttons
+
+{{< example >}}
+Checked
+
+Radio
+
+Disabled
+
+Radio
+{{< /example >}}
+
+### Outlined styles
+
+Different variants of `.btn`, such at the various outlined styles, are supported.
+
+{{< example >}}
+Single toggle Checked Checked success radio
+
+Danger radio
+{{< /example >}}
+
+## CSS
+
+### Sass variables
+
+Variables for checks:
+
+{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}}
+
+Variables for switches:
+
+{{< scss-docs name="form-switch-variables" file="scss/_variables.scss" >}}
diff --git a/gawa/static/bs5/site/content/docs/5.3/forms/floating-labels.md b/gawa/static/bs5/site/content/docs/5.3/forms/floating-labels.md
new file mode 100644
index 0000000..a65a857
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/forms/floating-labels.md
@@ -0,0 +1,180 @@
+---
+layout: docs
+title: Floating labels
+description: Create beautifully simple form labels that float over your input fields.
+group: forms
+toc: true
+---
+
+## Example
+
+Wrap a pair of `` elements in `.form-floating` to enable floating labels with Bootstrap's textual form fields. A `placeholder` is required on each `
+ Email address
+
+
+ Password
+
+{{< /example >}}
+
+When there's a `value` already defined, ``s will automatically adjust to their floated position.
+
+{{< example >}}
+
+{{< /example >}}
+
+Form validation styles also work as expected.
+
+{{< example >}}
+
+{{< /example >}}
+
+## Textareas
+
+By default, `
+ Comments
+
+{{< /example >}}
+
+To set a custom height on your `
+ Comments
+
+{{< /example >}}
+
+## Selects
+
+Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike `` in its floated state. **Selects with `size` and `multiple` are not supported.**
+
+{{< example >}}
+
+
+ Open this select menu
+ One
+ Two
+ Three
+
+ Works with selects
+
+{{< /example >}}
+
+## Disabled
+
+Add the `disabled` boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.
+
+{{< example >}}
+
+ Email address
+
+
+
+ Comments
+
+
+
+ Comments
+
+
+
+ Open this select menu
+ One
+ Two
+ Three
+
+ Works with selects
+
+{{< /example >}}
+
+## Readonly plaintext
+
+Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `
+ Empty input
+
+
+ Input with value
+
+{{< /example >}}
+
+## Input groups
+
+Floating labels also support `.input-group`.
+
+{{< example >}}
+
+{{< /example >}}
+
+When using `.input-group` and `.form-floating` along with form validation, the `-feedback` should be placed outside of the `.form-floating`, but inside of the `.input-group`. This means that the feedback will need to be shown using javascript.
+
+{{< example >}}
+
+{{< /example >}}
+
+## Layout
+
+When working with the Bootstrap grid system, be sure to place form elements within column classes.
+
+{{< example >}}
+
+
+
+
+
+ Open this select menu
+ One
+ Two
+ Three
+
+ Works with selects
+
+
+
Password
+
+ Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
+
+{{< /example >}}
+
+Inline text can use any typical inline HTML element (be it a ``, ``, or something else) with nothing more than the `.form-text` class.
+
+{{< example >}}
+
+
+ Password
+
+
+
+
+
+ Must be 8-20 characters long.
+
+
+
+ Default file input example
+
+
+ Multiple files input example
+
+
+ Disabled file input example
+
+
+ Small file input example
+
+
+ Large file input example
+
+{{< /example >}}
+
+## Color
+
+Set the `type="color"` and add `.form-control-color` to the `Color picker
+`s that can be accessed (and autocompleted) from within an `` elements, but come with more menu styling limitations and differences. While most browsers and operating systems include some support for `` elements, their styling is inconsistent at best.
+
+Learn more about [support for datalist elements](https://caniuse.com/datalist).
+
+{{< example >}}
+Datalist example
+
+
+
+
+
+
+
+{{< /example >}}
+
+## CSS
+
+### Sass variables
+
+`$input-*` are shared across most of our form controls (and not buttons).
+
+{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}}
+
+`$form-label-*` and `$form-text-*` are for our ``s and `.form-text` component.
+
+{{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="form-text-variables" file="scss/_variables.scss" >}}
+
+`$form-file-*` are for file input.
+
+{{< scss-docs name="form-file-variables" file="scss/_variables.scss" >}}
diff --git a/gawa/static/bs5/site/content/docs/5.3/forms/input-group.md b/gawa/static/bs5/site/content/docs/5.3/forms/input-group.md
new file mode 100644
index 0000000..d984a48
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/forms/input-group.md
@@ -0,0 +1,319 @@
+---
+layout: docs
+title: Input group
+description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
+group: forms
+toc: true
+---
+
+## Basic example
+
+Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place ``s outside the input group.
+
+{{< example >}}
+
+ @
+
+
+
+ @example.com
+
+
+
+
Your vanity URL
+
+ https://example.com/users/
+
+
Example help text goes outside the input group.
+
+ $
+ .00
+
+
+
+ @
+
+
+
+ With textarea
+
+
+{{< /example >}}
+
+## Wrapping
+
+Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
+
+{{< example >}}
+
+ @
+
+{{< /example >}}
+
+## Sizing
+
+Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+
+**Sizing on the individual input group elements isn't supported.**
+
+{{< example >}}
+
+ Small
+
+
+
+ Default
+
+
+
+ Large
+
+{{< /example >}}
+
+## Checkboxes and radios
+
+Place any checkbox or radio option within an input group's addon instead of text. We recommend adding `.mt-0` to the `.form-check-input` when there's no visible text next to the input.
+
+{{< example >}}
+
+
+
+{{< /example >}}
+
+## Multiple inputs
+
+While multiple `
+ First and last name
+
+{{< /example >}}
+
+## Multiple addons
+
+Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
+
+{{< example >}}
+
+ $
+ 0.00
+
+
+
+ $
+ 0.00
+
+{{< /example >}}
+
+## Button addons
+
+{{< example >}}
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+ Button
+
+
+
+ Button
+ Button
+
+{{< /example >}}
+
+## Buttons with dropdowns
+
+{{< example >}}
+
+ Dropdown
+
+
+
+
+ Dropdown
+
+
+
+
+ Dropdown
+
+ Dropdown
+
+
+{{< /example >}}
+
+## Segmented buttons
+
+{{< example >}}
+
+ Action
+
+ Toggle Dropdown
+
+
+
+
+
+ Action
+
+ Toggle Dropdown
+
+
+
+{{< /example >}}
+
+## Custom forms
+
+Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
+
+### Custom select
+
+{{< example >}}
+
+ Options
+
+ Choose...
+ One
+ Two
+ Three
+
+
+
+
+
+ Choose...
+ One
+ Two
+ Three
+
+ Options
+
+
+
+ Button
+
+ Choose...
+ One
+ Two
+ Three
+
+
+
+
+
+ Choose...
+ One
+ Two
+ Three
+
+ Button
+
+{{< /example >}}
+
+### Custom file input
+
+{{< example >}}
+
+ Upload
+
+
+
+ Upload
+
+
+
+ Button
+
+
+
+ Button
+
+{{< /example >}}
+
+## CSS
+
+### Sass variables
+
+{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
diff --git a/gawa/static/bs5/site/content/docs/5.3/forms/layout.md b/gawa/static/bs5/site/content/docs/5.3/forms/layout.md
new file mode 100644
index 0000000..3b27e3f
--- /dev/null
+++ b/gawa/static/bs5/site/content/docs/5.3/forms/layout.md
@@ -0,0 +1,329 @@
+---
+layout: docs
+title: Layout
+description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
+group: forms
+toc: true
+---
+
+## Forms
+
+Every group of form fields should reside in a `