### BootstrapSettings Initialization

Source: https://github.com/martin-g/wicket-bootstrap/wiki/BootstrapSettings

Example of initializing BootstrapSettings and installing it in the Wicket application.

```APIDOC
## BootstrapSettings Initialization

### Description
This snippet demonstrates how to override the `Application.init()` method to install Bootstrap settings. It shows the creation of a `BootstrapSettings` instance and setting it to use minimized resources.

### Method
```java
@Override
public void init() {
    super.init();

    BootstrapSettings settings = new BootstrapSettings();
    settings.minify(true); // use minimized version of all bootstrap references

    Bootstrap.install(this, settings);
}
```
```

--------------------------------

### Install Bootstrap with Settings

Source: https://github.com/martin-g/wicket-bootstrap/wiki/BootstrapSettings

Override the Application.init() method to install Bootstrap with custom settings. Use this to enable minification for Bootstrap resources.

```java
    /**
     * @see org.apache.wicket.Application#init()
     */
    @Override
    public void init() {
        super.init();

        BootstrapSettings settings = new BootstrapSettings();
        settings.minify(true); // use minimized version of all bootstrap references

        Bootstrap.install(this, settings);
    }
```

--------------------------------

### Programmatic API Example

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Demonstrates chaining methods and initializing plugins programmatically. All public APIs are chainable and return the collection acted upon.

```javascript
$('.btn.danger').button('toggle').addClass('fat')
```

--------------------------------

### Accordion Example

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

An example of an accordion-style widget built using the collapse plugin. It uses `data-bs-toggle` and `data-bs-parent` attributes for group management.

```html
<div class="panel-group in" id="accordion2">
  <div class="panel">
    <div class="panel-heading">
      <a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="panel">
    <div class="panel-heading">
      <a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Media List Example

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html

Demonstrates how to use media objects within an unordered list, suitable for comment threads or article lists.

```html
<ul class="media-list">
  <li class="media">
    <a class="media-left" href="#">
      <img class="media-object" src="https://via.placeholder.com/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>
```

--------------------------------

### Install Bootstrap Settings in Wicket Application

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/README.md

Install the Bootstrap settings class in your Wicket application's Application#init() method. This enables the use of all wicket-bootstrap components. For customization, provide a BootstrapSettings object with your desired configurations.

```java
// best place to do this is in Application#init()
Bootstrap.install(this);

// if you want to customize bootstrap:
BootstrapSettings settings = new BootstrapSettings();
settings.setXXX(...);
Bootstrap.install(this, settings);
```

--------------------------------

### Handle Modal Show Event

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

An example of listening for the 'show.bs.modal' event and preventing the modal from being shown based on a condition.

```javascript
document.getElementById('myModal').addEventListener('show.bs.modal', function (e) {
    if (!data) return e.preventDefault() // stops modal from being shown
})
```

--------------------------------

### Basic Tabbable Interface Setup

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html

Implement tabbable content panes using Bootstrap's nav components. Each tab link should reference a unique `.tab-pane` ID, and all panes should be wrapped in a `.tab-content` container.

```html
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-bs-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-bs-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>
```

--------------------------------

### Creating a Nav List Example

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html

Build groups of navigation links with optional headers using a simple list structure. Add `class="nav flex-column"` to the `<ul>` element. Nested lists require `class="nav nav-list`.

```html
<ul class="nav flex-column">
  <li class="nav-item">List header</li>
  <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
  <li class="nav-item"><a href="#">Library</a></li>
  ...
</ul>
```

--------------------------------

### Using Font Awesome 5.x Icons

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/FontAwesomePage.html

Example of how to use Font Awesome 5.x icons by overriding the default dependency in `pom.xml` and using `FontAwesome5IconType` and `FontAwesome5Solid`.

```Java
add(new Icon("shield-rotate-normal", FontAwesome5IconType.shield));   add(new Icon("shield-rotate-90", FontAwesome5IconTypeBuilder.on(FontAwesome5Solid.shield)   		.rotate(Rotation.rotate_90).build()));   
```

--------------------------------

### ThemeProvider Interface

Source: https://github.com/martin-g/wicket-bootstrap/wiki/Themes

Defines methods for retrieving themes by name, listing available themes, and getting the default theme.

```java
public interface ThemeProvider {

    /**
     * returns a theme by its name. If
     *
     * @param name The name of the theme
     * @return the theme according to given name
     */
    Theme byName(final String name);

    /**
     * @return a list of all available themes
     */
    List<Theme> available();

    /**
     * @return the default theme
     */
    Theme defaultTheme();
}
```

--------------------------------

### Static Modal Example HTML

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

A static HTML structure for a Bootstrap modal, including header, body, and footer with action buttons.

```html
<div class="modal fade" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Modal header</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
```

--------------------------------

### Text Input Control

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseCssPage.html

Example of a standard text input field with Bootstrap styling.

