# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Swapper is an exclusive component of Metronic that provides a simple and elegent solution to re-position HTML elements based on specific screen breakpoints.

# Usage

Swapper's Javascript bundles are globally included in all pages.

    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
    <script src="assets/js/scripts.bundle.js"></script>

# Initializationw

- Swapper is initialized by adding `data-kt-swapper="true"`to the root of the HTML that will be swapped positions.
- Add `data-kt-swapper-mode="prepend"`to the root HTML element to configure if the swapped element would be appended or prepended within the parent.
- Add `data-kt-swapper-parent="{default: '#parent_container_1', lg: '#parent_container_2'}"`to identify the parent containers that the swapping component will be added into based on Bootstrap's breakpoint sizes.
- Swapper instances can also be controlled programmatically. See below for more info.

# Basic Example

Here's a basic example of Swapper. Try the demo below by adjusting your browser width.
All child elements within the Swapper component will also swap parents.
Parent Element 1
This HTML element will swap parent elements on different screen breakpoints
Parent Element 2
Parent Element 3
Parent Element 4

    <div class="row g-10">
        <div class="col-lg-6">
            <div class="bg-light-primary h-100 p-5" id="kt_docs_swapper_parent_1">
                <div class="fw-boldest">Parent Element 1</div>

                <!--begin::Swapper-->
                <div class="mt-3"
                    data-kt-swapper="true"
                    data-kt-swapper-mode="append"
                    data-kt-swapper-parent="{
                        default: "#kt_docs_swapper_parent_4",
                        md: "#kt_docs_swapper_parent_3",
                        lg: "#kt_docs_swapper_parent_2",
                        xl: "#kt_docs_swapper_parent_1"
                    }">
                    This HTML element will swap parent elements on different screen breakpoints
                </div>
                <!--end::Swapper-->
            </div>
        </div>
        <div class="col-lg-6">
            <div class="bg-light-info h-100 p-5" id="kt_docs_swapper_parent_2">
                <div class="fw-boldest">Parent Element 2</div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="bg-light-warning h-100 p-5" id="kt_docs_swapper_parent_3">
                <div class="fw-boldest">Parent Element 3</div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="bg-light-success h-100 p-5" id="kt_docs_swapper_parent_4">
                <div class="fw-boldest">Parent Element 4</div>
            </div>
        </div>
    </div>

# Markup Reference

Swapper uses HTML attributes to set specific configurations. Here are the references for each below
HTML Attribute references

Name | Type | Description
--- | --- | ---
`data-kt-swapper` | `mandatory` | Enables the current element as the Swapper component. Accepts `true`or `false`values.
`data-kt-swapper-mode` | `optional` | Defines the re-positioning method. Accepts `append`or `prepend`. Defaults to `append`.
`data-kt-swapper-parent` | `mandatory` | Defines the parent element to be swapped into at specific Bootstrap breakpoints. This is compatible with Bootstrap's standard breakpoint sizing (eg: `sm, md, lg, xl`) with a similar `px`values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints. For example: `{default: '#parent_container_1', lg: '#parent_container_2'}`that the swapper component will swap the parent element from `#parent_container_1`to `#parent_container_2`when the screen grows from smaller sizes to `lg`size or bigger and vice versa.

# Methods

All Swapper components are initialized automatically, however the following are Password Meter's functionality methods for more control.

Name | Description
--- | ---
Static Methods
`createInstances(DOMString selector)` | Initializes Swapper instances by selector. Default value of `selector`is `[data-kt-swapper="true"]`. This method can be used to initialize dynamicly populated Swapper instances(e.g: after Ajax request).
    KTSwapper.createInstances();
`getInstance(DOMElement element)` | Get the Swapper instance created
    var swapperElement = document.querySelector("#kt_swapper_control");
    var swapper = KTSwapper.getInstance(swapperElement);
Public Methods
`update` | Forces the Swapper component to update and re-position depending on screen size.
    swapper.update();

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now