```html
<input type="text" class="form-control" placeholder="Text input">
```

--------------------------------

### Default Media Object

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html

Example of a default media object, allowing an image to be floated left or right of a content block.

```html
<div class="media">
  <a class="media-left" href="#">
    <img class="media-object" src="https://via.placeholder.com/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...

    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>
```

--------------------------------

### Generated HTML with Modernizr

Source: https://github.com/martin-g/wicket-bootstrap/wiki/Html

Example of generated HTML tag attributes, including browser-specific classes when Modernizr is enabled.

```html
<!-- all none IE Browsers and IE > 8 -->
<html class="no-js" lang="en">
<!-- IE < 7 -->
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
```

--------------------------------

### Rotated and Flipped Font Awesome Icons

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/FontAwesomePage.html

Arbitrarily rotate and flip icons using `fa-rotate-*` and `fa-flip-*` classes. This example demonstrates various rotation and flip transformations.

```HTML
<i wicket:id="shield-rotate-normal"></i>	 normal   <i wicket:id="shield-rotate-90"></i>	 fa-rotate-90   <i wicket:id="shield-rotate-180"></i>	 fa-rotate-180   <i wicket:id="shield-rotate-270"></i>	 fa-rotate-270   <i wicket:id="shield-rotate-flip-horizontal"></i>	 fa-flip-horizontal   <i wicket:id="shield-rotate-flip-vertical"></i>	 fa-flip-vertical
```

--------------------------------

### Get and Initialize Alert Instance

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Retrieves or creates an Alert instance for a given selector. This is useful for programmatically controlling alerts, especially for animations.

```javascript
bootstrap.Alert.getOrCreateInstance('#myAlert')
```

--------------------------------

### Labeled Progress Bar

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html

To display a label on a progress bar, use the `Stack#labeled(true)` method. The example shows a basic progress bar structure.

```html
<div class="progress">
  <div class="progress-bar" style="width: 40%;"></div>
</div>
```

--------------------------------

### Dropdown within Navbar

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Example of integrating a dropdown menu into a navigation bar. This structure allows for nested navigation items.

```html
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown 
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>
```

--------------------------------

### Badge Markup

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html

Create a simple badge for counts or labels using the `.badge` class on a `<span>` element. This example shows a basic badge with the number '1'.

```html
<span class="badge">1</span>
```

--------------------------------

### Affix Initialization and Refresh

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Explains how to initialize the Affix component and refresh its state.

```APIDOC
## Affix Initialization and Refresh

### Description
Applies affix behavior to an element, pinning it to the viewport when scrolling past a specified offset. The `refresh` method is used to update its position after DOM changes.

### Method
JavaScript

### Usage
```javascript
// Initialize affix on an element
$('#affixElement').affix();

// Initialize with offset options
$('#affixElement').affix({
  offset: {
    top: 200
  }
});

// Refresh affix state after DOM manipulation
$('affixSelector').each(function () {
  $(this).affix('refresh');
});
```

### Data Attributes
- `data-spy="affix"`: Enables affix behavior.
- `data-offset-top="200"`: Sets the scroll offset in pixels from the top of the document.
```

--------------------------------

### Modal Initialization and Options

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Demonstrates how to initialize a modal with custom options using JavaScript.

```APIDOC
## Initialize Modal with Options

### Description
Activates a modal component with specified options. This can be done by passing an options object during initialization.

### Method
`new bootstrap.Modal(element, options)`

### Parameters
#### Element
- **element** (HTMLElement) - The DOM element representing the modal.

#### Options
- **backdrop** (boolean | 'static') - Default: `true`. Includes a modal-backdrop element. Set to `'static'` to prevent closing on click.
- **keyboard** (boolean) - Default: `true`. Closes the modal when the escape key is pressed.
- **focus** (boolean) - Default: `true`. Puts the focus on the modal when it is initialized.

### Request Example
```javascript
new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})
```
```

--------------------------------

### Initialize Bootstrap Modal

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Shows how to initialize a Bootstrap Modal instance with default options, custom options, or immediately invoke a method like 'show'.

```javascript
new bootstrap.Modal(document.getElementById('myModal'))
```

```javascript
new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false })
```

```javascript
new bootstrap.Modal(document.getElementById('myModal')).show()
```

--------------------------------

### Initialize Modal via JavaScript

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Instantiate a modal instance using JavaScript by providing the modal's DOM element and an optional options object.

```javascript
new bootstrap.Modal(document.getElementById('myModal'), options)
```

--------------------------------

### Accessing and Displaying Available Themes

Source: https://github.com/martin-g/wicket-bootstrap/wiki/Themes

This code snippet demonstrates how to retrieve a list of all available themes using the `ThemeProvider` and create menu buttons for each theme.

```APIDOC
## Accessing and Displaying Available Themes

### Description
Retrieves a list of available themes and creates menu buttons for each.

### Code Example
```java
IBootstrapSettings settings = Bootstrap.getSettings(getApplication());
List<Theme> themes = settings.getThemeProvider().available();
for (Theme theme : themes) {
       PageParameters params = new PageParameters();
       params.set("theme", theme.name());
       dropdown.addMenuButton(new MenuPageButton<Page>(getPage().getPageClass(), params, Model.of(theme.name())));
}
```
```

--------------------------------

### ActiveThemeProvider Interface

Source: https://github.com/martin-g/wicket-bootstrap/wiki/Themes

Defines methods for getting the current active theme and setting it by name or theme object. Includes a note about SessionThemeProvider.

```java
public interface ActiveThemeProvider {

    /**
     * returns the current active theme (can be user/session scoped). If none is
     * set a default theme should be returned (implementation specific).
     * There is a session scoped implementation: {@code SessionThemeProvider}
     *
     * @return the current active theme
     */
    Theme getActiveTheme();

    /**
     * sets the active theme by its name. 
     *
     * @param themeName the theme name
     */
    void setActiveTheme(String themeName);

    /**
     * sets the active theme
     *
     * @param theme the theme to set
     */
    void setActiveTheme(Theme theme);
}
```

--------------------------------

### Typeahead Initialization

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Shows how to initialize the Typeahead component with local or remote data sources.

```APIDOC
## Typeahead Initialization

### Description
Initializes the Typeahead component for input suggestions, supporting both local and remote data.

### Method
JavaScript

### Usage
```javascript
// With local data
var localDataSource = ['abc', 'def', 'ghi'];
var typeaheadLocal = new Typeahead('inputElementId', {
  local: localDataSource
});

// With remote data
var typeaheadRemote = new Typeahead('inputElementId', {
  remote: '/api/search?query=%QUERY'
});
```

### Notes
- Supports local, prefetch, and remote data providers.
- Currently, only one Dataset can be used at a time.
- Requires custom CSS for styling.
```

--------------------------------

### Popover Methods and Options

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Documentation for Bootstrap Popover Javascript API.

```APIDOC
## Popovers

### Description

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Requires [Tooltip](#tooltips) to be included.

### Usage

Enable popovers via JavaScript:

```javascript
$('#example').popover(options)
```

### Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.

| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | `true` | Apply a CSS fade transition to the popover. |
| html | boolean | `false` | Insert HTML into the popover. If false, jQuery's `text` method will be used. Use text if you're worried about XSS attacks. |
| placement | string|function | `'top'` | How to position the popover - `top` | `bottom` | `left` | `right`. |
| selector | string | `false` | If a selector is provided, popover objects will be delegated to the specified targets. |
| title | string | function | `''` | Default title value if `title` tag isn't present. |
| content | string | function | `''` | Default content value if `content` attribute isn't present. |
| trigger | string | `'hover'` | How popover is triggered - `click` | `hover` | `focus` | `manual`. |
| delay | number|object | `0` | Delay showing and hiding the popover (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { show: 500, hide: 100 }`.
| fallbackPlacement | string|array | `'flip'` | Specifies which side of the element to position the popover. |
| template | string | `<div class="popover" role="tooltip"><h3 class="popover-header"></h3><div class="popover-body"></div></div>` | Base HTML when creating the popover. Popover `header` and `body` will be populated via the `title` and `content` options respectively. |

**Heads up!** Options for individual popovers can alternatively be specified through the use of data attributes.

### Methods

#### `$().popover(options)`

Initializes popovers for the matched elements.

#### `.popover('show')`

Reveals an element's popover. Popovers that aren't initialized have no effect.

```javascript
$('#element').popover('show')
```

#### `.popover('hide')`

Hides an element's popover. Popovers that aren't initialized have no effect.

```javascript
$('#element').popover('hide')
```

#### `.popover('toggle')`

Toggles an element's popover. Popovers that aren't initialized have no effect.

```javascript
$('#element').popover('toggle')
```

#### `.popover('dispose')`

Hides and destroys an element's popover. Popovers that aren't initialized have no effect.

```javascript
$('#element').popover('dispose')
```
```

--------------------------------

### IBootstrapLessCompilerSettings

Source: https://github.com/martin-g/wicket-bootstrap/wiki/BootstrapSettings

Interface for configuring Less compiler settings.

```APIDOC
## Interface: IBootstrapLessCompilerSettings

### Description
This interface provides methods to configure the Less compiler used for generating CSS files from Less sources within a Wicket-Bootstrap project. It allows control over compilation, character encoding, compiler implementation, Less options, caching, and change storage.

### Methods

#### `setUseLessCompiler(boolean value)`
Turns on or off the Less compiler.

#### `useLessCompiler()`
Returns `true` if the Less compiler is enabled, `false` otherwise.

#### `setCharset(Charset charset)`
Sets the character set to be used when reading and writing Less/CSS files. The default is UTF-8.

#### `getCharset()`
Returns the character set currently in use.

#### `setLessCompiler(IBootstrapLessCompiler lessCompiler)`
Sets the specific Less compiler implementation to be used.

#### `getLessCompiler()`
Returns the currently configured Less compiler implementation.

#### `setLessOptions(LessOptions lessOptions)`
Configures the options for the Less compiler.

#### `getLessOptions()`
Returns the current Less compiler options.

#### `getCacheStrategy()`
Returns the current cache strategy for Less compilation.

#### `setCacheStrategy(CacheStrategy strategy)`
Sets the cache strategy to be used. Available strategies are `Never`, `Forever`, and `Modified`.

#### `storeChanges(boolean value)`
Determines whether to store all Less file changes directly into the CSS file.

#### `storeChanges()`
Returns `true` if Less file changes are stored in the CSS file, `false` otherwise.

### Enums

#### `CacheStrategy`
An enumeration defining the caching behavior for the Less compiler:
- `Never`: Caching is always disabled.
- `Forever`: Caching is always enabled.
- `Modified`: Caching is enabled and respects file modifications.
```

--------------------------------

### Tooltip Methods and Options

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Documentation for Bootstrap Tooltip Javascript API.

```APIDOC
## Tooltips

### Description

Tooltips are an updated version of the excellent jQuery.tipsy plugin, using CSS3 for animations and data-attributes for local title storage.

### Usage

Trigger the tooltip via JavaScript:

```javascript
$('#example').tooltip(options)
```

### Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.

| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | `true` | Apply a CSS fade transition to the tooltip. |
| html | boolean | `false` | Insert HTML into the tooltip. If false, jQuery's `text` method will be used. Use text if you're worried about XSS attacks. |
| placement | string|function | `'top'` | How to position the tooltip - `top` | `bottom` | `left` | `right`. |
| selector | string | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. |
| title | string | function | `''` | Default title value if `title` tag isn't present. |
| trigger | string | `'hover'` | How tooltip is triggered - `click` | `hover` | `focus` | `manual`. |
| delay | number|object | `0` | Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { show: 500, hide: 100 }`.

**Heads up!** Options for individual tooltips can alternatively be specified through the use of data attributes.

### Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

```html
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
```

### Methods

#### `$().tooltip(options)`

Attaches a tooltip handler to an element collection.

#### `.tooltip('show')`

Reveals an element's tooltip.

```javascript
$('#element').tooltip('show')
```

#### `.tooltip('hide')`

Hides an element's tooltip.

```javascript
$('#element').tooltip('hide')
```

#### `.tooltip('toggle')`

Toggles an element's tooltip.

```javascript
$('#element').tooltip('toggle')
```

#### `.tooltip('destroy')`

Hides and destroys an element's tooltip.

```javascript
$('#element').tooltip('destroy')
```
```

--------------------------------

### Carousel Initialization and Control

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Demonstrates how to initialize and control the carousel component using JavaScript.

```APIDOC
## Carousel Initialization and Control

### Description
Initializes the carousel with optional settings or controls its behavior programmatically.

### Method
JavaScript

### Usage
```javascript
// Initialize carousel with options
$('.carousel').carousel({
  interval: 2000
});

// Cycle through items
$('.carousel').carousel('cycle');

// Pause cycling
$('.carousel').carousel('pause');

// Go to a specific frame (0-based index)
$('.carousel').carousel(number);

// Go to the previous item
$('.carousel').carousel('prev');

// Go to the next item
$('.carousel').carousel('next');
```

### Events
- **slide**: Fires when the `slide` method is invoked.
- **slid**: Fires when the carousel has completed its slide transition.
```

--------------------------------

### Inline Font Awesome Icon

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/FontAwesomePage.html

Use the `<i>` tag with Font Awesome classes to display icons inline. This example shows a basic camera retro icon.

```HTML
<i wicket:id="inline-fa"></i> fa-camera-retro
```

--------------------------------

### Initialize Tooltip via JavaScript

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Initialize tooltips on an element using the .tooltip() method. Options can be passed as an object.

```javascript
$('#example').tooltip(options)
```

--------------------------------

### IBootstrapSettings Interface

Source: https://github.com/martin-g/wicket-bootstrap/wiki/BootstrapSettings

The IBootstrapSettings interface defines the contract for Bootstrap settings configuration.

```APIDOC
## IBootstrapSettings Interface

### Description
The `IBootstrapSettings` interface provides methods to configure various aspects of Bootstrap integration, including resource references, minification, modernizr usage, responsive CSS, and theme management.

### Methods

- **getCssResourceReference()**: Returns the base Twitter Bootstrap CSS resource reference.
- **getResponsiveCssResourceReference()**: Returns the Twitter Bootstrap responsive CSS resource reference.
- **getJsResourceReference()**: Returns the base Twitter Bootstrap JavaScript resource reference.
- **getJqueryPPResourceReference()**: Returns the jQuery++ resource reference.
- **useJqueryPP()**: Returns whether jQuery++ should be loaded.
- **useJqueryPP(boolean useJqueryPP)**: Sets whether jQuery++ should be loaded.
- **isMinified()**: Returns whether minification is active.
- **minify(boolean minify)**: Sets whether all references should be loaded minified.
- **useModernizr()**: Returns whether Modernizr should be loaded.
- **useModernizr(boolean useModernizr)**: Sets whether the Modernizr JavaScript library will be included.
- **useResponsiveCss()**: Returns whether responsive CSS will be included.
- **useResponsiveCss(boolean useResponsiveCss)**: Sets whether responsive CSS should be included.
- **setActiveThemeProvider(ActiveThemeProvider themeProvider)**: Sets the active theme provider.
- **getActiveThemeProvider()**: Returns the active theme provider.
- **getThemeProvider()**: Returns the theme provider.
- **setThemeProvider(ThemeProvider themeProvider)**: Sets the theme provider instance.
```

--------------------------------

### Button Toolbar with Icons

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseCssPage.html

Integrate Font Awesome icons within buttons inside a button toolbar for enhanced user interface elements. This example shows alignment icons within a button group.

```HTML
<div class="btn-toolbar">
  <div class="btn-group">

    <a class="btn" href="#"><i class="fa fa-align-left"></i></a>
    <a class="btn" href="#"><i class="fa fa-align-center"></i></a>
    <a class="btn" href="#"><i class="fa fa-align-right"></i></a>
    <a class="btn" href="#"><i class="fa fa-align-justify"></i></a>
  </div>
</div>
```

--------------------------------

### Initialize Navbar Component

Source: https://github.com/martin-g/wicket-bootstrap/wiki/Navbar

Instantiate a Navbar component with a wicket ID and configure its brand name and navigation buttons. Ensure the `fluid()` method is called for fluid layout.

```java
Navbar navbar = new Navbar("wicket-markup-id");
navbar.fluid();
navbar.brandName(Model.of("Project name"));
    
navbar.addButton(Position.LEFT,
        new NavbarButton<Home>(Home.class, Model.of("Home")),
        new NavbarButton<LinkPage>(LinkPage.class, Model.of("Link")),
        ...);
```

--------------------------------

### Initialize Typeahead with Remote Data

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Set up a Typeahead component to fetch suggestions from a remote data source. This requires implementing a custom getChoices method to handle the input.

```html
<input type="text" class="form-control"/>
```

```java
Dataset dataset = new Dataset("demoRemote");
Typeahead<String> typeahead = new Typeahead<String>(id, dataset) {
  @Override
  protected Iterable<String> getChoices(String input) {
    // 'dataSource' is application specific data provider
    List<String> choices = dataSource.getItems(input);
    return choices;
  }
};
typeahead.remote(true);
add(typeahead);
```

--------------------------------

### Initialize Modal with Options

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Configure modal behavior, such as disabling the keyboard close action, by passing an options object during JavaScript initialization.

```javascript
new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})
```

--------------------------------

### Basic HTML Structure

Source: https://github.com/martin-g/wicket-bootstrap/wiki/Html

A standard HTML5 document structure with Wicket namespace declaration.

```html
<!DOCTYPE html>
<html wicket:id="html" xmlns:wicket="http://wicket.apache.org">
    <head>

```

--------------------------------

### Initialize Popovers with JavaScript

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Initializes popovers for a collection of elements using jQuery. Options can be passed during initialization.

```javascript
$().popover(options)
```

--------------------------------

### Configure Dynamic Code Block

Source: https://github.com/martin-g/wicket-bootstrap/wiki/Block-Elements

Configure a Code component for dynamic content using an IModel. Line numbers and language can be specified.

```java
IModel<String> model = Model.of("" + 
    "<div class='btn-group'>" + 
    "<button class='btn'></button>"
    ...
    "</div>"
);

add(new Code("code-btn-group", model)
       .addLineNumbers()
       .language(CodeBehavior.Language.HTML));
```

--------------------------------

### Inline Form Layout

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseCssPage.html

Demonstrates an inline form layout for a compact user interface.

```html
<form class="form-inline">
  <div class="form-group">
      <input type="text" class="form-control input-sm" placeholder="Email">
      <input type="password" class="form-control input-sm" placeholder="Password">
      <div class="form-check">
          <input type="checkbox" class="form-check-input" >
          <label class="form-check-label"> Remember me </label>
      </div>
      <button type="submit" class="btn">Sign in</button>
  </div>
</form>
```

--------------------------------

### Configure Static Code Block

Source: https://github.com/martin-g/wicket-bootstrap/wiki/Block-Elements

Configure a Code component for static content, enabling line numbers and specifying the language. Use .from(int) to skip initial lines.

```java
add(new Code("code-btn-group")
       .addLineNumbers()
       .language(CodeBehavior.Language.HTML));
```

--------------------------------

### Popover Methods

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

API documentation for the Popover JavaScript plugin.

```APIDOC
## $().popover(options)

### Description
Initializes popovers for an element collection.

### Method
JavaScript

### Parameters
#### Options
- **animation** (boolean) - true - apply a css fade transition to the tooltip
- **html** (boolean) - false - Insert html into the popover. If false, jquery's `text` method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
- **placement** (string|function) - 'right' - how to position the popover - top | bottom | left | right
- **selector** (string) - false - if a selector is provided, tooltip objects will be delegated to the specified targets
- **trigger** (string) - 'click' - how popover is triggered - click | hover | focus | manual
- **title** (string | function) - '' - default title value if `title` attribute isn't present
- **content** (string | function) - '' - default content value if `data-bs-content` attribute isn't present
- **delay** (number | object) - 0 - delay showing and hiding the popover (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { show: 500, hide: 100 }`

## .popover('show')

### Description
Reveals an elements popover.

### Method
JavaScript

### Example
```javascript
$('#element').popover('show')
```

## .popover('hide')

### Description
Hides an elements popover.

### Method
JavaScript

### Example
```javascript
$('#element').popover('hide')
```

## .popover('toggle')

### Description
Toggles an elements popover.

### Method
JavaScript

### Example
```javascript
$('#element').popover('toggle')
```

## .popover('destroy')

### Description
Hides and destroys an element's popover.

### Method
JavaScript
```

--------------------------------

### Description List

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseCssPage.html

Use `<dl>`, `<dt>`, and `<dd>` tags for description lists. Bootstrap provides default styling.

```html
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
```

--------------------------------

### Button Methods

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

API documentation for the Button JavaScript plugin.

```APIDOC
## $().button('toggle')

### Description
Toggles push state. Gives the button the appearance that it has been activated.

### Method
JavaScript

### Notes
You can enable auto toggling of a button by using the `data-bs-toggle` attribute.

### Example
```html
<button type="button" class="btn" data-bs-toggle="button" >...</button>
```
```

--------------------------------

### Heading Styles

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseCssPage.html

Demonstrates the available HTML heading tags from h1 to h6, showcasing their default styling.

```html
h1. Heading 1
=============

h2. Heading 2
-------------

### h3. Heading 3

#### h4. Heading 4

##### h5. Heading 5

###### h6. Heading 6
```

--------------------------------

### IBootstrapSettings Interface Definition

Source: https://github.com/martin-g/wicket-bootstrap/wiki/BootstrapSettings

Defines the interface for Bootstrap settings, allowing customization of CSS and JavaScript resources, minification, Modernizr usage, responsive CSS inclusion, and theme provider configuration.

```java
package de.agilecoders.wicket.settings;

import org.apache.wicket.request.resource.ResourceReference;

/**
 * Settings interface for bootstrap settings.
 *
 * @author miha
 * @version 1.0
 */
public interface IBootstrapSettings {

    /**
     * @return the base twitter bootstrap css resource reference
     */
    ResourceReference getCssResourceReference();

    /**
     * @return the twitter bootstrap responsive css resource reference
     */
    ResourceReference getResponsiveCssResourceReference();

    /**
     * @return the base twitter bootstrap javascript resource reference
     */
    ResourceReference getJsResourceReference();

    /**
     * @return the jquery++ resource reference
     */
    ResourceReference getJqueryPPResourceReference();

    /**
     * @return true, if modernizr should be loaded
     */
    boolean useJqueryPP();

    /**
     * @param useJqueryPP true, if modernizr should be loaded
     */
    void useJqueryPP(final boolean useJqueryPP);

    /**
     * @return true if minification is active
     */
    boolean isMinified();

    /**
     * @param minify true, if all references should be loaded minified
     */
    void minify(final boolean minify);

    /**
     * @return true, if modernizr should be loaded
     */
    boolean useModernizr();

    /**
     * @param useModernizr true, if modernizr js library will be included
     */
    void useModernizr(final boolean useModernizr);

    /**
     * @return true, if responsive css will be included
     */
    boolean useResponsiveCss();

    /**
     * @param useResponsiveCss set to true if responsive css should be included
     */
    void useResponsiveCss(final boolean useResponsiveCss);

    /**
     * The {@link ActiveThemeProvider} provides access to the active theme
     *
     * @param themeProvider The {@link ActiveThemeProvider} instance
     */
    void setActiveThemeProvider(ActiveThemeProvider themeProvider);

    /**
     * @return The {@link ActiveThemeProvider} instance
     */
    ActiveThemeProvider getActiveThemeProvider();

    /**
     * @return The {@link ThemeProvider} instance
     */
    ThemeProvider getThemeProvider();

    /**
     * The {@link ThemeProvider} instance provides access to all available themes.
     *
     * @param themeProvider The {@link ThemeProvider} instance
     */
    void setThemeProvider(ThemeProvider themeProvider);

    /**
     * @return the {@link IBootstrapLessCompilerSettings} implementation
     */
    IBootstrapLessCompilerSettings getBootstrapLessCompilerSettings();
}
```

--------------------------------

### Modal Methods

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Provides documentation for directly invoking modal methods like toggle, show, and hide.

```APIDOC
## Modal Methods

### Description
These methods allow for programmatic control over the modal's visibility and state.

### Methods
#### `.toggle()`
Manually toggles the visibility of a modal. If the modal is shown, it will be hidden, and vice versa.

**Usage:**
```javascript
bootstrap.Modal.getInstance(document.getElementById('myModal')).toggle()
```

#### `.show()`
Manually opens a modal. The modal will slide down and fade in.

**Usage:**
```javascript
bootstrap.Modal.getInstance(document.getElementById('myModal')).show()
```

#### `.hide()`
Manually hides a modal. The modal will fade out and be removed from the DOM.

**Usage:**
```javascript
bootstrap.Modal.getInstance(document.getElementById('myModal')).hide()
```
```

--------------------------------

### Small Button Dropdown HTML

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html

HTML for a small button dropdown using `.btn-xs` class. Ensure the dropdown plugin is initialized.

```html
<div class="btn-group">
  <button class="btn btn-default btn-xs">Action</button>
  <button class="btn btn-default btn-xs dropdown-toggle" data-bs-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>
```

--------------------------------

### Initialize Carousel with Options

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Initialize the carousel with custom options, such as setting the interval for automatic cycling. Pass an options object to the carousel method.

```javascript
$('.carousel').carousel({
  interval: 2000
})
```

--------------------------------

### Standard Bootstrap Pagination

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Implements a basic pagination component using standard HTML links. Suitable for pages where navigation does not require dynamic updates.

```html
<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
```

--------------------------------

### Wicket-Bootstrap Samples Maven Dependency

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/README.md

Include this dependency to use all samples provided by Wicket-Bootstrap.

```xml
<dependency>
    <groupId>de.agilecoders.wicket</groupId>
    <artifactId>wicket-bootstrap-samples</artifactId>
    <version>6.y.z</version>
</dependency>
```

--------------------------------

### Retrieve Plugin Instance

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Illustrates how to retrieve a specific plugin instance attached to an element using the .data() method.

```javascript
$('[rel=popover]').data('popover')
```

--------------------------------

### Create Theme Button Component

Source: https://github.com/martin-g/wicket-bootstrap/wiki/Themes

Iterates through available themes and adds a menu button for each to a dropdown. Requires BootstrapBaseBehavior to render theme CSS.

```java
IBootstrapSettings settings = Bootstrap.getSettings(getApplication());
List<Theme> themes = settings.getThemeProvider().available();
for (Theme theme : themes) {
       PageParameters params = new PageParameters();
       params.set("theme", theme.name());
       dropdown.addMenuButton(new MenuPageButton<Page>(getPage().getPageClass(), params, Model.of(theme.name())));
}
```

--------------------------------

### Initialize Affix Plugin via JavaScript

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Activate the affix plugin on a specific element using jQuery. This is used to pin elements to the viewport when scrolling.

```javascript
$"#navbar").affix()
```

--------------------------------

### Initialize Popover via JavaScript

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Enable popovers on an element using the .popover() method. Requires the Tooltip component to be included.

```javascript
$('#example').popover(options)
```

--------------------------------

### Manually Show Modal via JavaScript

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Open a modal programmatically by invoking the `.show()` method on its instance.

```javascript
bootstrap.Modal.getInstance(document.getElementById('myModal')).show()
```

--------------------------------

### Collapse with Options

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Initializes a collapsible element with custom options, such as disabling the toggle behavior.

```javascript
$('#myCollapsible').collapse({
  toggle: false
})
```

--------------------------------

### Inline List

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseCssPage.html

Apply `.list-inline` and `.list-inline-item` classes to create an inline list.

```html
<ul class="list-inline">
    <li class="list-inline-item">Lorem ipsum</li>
    <li class="list-inline-item">Phasellus iaculis</li>
    <li class="list-inline-item">Nulla volutpat</li>
</ul>
```

--------------------------------

### IBootstrapLessCompilerSettings Interface

Source: https://github.com/martin-g/wicket-bootstrap/wiki/BootstrapSettings

Defines the configuration interface for the Less compiler. Use this to enable/disable the compiler, set character sets, specify the compiler implementation, configure Less options, and manage caching strategies.

```java
package de.agilecoders.wicket.settings;

import com.asual.lesscss.LessOptions;
import de.agilecoders.wicket.util.IBootstrapLessCompiler;

import java.nio.charset.Charset;

/**
 * The {@link IBootstrapLessCompilerSettings} interface.
 *
 * @author miha
 * @version 1.0
 */
public interface IBootstrapLessCompilerSettings {

    public enum CacheStrategy {
        Never, Forever, Modified
    }

    /**
     * Turns on the less compiler.
     *
     * @param value true, if less compiler should be used
     */
    void setUseLessCompiler(boolean value);

    /**
     * @return true, if less compiler should be used
     */
    boolean useLessCompiler();

    /**
     * Sets the charset to use when reading and writing less/css files.
     * Default: UTF-8
     *
     * @param charset the charset to use.
     */
    void setCharset(Charset charset);

    /**
     * @return the charset to use.
     */
    Charset getCharset();

    /**
     * The less compiler implementation that generates the css files.
     *
     * @param lessCompiler The less compiler to use
     */
    void setLessCompiler(IBootstrapLessCompiler lessCompiler);

    /**
     * @return The less compiler to use
     */
    IBootstrapLessCompiler getLessCompiler();

    /**
     * sets the less compiler options
     *
     * @param lessOptions the less compiler options
     */
    void setLessOptions(LessOptions lessOptions);

    /**
     * @return the less compiler options
     */
    LessOptions getLessOptions();

    /**
     * @return the cache strategy
     */
    CacheStrategy getCacheStrategy();

    /**
     * sets the {@link CacheStrategy} to use.
     *
     * @param strategy the cache strategy
     */
    void setCacheStrategy(CacheStrategy strategy);

    /**
     * whether to store all less file changes to the css file or not
     *
     * @param value true, if file should stored.
     */
    void storeChanges(boolean value);

    /**
     * @return true, if less file changes should stored in css file.
     */
    boolean storeChanges();
}

```

--------------------------------

### Initialize Typeahead with Local Data

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Configure a Typeahead component to use a predefined list of local data sources. This is suitable for a fixed set of suggestions.

```html
<input type="text" class="form-control"/>
```

```java
List<String> dataSource = List.of("abc", "def", "ghi");
Dataset dataset = new Dataset("demoLocal");
dataset.withLocal(dataSource);
Typeahead<String> typeahead = new Typeahead<String>(id, dataset);
add(typeahead);
```

--------------------------------

### Dropdowns via JavaScript

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

This section explains how to activate dropdowns programmatically using JavaScript.

```APIDOC
## Dropdowns via JavaScript

### Description
Activates dropdown functionality on elements.

### Method
JavaScript

### Usage
```javascript
$(".dropdown-toggle").dropdown()
```
```

--------------------------------

### Basic Progress Bar

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html

A default progress bar is created using the `.progress` and `.progress-bar` classes. The width style attribute controls the progress percentage.

```html
<div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>
```

--------------------------------

### Compact Table

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BaseCssPage.html

Use the `.table-sm` class to make tables more compact by reducing cell padding by half.

```html
<table class="table table-sm">
  ...
</table>
```

--------------------------------

### Event Handling

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Bootstrap plugins emit custom events for their unique actions, allowing for custom logic execution.

```APIDOC
## Event Handling

### Description
Bootstrap plugins provide custom events for their unique actions. Events are typically emitted in infinitive and past participle forms (e.g., `show` and `shown`). Infinitive events offer `preventDefault()` functionality.

### Event Example
Listen for the `show.bs.modal` event to execute custom logic before a modal is displayed.

### Method
```javascript
document.getElementById('myModal').addEventListener('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})
```

### Example
```javascript
document.getElementById('myModal').addEventListener('show.bs.modal', function (e) {
  // Check for data and prevent modal from showing if necessary
  if (!data) {
    e.preventDefault();
  }
})
```
```

--------------------------------

### Alert Methods

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

API documentation for the Alert JavaScript plugin.

```APIDOC
## bootstrap.Alert.getOrCreateInstance(selector)

### Description
Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the `.fade` and `.in` class already applied to them.

### Method
JavaScript

### Parameters
#### Arguments
- **selector** (string) - The selector for the alert element.

## alert.close()

### Description
Closes an alert.

### Method
JavaScript

### Example
```javascript
var alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()
```

### Events
#### close
This event fires immediately when the `close` instance method is called.

#### closed
This event is fired when the alert has been closed (will wait for css transitions to complete).

### Example
```javascript
$('#my-alert').bind('closed', function () {
  // do something...
})
```
```

--------------------------------

### Initialize Collapse via JavaScript

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/JavascriptPage.html

Manually enables the collapse plugin on elements with the class 'collapse'.

```javascript
'.collapse'.collapse()
```

--------------------------------

### Basic Warning Alert

Source: https://github.com/martin-g/wicket-bootstrap/blob/wicket-10.x-bootstrap-5.x/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html

Create a basic warning alert by wrapping text and an optional dismiss button in the `.alert` class. Ensure the dismiss button has the correct data attributes.

```html
<div class="alert alert-warning">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
```