Repository: mmgalushka/bootwrap

Issue:
Add outline mix to the panel and text web components.

Discussion:

Patch:
diff --git a/bootwrap/components/panel.py b/bootwrap/components/panel.py
index c401cfe..72366d2 100644
--- a/bootwrap/components/panel.py
+++ b/bootwrap/components/panel.py
@@ -2,11 +2,11 @@
 A panel.
 """
 
-from .base import WebComponent, ClassMixin
+from .base import WebComponent, ClassMixin, AppearanceMixin, OutlineMixin
 from .utils import attr, inject
 
 
-class Panel(WebComponent, ClassMixin, ):
+class Panel(WebComponent, ClassMixin, AppearanceMixin, OutlineMixin):
     """A web component for a panel.
 
     Args:
@@ -15,9 +15,9 @@ class Panel(WebComponent, ClassMixin, ):
     Example:
         from bootwrap import Text, Panel
 
-        comp1 = Text("Component 1").add_classes("border").ms(1)
-        comp2 = Text("Component 2").add_classes("border").ms(1)
-        comp3 = Text("Component 3").add_classes("border").ms(1)
+        comp1 = Text("Component 1").as_outline().ms(1)
+        comp2 = Text("Component 2").as_outline().ms(1)
+        comp3 = Text("Component 3").as_outline().ms(1)
 
         output = Panel(comp1, comp2, comp3)
     """
@@ -30,50 +30,6 @@ class Panel(WebComponent, ClassMixin, ):
     def __iter__(self):
         return iter(self.__components)
 
-    def background(self, color):
-        """Sets the panel background color.
-
-        Args:
-            color (str):
-                The background color to set can be one of "primary",
-                "secondary", "success", "danger", "warning", "info",
-                "light", "dark", "body", "white","transparent"
-
-        Returns:
-            obj (self): The instance of this class.
-
-        Example:
-            from bootwrap import Panel, Text
-
-            output = Panel(
-                Panel(Text("primary").as_light()).background("primary").mb(1),
-                Panel(Text("secondary").as_light()).background("secondary").mb(1),
-                Panel(Text("success").as_light()).background("success").mb(1),
-                Panel(Text("danger").as_light()).background("danger").mb(1),
-                Panel(Text("warning")).background("warning").mb(1),
-                Panel(Text("info")).background("info").mb(1),
-                Panel(Text("light")).background("light").mb(1),
-                Panel(Text("dark").as_light()).background("dark").mb(1),
-                Panel(Text("body")).background("body").mb(1),
-                Panel(Text("white")).background("white").mb(1),
-                Panel(Text("transparent")).background("transparent").mb(1),
-            )
-        """
-        if not isinstance(color, str):
-            raise TypeError(
-                f"Invalid background color type, expected {type(str)}, "
-                f"but got {type(color)}."
-            )
-        if color not in [
-            "primary", "secondary", "success", "danger", "warning", 
-            "info", "light", "dark", "body", "white", "transparent"
-        ]:
-            raise ValueError(
-                f"Invalid panel background color: '{color}'."
-            )
-        self.add_classes(f"bg-{color}")
-        return self
-
     def as_collapse(self):
         """Makes the panel collapsed.
 
@@ -93,9 +49,9 @@ class Panel(WebComponent, ClassMixin, ):
         Example:
             from bootwrap import Text, Panel
 
-            comp1 = Text("Component 1").add_classes("border")
-            comp2 = Text("Component 2").add_classes("border")
-            comp3 = Text("Component 3").add_classes("border")
+            comp1 = Text("Component 1").as_outline()
+            comp2 = Text("Component 2").as_outline()
+            comp3 = Text("Component 3").as_outline()
 
             output = Panel(comp1, comp2, comp3).vertical()
         """
@@ -112,9 +68,9 @@ class Panel(WebComponent, ClassMixin, ):
         Example:
             from bootwrap import Text, Panel
 
-            comp1 = Text("Component 1").add_classes("border")
-            comp2 = Text("Component 2").add_classes("border")
-            comp3 = Text("Component 3").add_classes("border")
+            comp1 = Text("Component 1").as_outline()
+            comp2 = Text("Component 2").as_outline()
+            comp3 = Text("Component 3").as_outline()
 
             output = Panel(comp1, comp2, comp3).horizontal()
         """
@@ -135,16 +91,16 @@ class Panel(WebComponent, ClassMixin, ):
         Example:
             from bootwrap import Text, Panel
 
-            comp1 = Text("Component 1").as_light().add_classes("border").p(2).m(2)
-            comp2 = Text("Component 2").as_light().add_classes("border").p(2).m(2)
-            comp3 = Text("Component 3").as_light().add_classes("border").p(2).m(2)
+            comp1 = Text("Component 1").as_light().as_outline().p(2).m(2)
+            comp2 = Text("Component 2").as_light().as_outline().p(2).m(2)
+            comp3 = Text("Component 3").as_light().as_outline().p(2).m(2)
 
-            pnl_start = Panel(comp1, comp2, comp3).background("dark").justify_content("start").mt(1)
-            pnl_end = Panel(comp1, comp2, comp3).background("dark").justify_content("end").mt(1)
-            pnl_center = Panel(comp1, comp2, comp3).background("dark").justify_content("center").mt(1)
-            pnl_between = Panel(comp1, comp2, comp3).background("dark").justify_content("between").mt(1)
-            pnl_around = Panel(comp1, comp2, comp3).background("dark").justify_content("around").mt(1)
-            pnl_evenly = Panel(comp1, comp2, comp3).background("dark").justify_content("evenly").mt(1)
+            pnl_start = Panel(comp1, comp2, comp3).as_dark().justify_content("start").mt(1)
+            pnl_end = Panel(comp1, comp2, comp3).as_dark().justify_content("end").mt(1)
+            pnl_center = Panel(comp1, comp2, comp3).as_dark().justify_content("center").mt(1)
+            pnl_between = Panel(comp1, comp2, comp3).as_dark().justify_content("between").mt(1)
+            pnl_around = Panel(comp1, comp2, comp3).as_dark().justify_content("around").mt(1)
+            pnl_evenly = Panel(comp1, comp2, comp3).as_dark().justify_content("evenly").mt(1)
 
             output = Panel(
                 pnl_start,
@@ -186,15 +142,15 @@ class Panel(WebComponent, ClassMixin, ):
             from bootwrap import Text, Panel, Image
 
             image  = Image("logo.png", height="200px")
-            comp1 = Text("Component 1").as_light().add_classes("border").p(2).m(2)
-            comp2 = Text("Component 2").as_light().add_classes("border").p(2).m(2)
-            comp3 = Text("Component 3").as_light().add_classes("border").p(2).m(2)
+            comp1 = Text("Component 1").as_light().as_outline().p(2).m(2)
+            comp2 = Text("Component 2").as_light().as_outline().p(2).m(2)
+            comp3 = Text("Component 3").as_light().as_outline().p(2).m(2)
 
-            pnl_start = Panel(image, comp1, comp2, comp3).background("dark").align_items("start").mt(1)
-            pnl_end = Panel(image, comp1, comp2, comp3).background("dark").align_items("end").mt(1)
-            pnl_center = Panel(image, comp1, comp2, comp3).background("dark").align_items("center").mt(1)
-            pnl_baseline = Panel(image, comp1, comp2, comp3).background("dark").align_items("baseline").mt(1)
-            pnl_stretch = Panel(image, comp1, comp2, comp3).background("dark").align_items("stretch").mt(1)
+            pnl_start = Panel(image, comp1, comp2, comp3).as_dark().align_items("start").mt(1)
+            pnl_end = Panel(image, comp1, comp2, comp3).as_dark().align_items("end").mt(1)
+            pnl_center = Panel(image, comp1, comp2, comp3).as_dark().align_items("center").mt(1)
+            pnl_baseline = Panel(image, comp1, comp2, comp3).as_dark().align_items("baseline").mt(1)
+            pnl_stretch = Panel(image, comp1, comp2, comp3).as_dark().align_items("stretch").mt(1)
 
             output = Panel(
                 pnl_start,
@@ -221,6 +177,14 @@ class Panel(WebComponent, ClassMixin, ):
         return self
 
     def __str__(self):
+        if self._border:
+            self.add_classes(f'border')
+            if self._category:
+                self.add_classes(f'border-{self._category}')
+        else:
+            if self._category:
+                self.add_classes(f'bg-{self._category}')
+
         if self.__arrangement:
             if self.__arrangement == 'vertical':
 
diff --git a/bootwrap/components/text.py b/bootwrap/components/text.py
index 3f605ee..bb3f429 100644
--- a/bootwrap/components/text.py
+++ b/bootwrap/components/text.py
@@ -7,21 +7,32 @@ from textwrap import dedent
 from .base import (
     WebComponent,
     ClassMixin,
-    AppearanceMixin
+    AppearanceMixin,
+    OutlineMixin
 )
 from .utils import attr, tag
 
 
-class Text(WebComponent, ClassMixin, AppearanceMixin):
+class Text(WebComponent, ClassMixin, AppearanceMixin, OutlineMixin):
     """A web component for a text.
 
     Args:
         content (str): The textual content.
 
     Example:
-        from bootwrap import Text
-
-        output = Text("Normal text")
+        from bootwrap import Text, Panel
+
+        txt = Text("Text")
+        txt_outline = Text("Text with border").as_outline()
+        txt_primary = Text("Text of primary color").as_primary()
+        txt_primary_outline = Text("Text of primary color with border").as_primary().as_outline()
+
+        output = Panel(
+            txt,
+            txt_outline,
+            txt_primary,
+            txt_primary_outline
+        ).vertical()
     """
 
     def __init__(self, content):
@@ -83,9 +94,19 @@ class Text(WebComponent, ClassMixin, AppearanceMixin):
             obj (self): The instance of this class.
 
         Example:
-            from bootwrap import Text
+            from bootwrap import Text, Panel
+
+            txt_small = Text("Small text").as_small()
+            txt_small_outline = Text("Small text with border").as_small().as_outline()
+            txt_small_primary = Text("Small text of primary color").as_small().as_primary()
+            txt_small_primary_outline = Text("Small text of primary color with border").as_small().as_primary().as_outline()
 
-            output = Text("Small text").as_small()
+            output = Panel(
+                txt_small,
+                txt_small_outline,
+                txt_small_primary,
+                txt_small_primary_outline
+            ).vertical()
         """
         self.__small = True
         return self
@@ -97,9 +118,19 @@ class Text(WebComponent, ClassMixin, AppearanceMixin):
             obj (self): The instance of this class.
 
         Example:
-            from bootwrap import Text
+            from bootwrap import Text, Panel
 
-            output = Text("Strong text").as_strong()
+            txt_strong = Text("Strong text").as_strong()
+            txt_strong_outline = Text("Strong text with border").as_strong().as_outline()
+            txt_strong_primary = Text("Strong text of primary color").as_strong().as_primary()
+            txt_strong_primary_outline = Text("Strong text of primary color with border").as_strong().as_primary().as_outline()
+
+            output = Panel(
+                txt_strong,
+                txt_strong_outline,
+                txt_strong_primary,
+                txt_strong_primary_outline
+            ).vertical()
         """
         self.__strong = True
         return self
@@ -137,39 +168,34 @@ class Text(WebComponent, ClassMixin, AppearanceMixin):
         return self
 
     def __str__(self):
-        def wrap_as_small(c):
-            if self.__small:
-                return f'<small>{c}</small>'
-            return c
-
-        def wrap_as_strong(c):
-            if self.__strong:
-                return f'<strong>{c}</strong>'
-            return c
-
-        def wrap_as_main(c):
-            classes = ''
-            if self._category:
-                classes = f'text-{self._category}'
+        if self._category:
+            self.add_classes(f'text-{self._category}')
 
-            if self.classes:
-                classes += f' {self.classes}'
-
-            attrs = [
-                attr("id", self.identifier),
-                attr("class", classes)
-            ]
-            if self.__level:
-                return tag(f'h{self.__level}', attrs, c)
+        if self._border:
+            self.add_classes(f'border')
+            if self._category:
+                self.add_classes(f'border-{self._category}')
+
+        attrs = [
+            attr("id", self.identifier),
+            attr("class", self.classes)
+        ]
+
+        if self.__level:
+            return tag(f'h{self.__level}', attrs, dedent(self.__content))
+        else:
+            if self.__code:
+                return tag(
+                    'pre',
+                    attrs,
+                    tag('code', [attr('class', 'python')], dedent(self.__content))
+                )
             else:
-                if self.__code:
-                    return tag(
-                        'pre',
-                        attrs,
-                        tag('code', [attr('class', 'python')], dedent(c))
-                    )
+                if self.__paragraph:
+                    return tag('p', attrs, dedent(self.__content))
+                elif self.__strong:
+                    return tag('strong', attrs, dedent(self.__content))
+                elif self.__small:
+                    return tag('small', attrs, dedent(self.__content))
                 else:
-                    if self.__paragraph:
-                        return tag('p', attrs, c)
-                    return tag('span', attrs, c)
-        return wrap_as_main(wrap_as_strong(wrap_as_small(self.__content)))
+                    return tag('span', attrs, dedent(self.__content))
\ No newline at end of file
diff --git a/docs/base.html b/docs/base.html
index 992cd26..9b08c83 100644
--- a/docs/base.html
+++ b/docs/base.html
@@ -21,12 +21,10 @@
  </head>
  <body>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-   <img alt="Bootwrap Logo" id="7799bb45-a6cf-405f-b717-814fd6daf406" src="logo.png" width="32"/>
-   <span class="text-light" id="f5fad04e-b7c7-4173-9d63-f2b6368e5e87">
-    <strong>
-     Bootwrap
-    </strong>
-   </span>
+   <img alt="Bootwrap Logo" id="a021d9be-cd90-4bb1-b665-6ee9e39e2104" src="logo.png" width="32"/>
+   <strong class="text-light" id="d682c2a0-c1f4-4d36-93a2-9493151c0db8">
+    Bootwrap
+   </strong>
    <button aria-controls="menu" aria-expanded="false" aria-label="Toggle menu" class="navbar-toggler" data-bs-target="#menu" data-bs-toggle="collapse" type="button">
     <span class="navbar-toggler-icon">
     </span>
@@ -34,90 +32,90 @@
    <div class="collapse navbar-collapse" id="menu">
     <ul class="navbar-nav me-auto">
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="index.html" id="10520e1b-1d05-45c7-8543-3624baa8b041">
+      <a class="ms-2 nav-link" href="index.html" id="05775015-9817-43f4-9f07-740a85b0d60f">
        Home
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="layout.html" id="534c6fa9-0f7a-48bb-b829-40edbc250512">
+      <a class="ms-2 nav-link" href="layout.html" id="997ca649-449e-471c-b23e-910f575b215e">
        Layout
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="base.html" id="4c40ef86-0816-42ef-a91f-127b285e7f35">
+      <a class="ms-2 nav-link" href="base.html" id="ac0130fe-afff-4d0f-a16d-7bdeb61f3381">
        Base
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="components.html" id="78459787-01e3-4425-8e8b-ba4d70c69648">
+      <a class="ms-2 nav-link" href="components.html" id="d38c3007-518f-4fb2-bd71-0b55919d9f67">
        Components
       </a>
      </li>
     </ul>
-    <a class="ms-2 btn btn-outline-light" href="https://github.com/mmgalushka/bootwrap" id="96e9c1ae-2714-45fe-9a6f-4ba3eb757ee7" role="button">
+    <a class="ms-2 btn btn-outline-light" href="https://github.com/mmgalushka/bootwrap" id="eba13a5c-2af8-4948-bd1d-4490c34f8a3f" role="button">
      GitHub
     </a>
    </div>
   </nav>
   <div class="container-fluid">
-   <ul class="nav nav-pills" id="1f5a0342-326f-494a-844f-b4085b91e21e" role="tablist">
+   <ul class="nav nav-pills" id="14bded5c-a095-4831-9c7b-5cf005947da0" role="tablist">
     <li class="nav-item">
-     <a class="nav-link active" data-bs-target="#6f32ce2d-12bf-4270-988f-443955de42fd" data-bs-toggle="tab" href="#6f32ce2d-12bf-4270-988f-443955de42fd" id="5dcd1848-f390-49aa-a46d-2ce037bfb841" role="tab">
+     <a class="nav-link active" data-bs-target="#f9276721-86c5-438c-b94e-ee96787b6580" data-bs-toggle="tab" href="#f9276721-86c5-438c-b94e-ee96787b6580" id="9cdb9f3f-c0f2-4c70-8f6d-6ad74b7e4a9f" role="tab">
       WebComponent
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#bccd935f-2d89-4b82-86c1-5ee9045b5479" data-bs-toggle="tab" href="#bccd935f-2d89-4b82-86c1-5ee9045b5479" id="941c3988-aaae-4bf8-8070-a2fbaaecdbad" role="tab">
+     <a class="nav-link" data-bs-target="#014ca339-fa9a-4672-b033-4c1a3d6afff4" data-bs-toggle="tab" href="#014ca339-fa9a-4672-b033-4c1a3d6afff4" id="d01979bf-2b48-4a2e-aaac-683713dc199f" role="tab">
       ClassMixin
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#7c0d76a6-5988-4782-989d-1b8ed90dfc3f" data-bs-toggle="tab" href="#7c0d76a6-5988-4782-989d-1b8ed90dfc3f" id="b15a82f9-0399-47bf-9cee-5f221285e7ca" role="tab">
+     <a class="nav-link" data-bs-target="#23dfcf5f-4590-4252-bf75-ccb2ce4067ec" data-bs-toggle="tab" href="#23dfcf5f-4590-4252-bf75-ccb2ce4067ec" id="ec4c3f59-8fac-4da8-91d6-ce3a25a11edd" role="tab">
       ActionMixin
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#ec9f61fb-fdb1-4703-998b-8917ae613e82" data-bs-toggle="tab" href="#ec9f61fb-fdb1-4703-998b-8917ae613e82" id="c92a0d8a-e237-4783-b1f0-a50735a1c20e" role="tab">
+     <a class="nav-link" data-bs-target="#cc4a1b9b-7195-42ae-b952-f9b4fe4b90eb" data-bs-toggle="tab" href="#cc4a1b9b-7195-42ae-b952-f9b4fe4b90eb" id="10444a20-d20b-480e-b0e9-2799177ee1ec" role="tab">
       AppearanceMixin
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#d5adb124-ba0d-4a87-8f30-878ae41948de" data-bs-toggle="tab" href="#d5adb124-ba0d-4a87-8f30-878ae41948de" id="8448bbcc-fe3a-4a99-b47d-e047c25320d4" role="tab">
+     <a class="nav-link" data-bs-target="#9ce0c44e-3540-4c12-a10f-1e7e95633612" data-bs-toggle="tab" href="#9ce0c44e-3540-4c12-a10f-1e7e95633612" id="0aabe8b6-59d7-4ab6-a4cb-8fd8f0580a4c" role="tab">
       OutlineMixin
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#7d094c5d-efd1-490c-a881-2ed743811df8" data-bs-toggle="tab" href="#7d094c5d-efd1-490c-a881-2ed743811df8" id="e73b325b-34d0-4d83-bda5-0761a8a3d957" role="tab">
+     <a class="nav-link" data-bs-target="#4d612acb-c719-4e1e-b825-cb38f7378916" data-bs-toggle="tab" href="#4d612acb-c719-4e1e-b825-cb38f7378916" id="b9303d42-9f61-49e1-9e95-4b70b5c6e389" role="tab">
       AvailabilityMixin
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#dc0c6da3-d05d-456b-b1a5-fd4d60d9c1e9" data-bs-toggle="tab" href="#dc0c6da3-d05d-456b-b1a5-fd4d60d9c1e9" id="45ecc905-2c99-40c8-a20b-b6242fc1654b" role="tab">
+     <a class="nav-link" data-bs-target="#5b238ddf-f83e-43a9-8aeb-a7db32168c20" data-bs-toggle="tab" href="#5b238ddf-f83e-43a9-8aeb-a7db32168c20" id="dfa670c0-2b5a-4250-b2d4-b845c62d233a" role="tab">
       Constants
      </a>
     </li>
    </ul>
    <div class="tab-content">
-    <div class="tab-pane fade active show" id="6f32ce2d-12bf-4270-988f-443955de42fd">
-     <div class="mt-5" id="3dea0c0e-951d-47de-8aa7-531885751d7d">
-      <div class="d-flex justify-content-between" id="fbf5796b-fcf9-41eb-8361-a390c5a6bee7">
-       <h1 id="093c0366-e476-4d6e-bcbe-030653a24f96">
+    <div class="tab-pane fade active show" id="f9276721-86c5-438c-b94e-ee96787b6580">
+     <div class="mt-5" id="c5312847-bb88-40ab-9297-420176f55de0">
+      <div class="d-flex justify-content-between" id="5c6bbb52-5f3d-4c8b-b6ba-748f378a00bb">
+       <h1 id="1737616b-c984-40be-8821-875280f8d55c">
         Class
-        <span class="text-primary" id="1cd72269-f54d-4622-8d19-63222783a9aa">
+        <span class="text-primary" id="d75816ac-0301-4427-aec4-517041361c66">
          WebComponent
         </span>
        </h1>
-       <div id="99112522-7837-4499-80c6-54556de99827">
+       <div id="b0f2977b-3c0e-4066-8440-2f8acb893255">
        </div>
       </div>
-      <span class="text-muted" id="cea387cf-37fc-4c61-91b4-9579164eeed2">
+      <span class="text-muted" id="ab75621b-21ca-4521-8b28-ff859a51c2af">
        A web component base class.
       </span>
-      <pre id="8c880438-048c-46c1-99dc-ae63d8ddc3a6"><code class="python">WebComponent()</code></pre>
-      <p id="4d30b16a-2e78-48bb-91c7-1505a36dfc6c">
+      <pre id="38bf5838-7ad0-4583-b038-afb11cb64cea"><code class="python">WebComponent()</code></pre>
+      <p id="15fd9b3a-9d9b-445c-8dee-74de90676f10">
        This class must be inherited by all web components.
       </p>
-      <p id="7be2afb7-f95c-4495-a414-4ee9c7a4ea46">
+      <p id="b24e2f26-17fb-41b0-8459-eeef353bcae2">
        In many operations where one web component encapsulates another one has
     implemented a type check. If the received element is not
        <code>
@@ -134,13 +132,11 @@
        </code>
        class.
       </p>
-      <div class="ms-3" id="b8cf0e42-d426-4c6c-a4dd-591b11e02d8d">
-       <h6 id="2b0cf1f1-6895-4d54-867c-a1935a29bf05">
-        <strong>
-         Example
-        </strong>
+      <div class="ms-3" id="7d0bf5b3-d2c4-467f-8c25-5a1a936fdb36">
+       <h6 id="44cfda0f-bf97-42d3-94bc-30ffe58db4bb">
+        Example
        </h6>
-       <pre id="a926639d-7185-472d-acbf-5d70c20024ab"><code class="python">from bootwrap import WebComponent
+       <pre id="fda76377-1386-44d2-aca3-b09fd4978ef9"><code class="python">from bootwrap import WebComponent
 
 class CustomHeader(WebComponent):
     def __init__(self, title):
@@ -154,17 +150,17 @@ class CustomHeader(WebComponent):
         '''
 </code></pre>
       </div>
-      <div class="mt-5" id="d839386e-ba5e-4cca-a9f5-d54ab1d28422">
-       <h4 id="2f15d267-cc01-4682-9679-d489b32c586a">
+      <div class="mt-5" id="3034801f-2637-4086-9556-e2bb3bd02637">
+       <h4 id="0859876a-ed10-4bed-b34c-5491337d6e50">
         Property
-        <span class="text-primary" id="cbddcd60-9a2e-4a17-b6d8-1639eabe3997">
+        <span class="text-primary" id="5734063c-ea28-438d-af95-c3a2f77ede3d">
          identifier
         </span>
        </h4>
-       <span class="text-muted" id="93f7de72-2a71-49db-a433-eae6d119d3b6">
+       <span class="text-muted" id="e452f020-612c-4416-a586-1634780e7615">
         A unique web component identifier.
        </span>
-       <p id="fb75f930-80cb-4e4b-9e3a-92eb9421ccf1">
+       <p id="ccdd7dde-4231-4c6d-8ead-b376feb6a0de">
         Every
         <code>
          WebComponent
@@ -177,7 +173,7 @@ class CustomHeader(WebComponent):
         </code>
         .
        </p>
-       <p id="5b2fbaac-6c2b-4273-aea9-32823801d5c5">
+       <p id="a8907cea-932d-4aa1-aa86-d0003b373016">
         When you create a custom
         <code>
          WebComponent
@@ -193,13 +189,11 @@ class CustomHeader(WebComponent):
         </code>
         .
        </p>
-       <div class="ms-3" id="9ae1cce9-8621-40cd-af99-bd48642d87a3">
-        <h6 id="b16d3f63-9a4d-4e63-9ef2-8bc07d9c2068">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="1d75141c-3273-48ce-9259-62fb0d3c7d58">
+        <h6 id="6bcff2e3-4921-4aec-884a-6e7926c658aa">
+         Example
         </h6>
-        <pre id="34328aca-a85a-40af-bcf4-b16c290f7686"><code class="python">header = CustomHeader('Hello World")
+        <pre id="bee726a7-f10a-414b-8807-76986342de94"><code class="python">header = CustomHeader('Hello World")
 print(header.classes)
 
 # Result: cfe040e6-df5f-4a3a-b96e-b0cefc31bbd9
@@ -208,43 +202,41 @@ print(header.classes)
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="bccd935f-2d89-4b82-86c1-5ee9045b5479">
-     <div class="mt-5" id="7e27e5ad-422d-48c7-b7b5-a128eb57f3a0">
-      <div class="d-flex justify-content-between" id="32c013d6-ebac-4b28-876c-2acedf454aca">
-       <h1 id="9b2706e1-5d7f-4a4d-ba70-a98fa2e9e6f5">
+    <div class="tab-pane fade" id="014ca339-fa9a-4672-b033-4c1a3d6afff4">
+     <div class="mt-5" id="eff8aeaf-7fc0-45ae-a60d-8b303eff179a">
+      <div class="d-flex justify-content-between" id="9ffa3ff6-1eae-48c2-9064-a5a935fcf884">
+       <h1 id="436f1cee-f8d9-470c-b668-0f58f868655a">
         Class
-        <span class="text-primary" id="220a7efc-7909-42d4-b27d-39898d910ac5">
+        <span class="text-primary" id="a32b2cec-cf8e-48b7-8e79-f989f2950a46">
          ClassMixin
         </span>
        </h1>
-       <div id="075edd31-e3cf-478b-b723-3736ebd8ebc7">
+       <div id="376e2418-c8a4-4358-8be5-cdfe9636a2fb">
        </div>
       </div>
-      <span class="text-muted" id="0df0aab4-cb43-426f-bdf3-4f74d17ebbb7">
+      <span class="text-muted" id="a504662f-fd7b-4dd7-9503-959975cff511">
        Mixin for a web component which class can be amended.
       </span>
-      <pre id="e732eab4-4c9b-4e40-ad79-3cf0fb8cde95"><code class="python">ClassMixin()</code></pre>
-      <p id="722e97c1-bb7a-432b-bfc8-e702e405177c">
+      <pre id="084b054c-6b48-492a-a0a7-ff6de7d9e73b"><code class="python">ClassMixin()</code></pre>
+      <p id="ec220be9-ac9f-4a45-ab06-5acc404a10af">
        The vast majority of web components in Bootwrap inherit this class.
     It allows a user to adjust web components look and feel.
       </p>
-      <div class="mt-5" id="6f64dc00-4b23-4e43-98b1-c42a84f7eb06">
-       <h4 id="831b2ff7-1be1-402f-ad96-c747305b65a5">
+      <div class="mt-5" id="00fab7c1-738a-4740-9e61-1049a75e3de2">
+       <h4 id="15764ea6-25f7-45fb-b050-bc11fd925402">
         Property
-        <span class="text-primary" id="9708b8e0-5e7f-4e38-816c-a16cdec8da42">
+        <span class="text-primary" id="d29508c3-5877-4350-939d-80c9020d4b0a">
          classes
         </span>
        </h4>
-       <span class="text-muted" id="13b0e1d8-2828-412f-be86-363771f32aff">
+       <span class="text-muted" id="97346f1a-96e4-4ad6-8ceb-2610f3771f32">
         The web component classes.
        </span>
-       <div class="ms-3" id="0c5de563-e324-4ee7-834f-9935b730fede">
-        <h6 id="85aead24-3bee-44eb-a0aa-e8910b97fa85">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="37332fca-1947-4c63-8a55-73796d530503">
+        <h6 id="30e679ba-3141-4373-9578-f4f773ca675a">
+         Example
         </h6>
-        <pre id="a48ef625-b090-4651-964e-1e959afe1d4e"><code class="python">from bootwrap import Button
+        <pre id="4a80996b-052c-4847-9834-3948e3a4cbf2"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").add_classes("ms-1 me-1")
@@ -254,34 +246,32 @@ print(button.classes)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="b96b10a6-a682-4420-81ea-5c99e737623f">
-       <div class="d-flex justify-content-between" id="f47f6b73-3f55-4631-8562-6dc5e8faca5f">
-        <h4 id="d6d64574-8496-4be2-9e62-d3734fb4f98f">
+      <div class="mt-5" id="aba54d9d-521b-4f1e-82bd-fc92496deaea">
+       <div class="d-flex justify-content-between" id="2122419d-c7de-45d9-9f3f-c4980b1d8aa8">
+        <h4 id="77c06f50-3cff-461d-a2b7-f14ae36ee3d8">
          Method
-         <span class="text-primary" id="f648e272-deac-4edb-bce6-f29eb4c6c046">
+         <span class="text-primary" id="29c8feac-e635-4338-b489-e36dc0d4392a">
           add_classes
          </span>
         </h4>
-        <div id="3c767ffd-881f-4cd4-8a45-ea03cd7eea83">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#290102fb-5283-4783-967c-ec6f180d015e" data-bs-toggle="collapse" id="89bde5e6-1011-4fa3-93a5-6d639a89b3fb" onclick="return false;" type="button">
+        <div id="5256383b-34d4-4510-b8bf-99a0ea06cfc7">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#82c3ab93-6282-4908-b643-a48b50848381" data-bs-toggle="collapse" id="6157ddfd-f78f-426e-b35e-75768a6a77a8" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#6100aee6-14d3-460f-a8d0-002f91dd51fe" data-bs-toggle="collapse" id="2eb59159-c23b-4c97-b2e8-a3c69af52f15" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#e9f7dcee-4989-40c9-8952-8a2fcb41d14f" data-bs-toggle="collapse" id="f387b56c-2013-45e9-a92a-515f13a70a45" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="3220fd7e-cd1b-4ec4-9ce0-5a7efc20a563">
+       <span class="text-muted" id="4442d3a0-6a94-4a04-9c1d-2fe854857b16">
         Adds other classes.
        </span>
-       <pre id="a91b92fc-b63a-4488-923f-d9654faf4929"><code class="python">add_classes(classes)</code></pre>
-       <div class="ms-3 collapse" id="290102fb-5283-4783-967c-ec6f180d015e">
-        <h6 id="10c98046-72af-4f5c-868e-b85e3b3d5a82">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="505495c0-e3e4-4674-88ca-0733d7ba6c6e">
+       <pre id="ad071a76-4f26-40bb-8d25-33888d1ad1ec"><code class="python">add_classes(classes)</code></pre>
+       <div class="ms-3 collapse" id="82c3ab93-6282-4908-b643-a48b50848381">
+        <h6 id="34025c73-4a22-4d74-a314-467bedb251d3">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="e1925dfb-ac89-40c1-ba59-786d4d41ee13">
          <thead>
           <tr>
            <th scope="col">
@@ -315,13 +305,11 @@ print(button.classes)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="6100aee6-14d3-460f-a8d0-002f91dd51fe">
-        <h6 id="6547f97e-6def-43d4-80f9-77c8962799e5">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="e9f7dcee-4989-40c9-8952-8a2fcb41d14f">
+        <h6 id="28d3d9c8-437d-46d8-8f84-6c629d6da77c">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="93e2e9e6-e50b-4ed6-b8a2-7fff80b315d5">
+        <table class="table table-sm bg-light" id="811afa75-80a8-4d12-beba-2cf586f86d84">
          <thead>
           <tr>
            <th scope="col">
@@ -354,51 +342,47 @@ print(button.classes)
          </tbody>
         </table>
        </div>
-       <p id="c9a28480-dbc4-4305-a38f-2a45ce5a984b">
+       <p id="afd6ab26-1582-4b9d-994a-346c59d56a2a">
         Note, the order of specified classes will be preserved during the
         component rendering.
        </p>
-       <div class="ms-3" id="c34ddfd6-da36-4653-a7de-1075c05f3257">
-        <h6 id="ec926ce2-22f5-45fa-91de-00283577b9d4">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="ab206d40-81ee-41dc-bb2c-0f105b5138af">
+        <h6 id="b5260b63-d99c-4cd4-a477-ca9bc0d214d1">
+         Example
         </h6>
-        <pre id="9588848c-9ce6-407a-becd-c2426a4567f8"><code class="python">from bootwrap import Button
+        <pre id="8d709177-07dc-4c67-af76-238837824316"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").add_classes("ms-1 me-1")
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="16540497-0537-4600-8df3-9d51934d9cec">
-       <div class="d-flex justify-content-between" id="53850b9a-ddfc-4f66-a649-a67aeb3a536b">
-        <h4 id="0e3497ab-fc61-44f3-a574-ffb543e1da99">
+      <div class="mt-5" id="8612130c-4446-4d2a-9b7c-524ac139abd1">
+       <div class="d-flex justify-content-between" id="4f4a9f62-6ff6-4468-8b53-318258764ab8">
+        <h4 id="9507caf7-dfe2-4ab3-a123-dff52b414fd9">
          Method
-         <span class="text-primary" id="fa979cf2-fa81-4b01-9cf5-2e538cffa0aa">
+         <span class="text-primary" id="836e9dfc-80a5-48f4-bbd5-9026cf5edac7">
           m
          </span>
         </h4>
-        <div id="c502d77c-70fa-4367-9518-55d3c6e499b4">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#7cda2f1b-4109-4605-9d0d-f993df27b8b5" data-bs-toggle="collapse" id="11ef56e6-64a5-4b6d-9a30-54989097e076" onclick="return false;" type="button">
+        <div id="68afc567-1a10-4125-adba-99b282060279">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#2ee0f0bf-0917-4976-8196-a8642b5738d9" data-bs-toggle="collapse" id="c9f61440-7fd2-43c2-b48f-68e7d99929f9" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#070c672e-b524-432c-b6db-4e4f5696b6e0" data-bs-toggle="collapse" id="0120deef-09d0-4515-be4d-f20ce4170207" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#261210c5-0fff-4b3b-ace1-d9537ceef51a" data-bs-toggle="collapse" id="cf928937-c996-4e9d-b978-b25cc6d3ffd9" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="956fede1-995e-475f-bfc6-5b2e43424719">
+       <span class="text-muted" id="38d4db3e-0608-4228-b185-a8eb9c01cc32">
         Sets margin for all four sides to the specified size.
        </span>
-       <pre id="1347c27a-0f17-49bc-91b8-e5a651c31458"><code class="python">m(size)</code></pre>
-       <div class="ms-3 collapse" id="7cda2f1b-4109-4605-9d0d-f993df27b8b5">
-        <h6 id="02a83b36-fb25-421a-b4ed-7fe4d497e146">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="9bd54941-383e-4df0-b251-4988b1859642">
+       <pre id="31a99446-2b9d-44d1-aa8c-a097d288ca5a"><code class="python">m(size)</code></pre>
+       <div class="ms-3 collapse" id="2ee0f0bf-0917-4976-8196-a8642b5738d9">
+        <h6 id="bac9631f-8934-441b-ba50-d1ed13d352a5">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="ebaaf84c-077c-4698-bc75-dcdf88e17a42">
          <thead>
           <tr>
            <th scope="col">
@@ -431,13 +415,11 @@ button = Button("Hello").add_classes("ms-1 me-1")
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="070c672e-b524-432c-b6db-4e4f5696b6e0">
-        <h6 id="53fac4ba-70f2-4946-90a3-753563affdb9">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="261210c5-0fff-4b3b-ace1-d9537ceef51a">
+        <h6 id="809d7483-4cbe-4941-81d6-e77b0db1272a">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="eaf7a228-b5a4-48c5-b308-67fe1b00dc84">
+        <table class="table table-sm bg-light" id="2e303243-3f47-485a-b490-d70302a7d583">
          <thead>
           <tr>
            <th scope="col">
@@ -470,47 +452,43 @@ button = Button("Hello").add_classes("ms-1 me-1")
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="a847cc6a-11f0-4461-917c-2fb460266c5a">
-        <h6 id="2359fec5-6e4d-4846-93a2-647d99c7ddbb">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="b9b28812-13e7-4420-ae4b-9fe35eade6a8">
+        <h6 id="8c0bdf4b-6a58-49d3-abbe-0d82ff3b670a">
+         Example
         </h6>
-        <pre id="bc989965-b695-442c-a177-caf5c54651cb"><code class="python">from bootwrap import Button
+        <pre id="714a3b97-cb3b-4823-9ccb-41aaffab8130"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").m(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="a8edf11a-2f75-47b5-84a7-8c83c24ea12f">
-       <div class="d-flex justify-content-between" id="60659edf-0a03-472d-9413-e8452c5e30bc">
-        <h4 id="23828d7a-6308-48c5-b11b-528c4b95eabb">
+      <div class="mt-5" id="a2ef0747-8b38-4f95-b19c-c469e16dea54">
+       <div class="d-flex justify-content-between" id="9cd1830a-9f5c-4c27-9b92-ed2ae756614d">
+        <h4 id="6705726d-354e-460e-9e2e-a6644c3012b2">
          Method
-         <span class="text-primary" id="7e3f27bb-4d63-458d-bf07-f469b47f3f2f">
+         <span class="text-primary" id="10a1ac12-4d52-4fe1-b2f7-e2142280c8c3">
           mb
          </span>
         </h4>
-        <div id="cf631968-184f-452e-908f-d3ca4c10bcc3">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#8d9e40e0-d1eb-4814-b6e6-115a7c41aaf9" data-bs-toggle="collapse" id="4a43452f-ce38-424b-a37d-9dbed099cf6c" onclick="return false;" type="button">
+        <div id="d5c45a3b-cf2d-476f-b449-7dcf5ce2fb77">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#1a81e784-6111-407d-a478-87bfd1565fe5" data-bs-toggle="collapse" id="34a8858f-5722-488b-b847-002a66472b41" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#ade679ba-8bfb-4747-ae40-6fa1715a1410" data-bs-toggle="collapse" id="7b236995-298a-4006-a818-25ca257d8e51" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#c2a20fd9-63d7-4783-8301-0687b9b44352" data-bs-toggle="collapse" id="c9352052-0384-41a8-bbac-87fdb8fb6253" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="deac65bd-e7e8-4ac7-b2a5-724a476f64c9">
+       <span class="text-muted" id="7c19cdce-de25-4abd-9561-840c4528b02b">
         Sets margin for the bottom side the specified size.
        </span>
-       <pre id="8a5a19f7-214d-4d45-a899-8698d57b03e4"><code class="python">mb(size)</code></pre>
-       <div class="ms-3 collapse" id="8d9e40e0-d1eb-4814-b6e6-115a7c41aaf9">
-        <h6 id="1579d79d-9d08-43ed-b1d0-2366c715dc3a">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="ed24829d-8a75-4238-a176-aef58ece8a03">
+       <pre id="bf87f4fa-26ce-45d1-b161-0a86cfc47a63"><code class="python">mb(size)</code></pre>
+       <div class="ms-3 collapse" id="1a81e784-6111-407d-a478-87bfd1565fe5">
+        <h6 id="60bbca0d-f5f0-43f5-af0b-23dd415dd772">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="19ee9c3a-3bb3-4d08-bb81-8a885aa69bbc">
          <thead>
           <tr>
            <th scope="col">
@@ -543,13 +521,11 @@ button = Button("Hello").m(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="ade679ba-8bfb-4747-ae40-6fa1715a1410">
-        <h6 id="084d4d78-d54e-4065-8635-b2fbf52962d1">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="c2a20fd9-63d7-4783-8301-0687b9b44352">
+        <h6 id="4dd9176c-0235-481a-9151-b22486cd24a2">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="2ae4440f-3e43-4a08-afeb-f977d2c69c79">
+        <table class="table table-sm bg-light" id="1852094c-76dc-4171-a953-3dfc2e70a1b3">
          <thead>
           <tr>
            <th scope="col">
@@ -582,47 +558,43 @@ button = Button("Hello").m(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="f27da349-efda-4fe5-b838-d89393988503">
-        <h6 id="08770b87-d5a0-4046-9bf4-7b4888eef9d1">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="964d1c8d-2d6f-4d73-99e6-e619cbc7c7a1">
+        <h6 id="5bb6beab-81ee-4238-89f2-a1de32fcc8b4">
+         Example
         </h6>
-        <pre id="567f8282-ad15-418d-8c43-6f4fb54e2bd5"><code class="python">from bootwrap import Button
+        <pre id="4488f44d-1031-411b-85bd-78640d82113b"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").mb(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="2e279497-137b-41f0-ae10-0ed76856cfb9">
-       <div class="d-flex justify-content-between" id="d9eaae09-cae8-4d31-ba12-c2eefbc37b29">
-        <h4 id="e5d8932e-2e92-4c58-9379-d417b70f5be3">
+      <div class="mt-5" id="d1140279-511a-4392-a3a6-48bece05d468">
+       <div class="d-flex justify-content-between" id="3b9651fa-517c-4bd5-bf7c-67471817dc7e">
+        <h4 id="1e13cd96-7949-4130-bdfe-1eea5f25b4b9">
          Method
-         <span class="text-primary" id="7d1822a1-e7e7-4fae-a4f0-4f377d1a1d50">
+         <span class="text-primary" id="73b4ba9a-2445-4688-a95c-06e31ede2a3a">
           me
          </span>
         </h4>
-        <div id="91ede06a-0b50-4e08-a471-e8c2dde325b5">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#1402cb20-1c15-46c0-a0b9-cceb4b750fc7" data-bs-toggle="collapse" id="4a76ca65-0169-4559-b445-a37308808165" onclick="return false;" type="button">
+        <div id="1f52a9fc-1639-40b6-a5ae-fb3e53ee43c8">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#8772dff0-0bc3-4602-8248-12720fc0ef32" data-bs-toggle="collapse" id="8028c100-30c4-4919-893e-6be52a212e10" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#cc57ba39-e93a-444e-ac73-e47dc06c0279" data-bs-toggle="collapse" id="f31934be-4033-4687-889d-d3b59547e037" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#55f2671a-3e3c-48b5-b0e2-ceca8b60b477" data-bs-toggle="collapse" id="6e2cf9c0-2579-46eb-8205-91874d08af7a" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="d32bd48f-fe1c-48bc-844e-e34c089eec70">
+       <span class="text-muted" id="e7969a62-0391-4c23-9fb7-7309ff158666">
         Sets margin for the end(right-side) to the specified size.
        </span>
-       <pre id="21960421-5561-4360-a677-9c54a0946b5e"><code class="python">me(size)</code></pre>
-       <div class="ms-3 collapse" id="1402cb20-1c15-46c0-a0b9-cceb4b750fc7">
-        <h6 id="e4b9ad99-d3a3-439e-9f6e-1de2602613e7">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="61872a12-ff45-44ed-b68d-9c51fb15e8a1">
+       <pre id="20ba9df1-1f8d-47eb-ac8d-678a450b567a"><code class="python">me(size)</code></pre>
+       <div class="ms-3 collapse" id="8772dff0-0bc3-4602-8248-12720fc0ef32">
+        <h6 id="7137c9d9-49ce-4dc6-a8a1-33daed9a1683">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="3b15cb2c-b16c-45e9-823a-381a7ae00043">
          <thead>
           <tr>
            <th scope="col">
@@ -655,13 +627,11 @@ button = Button("Hello").mb(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="cc57ba39-e93a-444e-ac73-e47dc06c0279">
-        <h6 id="4cb581d1-3a82-4e02-89d5-5b8b5f5d9b97">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="55f2671a-3e3c-48b5-b0e2-ceca8b60b477">
+        <h6 id="1356086b-b2dd-4e7a-8b0a-1987e948ccd6">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="c752e7fe-d5a5-495a-96b9-6fb7ad156e80">
+        <table class="table table-sm bg-light" id="a9c71a50-143a-4641-90f0-710a8b29c7a4">
          <thead>
           <tr>
            <th scope="col">
@@ -694,47 +664,43 @@ button = Button("Hello").mb(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="a2b4f0bc-6166-4d26-8548-fdc958d88235">
-        <h6 id="fc4eed60-de2e-4f05-abea-b08077a386b4">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="88f8a102-612d-46e1-bf5d-14a3d8c97b54">
+        <h6 id="7a7426e9-138a-4f0a-aa05-43fbecc9827e">
+         Example
         </h6>
-        <pre id="3ef061a0-af95-4005-bab3-5abe4b18b20d"><code class="python">from bootwrap import Button
+        <pre id="0a24c512-8d8b-445a-97c6-d51b5000c760"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").me(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="8c19b336-0be8-4664-9b44-f671f7f75bbe">
-       <div class="d-flex justify-content-between" id="0170b1cf-2999-4e19-b6b5-aa61d6303cf4">
-        <h4 id="64af2efd-855b-40c4-a0fe-d7953c7aea89">
+      <div class="mt-5" id="d7e288ea-96f4-42d7-9efc-555f210b958e">
+       <div class="d-flex justify-content-between" id="f7f62e7d-a44c-4e70-b840-0ea535c9fe3a">
+        <h4 id="9b6e1c7c-f7e2-4dd5-9af4-72670755c044">
          Method
-         <span class="text-primary" id="020d54de-5206-4679-81c9-ae5b4cec5eae">
+         <span class="text-primary" id="aad77cce-8d4e-4df0-aab4-de9c5280bf55">
           ms
          </span>
         </h4>
-        <div id="30a1f2d6-d6c9-46fd-a5ee-7607fcf24178">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#c58ecb01-a57b-4e08-8479-da732413ced2" data-bs-toggle="collapse" id="4e3e1cb0-1658-4267-ba55-62a60d89910b" onclick="return false;" type="button">
+        <div id="dcd0ea59-794a-479a-9132-10c16dd718cc">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#2c8d6688-a428-47fd-8bab-11270bef0f1f" data-bs-toggle="collapse" id="70ae1fe8-dfa8-4a58-9805-ddaf692cefe0" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#e4b30347-1bea-42c4-a1d6-6d5ef661ade9" data-bs-toggle="collapse" id="a31677a3-50e6-4dd5-b80b-311593313ed1" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#54eda974-e418-436b-91f4-3d86ae76427e" data-bs-toggle="collapse" id="574845ea-b2d7-430b-bd6c-ae907d6b772d" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="325c822d-8162-473f-ab10-26904ceefe8e">
+       <span class="text-muted" id="83f58345-dfef-4d28-83e7-2b9e2c598d92">
         Sets margin for the start(left-side) to the specified size.
        </span>
-       <pre id="6e20bc43-7509-4cde-9f9d-a3fb2b3f12eb"><code class="python">ms(size)</code></pre>
-       <div class="ms-3 collapse" id="c58ecb01-a57b-4e08-8479-da732413ced2">
-        <h6 id="0469b8a4-3c98-4917-a429-0b9625605126">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="f011ee8e-df15-42bf-bc93-065757000431">
+       <pre id="b9541447-bac6-40f4-aefc-cff19a6cf73d"><code class="python">ms(size)</code></pre>
+       <div class="ms-3 collapse" id="2c8d6688-a428-47fd-8bab-11270bef0f1f">
+        <h6 id="1ff1bb9c-41bd-41bf-b219-a5c09d09d2f1">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="e490657d-e6a6-424d-bb1e-7585a15e7e11">
          <thead>
           <tr>
            <th scope="col">
@@ -767,13 +733,11 @@ button = Button("Hello").me(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="e4b30347-1bea-42c4-a1d6-6d5ef661ade9">
-        <h6 id="5ebb5965-69c3-4058-89f3-7ec67b266379">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="54eda974-e418-436b-91f4-3d86ae76427e">
+        <h6 id="8e6aed31-61c6-442d-bd58-269f386362e8">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="f3d14515-fc91-4524-9822-96a9fbdf7441">
+        <table class="table table-sm bg-light" id="e1cd0b9c-0f56-4f48-9631-58099425fdb6">
          <thead>
           <tr>
            <th scope="col">
@@ -806,47 +770,43 @@ button = Button("Hello").me(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="f9b2c302-a026-47b5-a0c3-55fa2d231bbc">
-        <h6 id="8f346165-e276-482a-868f-32e3b7e6c196">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="4ccbfc39-9aa8-4d24-aa7b-f87137c74601">
+        <h6 id="e94ff9cb-25c0-4b17-8d68-31d770153890">
+         Example
         </h6>
-        <pre id="76a72b68-6197-4261-9e9d-266769c2b6ad"><code class="python">from bootwrap import Button
+        <pre id="f37345bc-1b90-46de-93f0-46480b06f6e7"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").ms(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="aeae7345-647e-4ada-98a1-864edd1e01bc">
-       <div class="d-flex justify-content-between" id="80662b63-3b3d-4cea-98e9-61c14c360c38">
-        <h4 id="c87632b3-3382-4d7c-bb5b-914f1af07b85">
+      <div class="mt-5" id="dc84ea8b-fd32-4477-a3b7-894d265e9b83">
+       <div class="d-flex justify-content-between" id="0645776f-7f43-4cc8-b6cd-8bbe620b64e6">
+        <h4 id="bb1a6288-b01e-4d30-aafa-fbe1a977e34f">
          Method
-         <span class="text-primary" id="9e0f7d99-26df-480a-a52f-17862fde977f">
+         <span class="text-primary" id="456e806a-bf44-4bc4-a5c2-a77eecd26381">
           mt
          </span>
         </h4>
-        <div id="3fefde6a-f17e-4230-9154-1c4a8f75b805">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#044ee02f-e9ab-4e4b-a7bc-d471c4818fe6" data-bs-toggle="collapse" id="93f19203-93d7-4a78-9a35-31d4cd039f1f" onclick="return false;" type="button">
+        <div id="fdec7bf1-aad1-47d7-b7a0-c09b9b222c00">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#37c909fa-0559-48b7-a0c9-dac3cc9f8797" data-bs-toggle="collapse" id="514f8f04-8fb1-46f6-88e2-b94abebeac7a" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#500bd65d-f0a1-4e48-b5c2-90dd1c29bfe7" data-bs-toggle="collapse" id="460e8d41-3543-40a1-96f0-fc9327eee1b1" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#f8b253a2-2660-4ddf-a689-02aa281767c8" data-bs-toggle="collapse" id="ca53548d-1e99-411f-82e8-4b20de2623d6" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="2fa92834-7042-49e5-8a04-2b8937e51a6a">
+       <span class="text-muted" id="201e097b-6fe9-40e8-a9e4-1fa0e4c28e46">
         Sets margin for the top side to the specified size.
        </span>
-       <pre id="97e4c77b-b3d1-4900-a83b-e70fe77acec2"><code class="python">mt(size)</code></pre>
-       <div class="ms-3 collapse" id="044ee02f-e9ab-4e4b-a7bc-d471c4818fe6">
-        <h6 id="0e3e114d-17d1-4671-bcef-f48fafe729a6">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="42b087c5-721e-4230-b37a-8dc2a7bf900d">
+       <pre id="120d46ed-9a23-4e23-8845-b35c5dc01109"><code class="python">mt(size)</code></pre>
+       <div class="ms-3 collapse" id="37c909fa-0559-48b7-a0c9-dac3cc9f8797">
+        <h6 id="62f7a82f-6975-4131-bfba-fe92d9486cf8">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="2f79b644-b21b-4251-b543-ce5e14c19adf">
          <thead>
           <tr>
            <th scope="col">
@@ -879,13 +839,11 @@ button = Button("Hello").ms(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="500bd65d-f0a1-4e48-b5c2-90dd1c29bfe7">
-        <h6 id="07063668-8780-4b9c-b0f0-aab6863b0742">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="f8b253a2-2660-4ddf-a689-02aa281767c8">
+        <h6 id="399a3493-cc42-48c6-bac4-8110b11605a2">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="3a12906a-f445-42c4-ab38-327407f3e755">
+        <table class="table table-sm bg-light" id="b4964af1-e12f-412f-b50d-3875fa97f112">
          <thead>
           <tr>
            <th scope="col">
@@ -918,47 +876,43 @@ button = Button("Hello").ms(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="0b9c3bd0-7452-40b5-a5b3-4855e57efecc">
-        <h6 id="460e940f-a32d-4667-9305-e376ec2c9935">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="57e9ef2d-6191-466f-9f40-15874742a853">
+        <h6 id="f5783afc-37d8-4f54-b63c-94558be07703">
+         Example
         </h6>
-        <pre id="86df657b-dec6-4231-8c52-350bd8fdc1e9"><code class="python">from bootwrap import Button
+        <pre id="3d04ecb1-57b9-4d37-a886-b2ebbe1f102c"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").mt(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="c593d60f-0eac-4d98-988a-b240c9df88da">
-       <div class="d-flex justify-content-between" id="32cc229d-004a-4085-b5a4-d16d8f7ffa48">
-        <h4 id="f2a3b459-cffa-4e14-9f35-dd2a82414cce">
+      <div class="mt-5" id="634a5124-7f63-404b-aa8c-bcdc4686bf51">
+       <div class="d-flex justify-content-between" id="1e30008c-93a2-4e37-a881-b4e0bf19dcaa">
+        <h4 id="0b320791-ea40-4cd4-94c2-ee5a232754af">
          Method
-         <span class="text-primary" id="770032ee-77f0-4d34-ae55-b75bd9b83020">
+         <span class="text-primary" id="7d5d7556-6960-4711-94d5-74f190269e10">
           mx
          </span>
         </h4>
-        <div id="aa5b3705-d39c-498d-b481-cb391f4d7e82">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#3553a580-2d6f-481f-8000-e9410b3e1f9c" data-bs-toggle="collapse" id="431d52a9-1bb6-4dd0-a481-544f03ae6b5c" onclick="return false;" type="button">
+        <div id="c23db6e4-6aef-4d77-88a7-56239a214e02">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#44702a30-1022-47d3-ae71-d07643d8e8d6" data-bs-toggle="collapse" id="8ae8f3cb-218f-447b-b747-cc50c5017969" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#72050ae7-0461-401c-ab32-364b5bb11adf" data-bs-toggle="collapse" id="adee1758-6464-427b-b315-39ba60546f26" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#65d80709-b981-47ad-9b0e-163423fb91ef" data-bs-toggle="collapse" id="acb0a559-43fe-49be-8012-91c929922f7d" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="942ed33c-c3a0-4f2f-868b-b03eb585249b">
+       <span class="text-muted" id="50bdd1b8-b84a-4783-9272-cb203d6ebde2">
         Sets margin for left and right sides to the specified size.
        </span>
-       <pre id="2cd69f2e-2d37-4e0f-8e8c-45f29262ae47"><code class="python">mx(size)</code></pre>
-       <div class="ms-3 collapse" id="3553a580-2d6f-481f-8000-e9410b3e1f9c">
-        <h6 id="66513a46-97a6-4cfa-995f-dc5f8509ac94">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="ae6ec030-9aa5-41f2-971f-a2bdfecfa170">
+       <pre id="966f8d6f-6da5-4b6d-9895-e56b4a2c2374"><code class="python">mx(size)</code></pre>
+       <div class="ms-3 collapse" id="44702a30-1022-47d3-ae71-d07643d8e8d6">
+        <h6 id="7f1f1223-aca3-4a89-87ed-2f0bf1282b54">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="db3b4c12-22fa-48f3-aca7-57cd35c21a5e">
          <thead>
           <tr>
            <th scope="col">
@@ -991,13 +945,11 @@ button = Button("Hello").mt(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="72050ae7-0461-401c-ab32-364b5bb11adf">
-        <h6 id="f3f13fbe-9714-4563-8489-3472c27c2730">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="65d80709-b981-47ad-9b0e-163423fb91ef">
+        <h6 id="fa265b05-c869-447c-8e9b-2ba734d975d6">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="c433142f-5584-4cd8-8c24-c1bd636c2577">
+        <table class="table table-sm bg-light" id="7238e22a-0a62-40e3-818a-278cd4fc5b93">
          <thead>
           <tr>
            <th scope="col">
@@ -1030,47 +982,43 @@ button = Button("Hello").mt(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="d6b47151-df28-4a1f-9e35-001df0d47e30">
-        <h6 id="1c0b2b8a-efd2-4761-ad6c-79d5aae499cd">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="d9ec945c-0d49-46a6-88a0-4c09e44fa4ec">
+        <h6 id="4156db15-5a82-4bdc-99ec-7dbfd1c5fd85">
+         Example
         </h6>
-        <pre id="310ef78c-4fde-49e5-892e-9195bdd4169e"><code class="python">from bootwrap import Button
+        <pre id="773d1744-9fa4-4fb6-987a-7ad65047f2d8"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").mx(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="4ff6cd44-ed49-41e8-9b8a-0d616b28ccf3">
-       <div class="d-flex justify-content-between" id="e057ddf7-858d-4068-88f6-94121bb379c2">
-        <h4 id="9af8c469-ddb2-45b6-8fea-ce32628fa021">
+      <div class="mt-5" id="0d7210c9-52e9-402c-b8d3-dbae9789cee7">
+       <div class="d-flex justify-content-between" id="9f18401d-e0f6-4b92-b0f9-88224322f4dd">
+        <h4 id="ef2ccc23-e6b1-45eb-845c-98faf90d2ac5">
          Method
-         <span class="text-primary" id="5d1fcef8-cfb7-4b40-bb44-7c9eed3b1179">
+         <span class="text-primary" id="4d49959b-8a8d-4f43-af48-d6d355abd79e">
           my
          </span>
         </h4>
-        <div id="5adacbac-13cb-4831-a4e2-909adfb5c4bc">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#fe40fe18-2afe-4f95-9cf0-dfa5a0913f3f" data-bs-toggle="collapse" id="c474532b-6e32-4f43-9602-a35aa0d6ce28" onclick="return false;" type="button">
+        <div id="a7e65831-faac-40fc-ab9c-0480c9739225">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#67c4ab32-4d03-4eb6-9198-c2c1c10657b2" data-bs-toggle="collapse" id="42b0869e-65be-47cc-a9f5-0fb06ca98fb8" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#72656228-df81-4016-aa92-3bb7eb056808" data-bs-toggle="collapse" id="ac68c203-d2ca-4578-9bb2-8ce2f5ab73b0" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#9d23b16b-2682-4d85-8f16-b58ee6275c82" data-bs-toggle="collapse" id="3f2656fe-e3f1-4c07-8931-24aba288235b" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="c5d9be6d-0c51-4a68-a8e0-f89011c8fce4">
+       <span class="text-muted" id="2fcef907-f926-4359-8c89-696f816a2629">
         Sets margin for top and bottom sides to the specified size.
        </span>
-       <pre id="b0597f11-7eaa-4a68-ac01-ee1a0d048285"><code class="python">my(size)</code></pre>
-       <div class="ms-3 collapse" id="fe40fe18-2afe-4f95-9cf0-dfa5a0913f3f">
-        <h6 id="b178ae5e-a687-4762-a096-fc47928e08c4">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="0f24a987-ef94-4265-87d0-74d63d2bd932">
+       <pre id="ff0491d3-5899-45db-a1e4-72a1ee0e2227"><code class="python">my(size)</code></pre>
+       <div class="ms-3 collapse" id="67c4ab32-4d03-4eb6-9198-c2c1c10657b2">
+        <h6 id="409891c3-af3e-4a30-a15a-f010b3d1f6c0">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="398a1fc9-4376-4605-9608-38fd0cfd54a6">
          <thead>
           <tr>
            <th scope="col">
@@ -1103,13 +1051,11 @@ button = Button("Hello").mx(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="72656228-df81-4016-aa92-3bb7eb056808">
-        <h6 id="02268562-7425-4c6f-9b17-be951a9f7826">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="9d23b16b-2682-4d85-8f16-b58ee6275c82">
+        <h6 id="c257bdfc-d187-4962-b253-d4a100aa8a8e">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="fc4dbd07-d8da-4134-af6a-29825452840f">
+        <table class="table table-sm bg-light" id="353c59fa-8aab-4082-aadb-8afab4fc8b5d">
          <thead>
           <tr>
            <th scope="col">
@@ -1142,47 +1088,43 @@ button = Button("Hello").mx(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="d76bc6cd-835f-408b-8275-b87d24eb594d">
-        <h6 id="e0e01c73-aab4-48e7-8560-f7e5229c7f95">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="c4228e5f-3cf7-401a-bae3-47752d19ee28">
+        <h6 id="2642a703-70aa-4715-bd7e-e92a3798d250">
+         Example
         </h6>
-        <pre id="218699ac-0281-4e9c-8807-597044afd62f"><code class="python">from bootwrap import Button
+        <pre id="8285eeb9-0f56-4e0c-a25c-b03ce27719b7"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").my(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="69ab43d6-e12a-446e-9481-a1cb1497f546">
-       <div class="d-flex justify-content-between" id="b3bae7ff-2e33-462a-ae5b-5543c1a2034c">
-        <h4 id="e0541cd8-a950-488f-b03d-0650cc076359">
+      <div class="mt-5" id="08908c40-eb15-4354-a690-68a3014a0b71">
+       <div class="d-flex justify-content-between" id="5572e87b-686e-4889-9124-8a712e6d12ff">
+        <h4 id="34350222-ffc0-4aa9-853c-25c58471cd5c">
          Method
-         <span class="text-primary" id="5a8f462e-2c5a-4e53-8d7b-2fbeb2b06b57">
+         <span class="text-primary" id="e8404b38-a9a9-4429-bd8e-f1d9f9079937">
           p
          </span>
         </h4>
-        <div id="f94221bb-7f85-42eb-8189-b550d0fadc4a">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#d980433f-72f4-4ba5-b171-858d4175033b" data-bs-toggle="collapse" id="4979344a-9374-408e-8f4f-c923ddfe23b2" onclick="return false;" type="button">
+        <div id="35665856-bef0-4139-93c4-6807f08f6240">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#70c567ed-e481-4ed3-b2b2-9b7d59d112e9" data-bs-toggle="collapse" id="9ceb18b3-b70d-43cd-966f-abee04793455" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#abf983f2-88d9-4f7a-9466-60998a272b5f" data-bs-toggle="collapse" id="fde4e017-336e-43f3-ae4d-ec1db26af13b" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#f619638e-555f-4b69-aa45-36bba63df0a2" data-bs-toggle="collapse" id="6afaf55a-86b8-4a5f-89f7-54d58644d8c1" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="3c06d8e1-4c1e-4d5b-b87c-62a1d943b473">
+       <span class="text-muted" id="8c32ab3f-0ad8-49e0-849a-897ece385983">
         Sets padding for all four sides to the specified size.
        </span>
-       <pre id="ab16879e-7558-42ac-83e4-0648abec1ed6"><code class="python">p(size)</code></pre>
-       <div class="ms-3 collapse" id="d980433f-72f4-4ba5-b171-858d4175033b">
-        <h6 id="db84a544-d5ed-43c8-a92e-56a0df9f2e22">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="3bc3575b-8288-414c-9348-a0377e28348e">
+       <pre id="e4f29dc8-82fa-45df-ac55-8378f7d58fc0"><code class="python">p(size)</code></pre>
+       <div class="ms-3 collapse" id="70c567ed-e481-4ed3-b2b2-9b7d59d112e9">
+        <h6 id="7ae89911-68f7-4297-a8ef-f49b5f3a7b59">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="8ebd3227-417a-44dc-b903-b5773e17a0f4">
          <thead>
           <tr>
            <th scope="col">
@@ -1215,13 +1157,11 @@ button = Button("Hello").my(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="abf983f2-88d9-4f7a-9466-60998a272b5f">
-        <h6 id="07fc4fe6-0207-454a-afb6-789d29da2deb">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="f619638e-555f-4b69-aa45-36bba63df0a2">
+        <h6 id="a551c2d0-7e2f-4696-a4e2-1bb6bf0561f6">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="460a6195-8aa4-459d-aaed-c2b13c02ca87">
+        <table class="table table-sm bg-light" id="63064991-7090-4148-989d-03b15cfdd477">
          <thead>
           <tr>
            <th scope="col">
@@ -1254,47 +1194,43 @@ button = Button("Hello").my(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="d9b24507-d381-4d31-bbe3-8c154c2790ef">
-        <h6 id="8b39abb8-3ac2-4b8a-8739-64e38c7256d7">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="a23cd800-a8fe-45b8-9993-468f7906d0c9">
+        <h6 id="44a93909-867e-4e10-bfe2-e1c158574f9a">
+         Example
         </h6>
-        <pre id="37150955-6dd9-4d1d-8abc-b89a79cade2a"><code class="python">from bootwrap import Button
+        <pre id="61a52662-027f-4e8e-af99-8386a1f9bd2b"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").p(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="326c0685-96e1-4323-9ee5-e34436c908ec">
-       <div class="d-flex justify-content-between" id="c7371da9-4c2d-44dd-b989-6e7805cea4ac">
-        <h4 id="26a2cc0a-0693-4a14-8f82-ce520ca12f4f">
+      <div class="mt-5" id="ba07bebc-80c8-4bef-bf84-7fb6f569a6dc">
+       <div class="d-flex justify-content-between" id="ed01ae7e-57a3-4262-9349-f102cb3e1799">
+        <h4 id="f7f6a8f8-335a-46c1-b710-ae113931fa57">
          Method
-         <span class="text-primary" id="8ce5e6e2-75ff-46b3-8c3f-38a620ff7df3">
+         <span class="text-primary" id="62bddb14-88c9-44e6-b296-3bdea94c341c">
           pb
          </span>
         </h4>
-        <div id="b5f5bb1f-f76e-4d7d-9bc6-3388b1917c47">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#6f20c51b-3605-41ae-9ffe-1dd53dc5f677" data-bs-toggle="collapse" id="ecfa1886-32cc-4523-a56d-feb4b089083d" onclick="return false;" type="button">
+        <div id="c8c87195-a0b7-4d0c-a90a-c17a058b0a78">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#38905a6b-1baa-4cef-a72e-591d7dddce37" data-bs-toggle="collapse" id="363a0d5e-b759-46ef-9624-5433948339ae" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#ba4f7377-4a02-46db-bb85-3467821f9f96" data-bs-toggle="collapse" id="a1530f67-85a6-4a75-9669-25f16cf8939e" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#3781560c-c20c-4023-8fcb-a407908ddf2e" data-bs-toggle="collapse" id="0a6c09f9-f247-450e-8895-d5e32aee3706" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="cd511c6d-d117-4ffe-aa2d-49304640bd28">
+       <span class="text-muted" id="dae2e0db-ce29-43fd-854c-5ec293367c9b">
         Sets padding for the bottom side the specified size.
        </span>
-       <pre id="ac1344a3-b657-4848-a9b0-74bf45941558"><code class="python">pb(size)</code></pre>
-       <div class="ms-3 collapse" id="6f20c51b-3605-41ae-9ffe-1dd53dc5f677">
-        <h6 id="812fbb47-940c-43ea-abee-8b91cf59d57f">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="9657fe63-4854-4bab-824d-f17815a88ebf">
+       <pre id="73f6c982-4d53-4f9a-a46a-7be4015ff9bb"><code class="python">pb(size)</code></pre>
+       <div class="ms-3 collapse" id="38905a6b-1baa-4cef-a72e-591d7dddce37">
+        <h6 id="4b0f48d2-56eb-454e-9cbe-1cf8c07cff63">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="0322bbcf-6eb5-405f-997a-47a702a476c6">
          <thead>
           <tr>
            <th scope="col">
@@ -1327,13 +1263,11 @@ button = Button("Hello").p(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="ba4f7377-4a02-46db-bb85-3467821f9f96">
-        <h6 id="fee04f75-5f8b-43b0-a4e6-91400be64b15">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="3781560c-c20c-4023-8fcb-a407908ddf2e">
+        <h6 id="a5bf260d-021e-4a79-ae98-8f2f6bf08eb9">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="cf70ec0c-ed01-467a-99aa-c0fe2f887d80">
+        <table class="table table-sm bg-light" id="7283e354-1d1b-4fde-817a-e22271d32484">
          <thead>
           <tr>
            <th scope="col">
@@ -1366,47 +1300,43 @@ button = Button("Hello").p(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="1f0958b3-7317-4008-a08c-72869253ce31">
-        <h6 id="0c53f7b8-9316-47ad-a377-3552df13f795">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="c462e7c1-4a7a-4046-aae7-380f6c82b4e2">
+        <h6 id="d194aab3-02ae-4f89-86df-eb7067d34711">
+         Example
         </h6>
-        <pre id="643cd578-bdbc-4f6e-be0a-c24d256013bc"><code class="python">from bootwrap import Button
+        <pre id="393690a7-01d9-401f-b440-ac64d51ba426"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").pb(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="85402254-e88e-4f89-83cd-c0e23352322c">
-       <div class="d-flex justify-content-between" id="e82ab393-8b5b-41ef-ab4c-339ee458b187">
-        <h4 id="fcdc54c8-37d6-4eae-9844-59d939876baa">
+      <div class="mt-5" id="aae34d36-be93-4d4a-be55-75be4fdd7a39">
+       <div class="d-flex justify-content-between" id="d440b635-7d4d-4c7f-b94b-6a2823ec2bd9">
+        <h4 id="ef465e84-bb2f-4758-984d-570ed3a4b0f9">
          Method
-         <span class="text-primary" id="41bda65d-f9de-4b5e-aa06-4c16f4edc1e0">
+         <span class="text-primary" id="56eb4bbf-2062-409e-abce-b79b293b2035">
           pe
          </span>
         </h4>
-        <div id="3f6a0637-f616-4050-8251-23fe565c07df">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#09125ceb-9bad-4a69-838a-cbc46210544a" data-bs-toggle="collapse" id="c2fdc1c0-92c3-4936-86c0-a5ae92191612" onclick="return false;" type="button">
+        <div id="73dd468f-dbd7-4b4b-90e7-70c4019f4e3a">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#7b3d412a-c7d9-42f9-bb94-02f1694541bb" data-bs-toggle="collapse" id="dd87053f-deeb-40cc-ac67-0f2a4d8e42ee" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#4a3db3a8-fe87-4012-8a2d-11860c194ce2" data-bs-toggle="collapse" id="1f14c26a-f05c-40d0-962a-e669990f36bb" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#2c414e16-2a03-431a-9107-32386efc6262" data-bs-toggle="collapse" id="c9750b29-a58a-4ad9-a50a-647c96826f4b" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="6ccff4de-fd43-4453-999e-e63cb458c151">
+       <span class="text-muted" id="7f80194b-1a9f-4eb8-b66a-485fdb94e547">
         Sets padding for the end(right-side) to the specified size.
        </span>
-       <pre id="b8eec708-a37e-4786-b91a-f5efba3f940c"><code class="python">pe(size)</code></pre>
-       <div class="ms-3 collapse" id="09125ceb-9bad-4a69-838a-cbc46210544a">
-        <h6 id="b04bbec2-cccb-4357-ad4d-7efeba30d3d7">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="fde21883-a222-4416-8f6d-e79c23fe5a9d">
+       <pre id="2bacbf98-8a3f-409d-a25c-d3ec5df0bff6"><code class="python">pe(size)</code></pre>
+       <div class="ms-3 collapse" id="7b3d412a-c7d9-42f9-bb94-02f1694541bb">
+        <h6 id="73d1d3e7-72b2-47fb-b23d-c546709be14f">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="a81d3643-cd48-48cd-9538-4b57a88e3d6a">
          <thead>
           <tr>
            <th scope="col">
@@ -1439,13 +1369,11 @@ button = Button("Hello").pb(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="4a3db3a8-fe87-4012-8a2d-11860c194ce2">
-        <h6 id="3b296d77-11cf-486d-80d3-8963e400b448">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="2c414e16-2a03-431a-9107-32386efc6262">
+        <h6 id="6b528cc4-ff38-423a-a88d-5e0e6065d915">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="44da0200-09fb-4e95-a437-01dc3870ee8a">
+        <table class="table table-sm bg-light" id="4fea252a-75ce-4929-abf8-b2b8f3f8474b">
          <thead>
           <tr>
            <th scope="col">
@@ -1478,47 +1406,43 @@ button = Button("Hello").pb(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="fecfbfe5-91a6-4d94-8474-843e7b2df485">
-        <h6 id="aedc75e7-0ce9-4736-a81a-a3ea3949f395">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="e339600e-accb-45ed-a9d8-9b2e0604c729">
+        <h6 id="d64679df-408d-41ff-bbe9-8335ce8328fa">
+         Example
         </h6>
-        <pre id="5194a02c-8558-43e7-b9b3-27daa4641407"><code class="python">from bootwrap import Button
+        <pre id="d188f0fb-fc6a-4e54-bc67-eed3353bd71d"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").pe(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="b6dc26b3-074a-4cc7-b1a7-79167aaf47cb">
-       <div class="d-flex justify-content-between" id="62257d3b-9bdf-4202-8f92-a666359c09e6">
-        <h4 id="53a14f99-6ecf-4402-a42b-3a1ba34b8607">
+      <div class="mt-5" id="11db4f46-89e7-4942-95c8-3e9c99ad14a4">
+       <div class="d-flex justify-content-between" id="05245085-89ab-4a63-be15-930efd8647fc">
+        <h4 id="0cee155d-1da7-44ab-a1bf-ee044dd7c554">
          Method
-         <span class="text-primary" id="b9f94c3e-bb42-49db-a2a0-b882376aed97">
+         <span class="text-primary" id="01dcc123-2e4d-448e-87f4-8b2a0b6809bd">
           ps
          </span>
         </h4>
-        <div id="e48c68d8-7bbd-4e8c-aa93-4adefce1159f">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#061cf9ee-4b4b-41a1-8301-c6148fdf829e" data-bs-toggle="collapse" id="aeede1f2-35b2-4186-ad79-5e3e6e698e88" onclick="return false;" type="button">
+        <div id="3b9f9474-3bc8-45f4-930d-739220ea43bc">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#a6eaa975-6dde-4c61-b069-9911025640ee" data-bs-toggle="collapse" id="21ab9e33-ff1c-4ac4-86b9-1bc71dc4295c" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#4f7c7b5b-70e3-4e02-bdc3-5c218cb74eb1" data-bs-toggle="collapse" id="0648fce8-6a78-46f0-a0e7-2096c42c3728" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#50ac9c0d-3ea5-4128-9b1f-aaa1d8a6547f" data-bs-toggle="collapse" id="e89f1a34-5d14-4bce-bee1-d1921acf5cba" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="cf662a11-683d-4efc-afb2-48328df45efc">
+       <span class="text-muted" id="6176508c-9270-4b18-8d7e-836986ecf1e5">
         Sets padding for the start(left-side) to the specified size.
        </span>
-       <pre id="a0434698-8a96-476e-a11a-a64c6640cf64"><code class="python">ps(size)</code></pre>
-       <div class="ms-3 collapse" id="061cf9ee-4b4b-41a1-8301-c6148fdf829e">
-        <h6 id="f172df07-691d-4f48-b39b-7a793d2bf1ec">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="15c73203-a62c-4de1-a86c-f18697c0db9e">
+       <pre id="b9dfb5d3-ec69-4684-afcd-8e5e3ade3035"><code class="python">ps(size)</code></pre>
+       <div class="ms-3 collapse" id="a6eaa975-6dde-4c61-b069-9911025640ee">
+        <h6 id="669cd99e-5382-4453-8301-d3ec9de94aae">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="042e8524-adc7-4419-9a74-728a7203129c">
          <thead>
           <tr>
            <th scope="col">
@@ -1551,13 +1475,11 @@ button = Button("Hello").pe(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="4f7c7b5b-70e3-4e02-bdc3-5c218cb74eb1">
-        <h6 id="7842b561-7331-4962-a3cb-e875bb451e96">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="50ac9c0d-3ea5-4128-9b1f-aaa1d8a6547f">
+        <h6 id="3f87c892-b510-41aa-af7f-44bcf1989f31">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="0a29f53d-de4e-46a6-8ab0-c303ad8890cc">
+        <table class="table table-sm bg-light" id="dc1ac820-6a23-4211-93c1-2ca76fb40e69">
          <thead>
           <tr>
            <th scope="col">
@@ -1590,47 +1512,43 @@ button = Button("Hello").pe(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="bf05b4f3-8540-4f5f-b9d5-45c5b22aa240">
-        <h6 id="f75cb976-ba39-42d5-b2dc-96b528590185">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="34635c08-04aa-48c2-8b53-81e080b72832">
+        <h6 id="c0587947-4d81-44a2-ba12-c5462de86840">
+         Example
         </h6>
-        <pre id="3379d0ea-224a-4562-b63c-087299caabb3"><code class="python">from bootwrap import Button
+        <pre id="d559c380-9396-4b88-a564-09c89a17180c"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").ps(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="aa6ecd54-a66c-463e-a27f-35272896a863">
-       <div class="d-flex justify-content-between" id="c777e8b7-a4fc-492a-b7bb-9bf4230c3c29">
-        <h4 id="13043ca6-38ca-4924-84f3-b832dd21e46c">
+      <div class="mt-5" id="23099db3-fc29-47a1-84a8-e4dda388088a">
+       <div class="d-flex justify-content-between" id="543a4867-6927-40e5-9d5b-4f22b263ea41">
+        <h4 id="df8770af-7ed3-42e4-ba17-3a0caa319c06">
          Method
-         <span class="text-primary" id="b2d7f046-c89e-42a3-9547-3c3d5ef0962d">
+         <span class="text-primary" id="2020e615-9973-4e97-a864-0ab8d4d2a47c">
           pt
          </span>
         </h4>
-        <div id="e048afc6-ce2d-44de-bf44-30240f2eb0c2">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#36e157ee-f877-42a1-b70b-befeedc1f9d9" data-bs-toggle="collapse" id="2f692cb8-2785-4381-a77a-c4ab5e6d6d72" onclick="return false;" type="button">
+        <div id="11691b8f-681d-47b5-89fe-cd966ea37c2b">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#1756b539-d469-4a3b-b566-7e845098163d" data-bs-toggle="collapse" id="cbdc1151-f922-4d6b-b5c4-66772e8624e5" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#31e00bab-f563-48fd-95b8-6af802fdbf9e" data-bs-toggle="collapse" id="42349bb8-5c81-490d-b3ee-05091816f470" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#bc4fbc6a-1436-4048-aee4-c6e12e2d4086" data-bs-toggle="collapse" id="c5b82607-4f28-4c7e-a446-ba76b44284c2" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="3b295090-6e1b-4841-90ea-e3a0bde78123">
+       <span class="text-muted" id="d0b46e35-f34b-4ba8-88e5-67d2d64d7b20">
         Sets padding for the top side to the specified size.
        </span>
-       <pre id="3fe2f1fc-fa61-4dfb-8b0b-a94981268f95"><code class="python">pt(size)</code></pre>
-       <div class="ms-3 collapse" id="36e157ee-f877-42a1-b70b-befeedc1f9d9">
-        <h6 id="d7ab66bc-9e28-497f-bd1a-e372f6e4150d">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="61278729-f6ad-42b1-bb06-8868796f9537">
+       <pre id="b2eaa19e-e73c-4ee3-bd7d-a3ce415abe9a"><code class="python">pt(size)</code></pre>
+       <div class="ms-3 collapse" id="1756b539-d469-4a3b-b566-7e845098163d">
+        <h6 id="30a1d047-7a5e-4c2e-b138-72f137dde290">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="8f1178f8-2cc5-414a-9b6a-747000090564">
          <thead>
           <tr>
            <th scope="col">
@@ -1663,13 +1581,11 @@ button = Button("Hello").ps(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="31e00bab-f563-48fd-95b8-6af802fdbf9e">
-        <h6 id="57c1d7d7-ca4b-46b3-902b-aad99a1cf23f">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="bc4fbc6a-1436-4048-aee4-c6e12e2d4086">
+        <h6 id="e696460b-f29a-41c0-818a-5b60f0e4b02b">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="ea97fd06-5591-42f5-8528-06e81756a22b">
+        <table class="table table-sm bg-light" id="e8a289c7-c773-4ad1-b58b-9b27889ac85d">
          <thead>
           <tr>
            <th scope="col">
@@ -1702,47 +1618,43 @@ button = Button("Hello").ps(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="9eea056d-0273-446b-9655-610dbaed32e4">
-        <h6 id="530cc505-318d-4f63-b28b-84a466e109a3">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="f111c36c-3bb7-4536-8830-e8b71d4958f1">
+        <h6 id="669d50c8-3181-41ec-a838-da4c34e111e0">
+         Example
         </h6>
-        <pre id="2faa02ea-4777-4452-9b90-eea4b398b2ac"><code class="python">from bootwrap import Button
+        <pre id="e6719d80-80c0-4eaa-adfc-52b70f57d470"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").pt(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="ac64d0d2-d06b-4ced-991a-40af06074c4c">
-       <div class="d-flex justify-content-between" id="99f2c63a-0b2b-42b2-8c44-7dde9ced071d">
-        <h4 id="7a3f3769-7e9b-41df-86d6-0782236b04f6">
+      <div class="mt-5" id="47ac32bf-476f-4505-a4ff-84190cb4fea2">
+       <div class="d-flex justify-content-between" id="5b151ef4-7d94-42c4-a7e7-9ebcfd618b8e">
+        <h4 id="fef152cc-8ef3-4593-be40-4aa12fc934fd">
          Method
-         <span class="text-primary" id="98a5fbf9-0e0a-4659-a5c2-e3f08a35166d">
+         <span class="text-primary" id="62a280e3-5f5b-4e03-8d8c-faee6426656c">
           px
          </span>
         </h4>
-        <div id="a9b6dffa-af89-4f44-a8ce-2b0d6c7ad026">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#0493a3ff-3a08-44b1-9a96-20449a1b55c4" data-bs-toggle="collapse" id="310894f5-162e-4d5a-a874-ebdac9b309ab" onclick="return false;" type="button">
+        <div id="ea26dc59-d1cf-4d13-97b4-6ac6d08b4611">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#c7c7a596-79fa-4d96-a551-840be19d5296" data-bs-toggle="collapse" id="13750aac-1bd2-499c-b271-fe19fc2b71f9" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#fd3f9c3a-94b3-4aab-b906-fd413fdf2575" data-bs-toggle="collapse" id="a91cd67b-043b-41c4-a81e-36e543665f0b" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#02d9eef3-5699-40bd-8088-74495796617f" data-bs-toggle="collapse" id="33307214-2bbd-4b4f-99df-f6ce4c9d577a" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="cea5e1cb-8e3a-4d14-a42b-dda9928e94a9">
+       <span class="text-muted" id="c38b8bec-629a-48c4-94c8-9f72dd39f22d">
         Sets padding for left and right sides to the specified size.
        </span>
-       <pre id="7b42dcf0-de56-44dc-b3aa-f17a0b3a5993"><code class="python">px(size)</code></pre>
-       <div class="ms-3 collapse" id="0493a3ff-3a08-44b1-9a96-20449a1b55c4">
-        <h6 id="12fa0ed6-205f-4e68-9a93-67a2ac1cc0d8">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="f214e35c-3ab3-481f-b844-d26080495113">
+       <pre id="b8394594-08cf-4385-8f0d-ecaeddc849f9"><code class="python">px(size)</code></pre>
+       <div class="ms-3 collapse" id="c7c7a596-79fa-4d96-a551-840be19d5296">
+        <h6 id="bd4aa1c5-810b-4098-929a-1234c5920bff">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="a87ea92c-0e15-44cf-8b9a-33b55347b30d">
          <thead>
           <tr>
            <th scope="col">
@@ -1775,13 +1687,11 @@ button = Button("Hello").pt(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="fd3f9c3a-94b3-4aab-b906-fd413fdf2575">
-        <h6 id="62a66fc9-74cb-493c-a63d-476a2534664b">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="02d9eef3-5699-40bd-8088-74495796617f">
+        <h6 id="ea2cf5ae-0ba3-413d-b5ce-fa2e9a2be517">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="d0ef3f3a-8526-49b0-a2e5-0562b9157b94">
+        <table class="table table-sm bg-light" id="796ae7d5-a937-4cc3-af4d-8e6f4e75586c">
          <thead>
           <tr>
            <th scope="col">
@@ -1814,47 +1724,43 @@ button = Button("Hello").pt(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="e1fa80a9-4b4f-4efa-9cd9-54445524e29c">
-        <h6 id="5eefe086-23e8-4d3d-8363-ff84b2e36024">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="2cd86645-d73f-4887-8077-535349384595">
+        <h6 id="ae4f43c1-ab23-49e4-82c9-a017cbb39fff">
+         Example
         </h6>
-        <pre id="36ae8395-2f51-47a1-96ff-6e1f396d4ed5"><code class="python">from bootwrap import Button
+        <pre id="fb876371-7838-49aa-8694-73c37f21ff7d"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").px(3)
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="6dae0e4a-2de5-4647-b19c-92175d9dd3dc">
-       <div class="d-flex justify-content-between" id="0b646c67-cc4d-4beb-a908-472918e96154">
-        <h4 id="d894d4d7-01a6-499b-ada9-77bbc19ca427">
+      <div class="mt-5" id="21a9ab9c-6565-43ca-a990-f4b8ae38c6f8">
+       <div class="d-flex justify-content-between" id="719404e2-87c8-4a99-8013-078cc754a188">
+        <h4 id="c58befed-a351-4e4e-9bbf-161bc80d199e">
          Method
-         <span class="text-primary" id="ca1401b0-9ca3-44ac-85c7-d29ee6ef53e6">
+         <span class="text-primary" id="ce4ff18c-c379-4419-943f-d4e11de583a7">
           py
          </span>
         </h4>
-        <div id="129f5df5-5b6d-42eb-884c-86863796aea3">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#a924f4a7-bde4-4805-a532-60c14b1f42d9" data-bs-toggle="collapse" id="351eb730-3ae1-45f5-8261-f6c4431fd54b" onclick="return false;" type="button">
+        <div id="f7474e53-2811-433e-8061-7e19185adfce">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#ef10e5e9-09ea-4922-81c0-b00dd10cf9c9" data-bs-toggle="collapse" id="2bc3b7e9-447e-45f4-9e3b-9eb250c46e60" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#83f72b05-44cd-4d51-b652-3005624539ba" data-bs-toggle="collapse" id="921f7569-99cd-45d0-aef0-961f2b842c7b" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#4a7d53b7-0afa-4a8a-abcf-81cd53fe5762" data-bs-toggle="collapse" id="2989c917-b475-4ed4-8e8b-ffa6d0cdd0f3" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="ffd98630-04c6-416f-91b3-f567dbce2dd6">
+       <span class="text-muted" id="79694ff4-485f-42c1-9c90-66d092c0fe99">
         Sets padding for top and bottom sides to the specified size.
        </span>
-       <pre id="17d93530-3b5f-4f67-8344-84541dbc5de3"><code class="python">py(size)</code></pre>
-       <div class="ms-3 collapse" id="a924f4a7-bde4-4805-a532-60c14b1f42d9">
-        <h6 id="4b290568-72d3-4f98-9bde-e30d5db7d38c">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="9d0fdc10-596f-4273-8ce7-f1f780a40179">
+       <pre id="acd8ce2d-cd99-494e-b1c2-29c8d30e8eb9"><code class="python">py(size)</code></pre>
+       <div class="ms-3 collapse" id="ef10e5e9-09ea-4922-81c0-b00dd10cf9c9">
+        <h6 id="05e7cdde-2fb7-40f2-b3a0-5de0a5247367">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="1069b9bb-cec0-41b7-a205-9766f5d368dc">
          <thead>
           <tr>
            <th scope="col">
@@ -1887,13 +1793,11 @@ button = Button("Hello").px(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="83f72b05-44cd-4d51-b652-3005624539ba">
-        <h6 id="50953ab6-a401-4cc5-b770-85971134521b">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="4a7d53b7-0afa-4a8a-abcf-81cd53fe5762">
+        <h6 id="700c810d-2d3c-44e3-9003-a4f0cb5a93a0">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="4054c42d-b812-4bde-918d-1bb22481734c">
+        <table class="table table-sm bg-light" id="2ea8f1f1-3c71-456a-a79c-7d31b7c400f8">
          <thead>
           <tr>
            <th scope="col">
@@ -1926,13 +1830,11 @@ button = Button("Hello").px(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="bfd8bfd9-b4e6-49f6-88fb-d1b75132e373">
-        <h6 id="669fef85-a9ca-4ad6-808f-d42cfde1cc25">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="4e8ef0e0-2c77-494f-a7f7-53216643dc07">
+        <h6 id="859c6c36-5b1e-4c5a-a5e7-306d1fdd34a8">
+         Example
         </h6>
-        <pre id="4f6c0698-1af6-4118-a901-5e753313cc26"><code class="python">from bootwrap import Button
+        <pre id="de0d4713-d108-478e-adca-467378ef4576"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ClassMixin.
 button = Button("Hello").py(3)
@@ -1941,50 +1843,48 @@ button = Button("Hello").py(3)
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="7c0d76a6-5988-4782-989d-1b8ed90dfc3f">
-     <div class="mt-5" id="c0363bc6-ddf8-4f53-b0c5-8368f9aafa9f">
-      <div class="d-flex justify-content-between" id="d1152d58-4dff-47f9-abf4-64b08902ea75">
-       <h1 id="7f6561a7-378a-46b9-9fa6-f2ce53610dc8">
+    <div class="tab-pane fade" id="23dfcf5f-4590-4252-bf75-ccb2ce4067ec">
+     <div class="mt-5" id="3cb5cc5f-85d3-4f5e-8d37-fc42614e7307">
+      <div class="d-flex justify-content-between" id="5d941f21-4187-45da-950c-2e286f9d43eb">
+       <h1 id="0de95c50-3497-445c-b2ac-3655a2e7a8f5">
         Class
-        <span class="text-primary" id="b269bdc9-b16a-4ddd-86ef-6d5644bc2033">
+        <span class="text-primary" id="7abe1176-fae7-4618-999a-adaf64834fde">
          ActionMixin
         </span>
        </h1>
-       <div id="be11522f-b385-4362-9a0d-811243b0f51c">
+       <div id="b08dbcc3-b46d-4988-bfc2-f54818d4a4f7">
        </div>
       </div>
-      <span class="text-muted" id="973dc93d-9db5-4d81-8d1d-34be3eb9fbbd">
+      <span class="text-muted" id="f6fcf963-d20a-47fc-8f86-c102a361a2a8">
        Mixin for a web component which able to perform an action.
       </span>
-      <pre id="058e7abb-81c5-42e9-b2c6-b15dba627c51"><code class="python">ActionMixin()</code></pre>
-      <div class="mt-5" id="43f300fc-c716-4a67-b7e9-2ce172c79a8e">
-       <div class="d-flex justify-content-between" id="246938ba-ff99-4c47-81b2-60f7b3ace557">
-        <h4 id="502295d4-bcc9-4835-9b2f-bc78789ef7dc">
+      <pre id="7e1e3c5f-5224-47da-af5e-5bc2b13a327e"><code class="python">ActionMixin()</code></pre>
+      <div class="mt-5" id="d69ec94e-8e71-4f90-bdfe-24a76578f2aa">
+       <div class="d-flex justify-content-between" id="1824a449-d692-4a7a-8236-2a185342b6c9">
+        <h4 id="0d4d0c88-3f6c-4cce-a33f-afe51fe8e3a9">
          Method
-         <span class="text-primary" id="5f71b6d6-3c09-411c-b25e-e1aa10198887">
+         <span class="text-primary" id="a30076d8-6cf0-4c06-9220-940496869d2d">
           add_menu
          </span>
         </h4>
-        <div id="9bcae843-8210-4d12-861e-0b68da2cce2c">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#3f6d6d83-b9a3-4681-87e5-d0c8845f9779" data-bs-toggle="collapse" id="5eab5ac0-8302-4b0a-a52a-6f6126f2b84c" onclick="return false;" type="button">
+        <div id="39e337f4-c7d1-48c4-b570-17303916806a">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#9a799a36-5965-4421-a7f6-96f210acea76" data-bs-toggle="collapse" id="e281a1ce-9b1e-4625-a04c-aaa44c231d58" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#63c98480-eea9-42a3-b6a8-8906cfac2334" data-bs-toggle="collapse" id="74b52023-ca19-40da-835f-d4d7ae15d397" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#e7836d44-298c-4ebe-a7b8-8529f6553450" data-bs-toggle="collapse" id="5a6b7118-32ae-4002-8d6e-d98a70098074" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="36966c80-1777-4555-8fc3-35c543010c35">
+       <span class="text-muted" id="7b7ae256-7728-4fa3-a58a-62c22ab4c058">
         Adds dropdown menu.
        </span>
-       <pre id="6697fe8c-3b98-4177-b804-e536284ce77b"><code class="python">add_menu(*menu)</code></pre>
-       <div class="ms-3 collapse" id="3f6d6d83-b9a3-4681-87e5-d0c8845f9779">
-        <h6 id="d2d8f851-946d-413f-b007-1da36e5f5a57">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="4ad8cad4-df7a-4a6c-9fef-53ebda40c730">
+       <pre id="e8152bfb-b217-4b2d-a9a5-ebfb5db41b96"><code class="python">add_menu(*menu)</code></pre>
+       <div class="ms-3 collapse" id="9a799a36-5965-4421-a7f6-96f210acea76">
+        <h6 id="353b13eb-5145-4ec8-aa2a-e83387e34303">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="4b25ab57-ec6c-4911-96a4-a306f77df5d2">
          <thead>
           <tr>
            <th scope="col">
@@ -2026,13 +1926,11 @@ button = Button("Hello").py(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="63c98480-eea9-42a3-b6a8-8906cfac2334">
-        <h6 id="48c484ee-b498-4a89-a164-ac7e5e9c2727">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="e7836d44-298c-4ebe-a7b8-8529f6553450">
+        <h6 id="ba61db3a-98a1-4581-96d0-872394fced19">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="df32e849-d195-452a-af38-25b485fec554">
+        <table class="table table-sm bg-light" id="ef96bee3-1ec8-44d1-9d8f-7fafb81f2154">
          <thead>
           <tr>
            <th scope="col">
@@ -2065,13 +1963,11 @@ button = Button("Hello").py(3)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="0b43d32b-73df-4a57-8b2f-b833f0640366">
-        <h6 id="1d64d3e4-2f45-4091-a134-38ad42fc9d8e">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="e469982b-25c8-4492-a309-fecee1d758b6">
+        <h6 id="30b65091-bf22-4595-99bb-dd3c875961ec">
+         Example
         </h6>
-        <pre id="b060e325-2fe8-473d-87de-723211ef00a3"><code class="python">from bootwrap import Button
+        <pre id="1a1d04b5-96d3-4af6-a111-6026484f14d7"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ActionMixin.
 button = Button('Portfolio').add_menu(
@@ -2082,31 +1978,29 @@ button = Button('Portfolio').add_menu(
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="7faf83a4-2b6b-4f43-b59d-1d795fed7893">
-       <div class="d-flex justify-content-between" id="1b42689e-6a06-41f7-8e65-8bac3093ffca">
-        <h4 id="c37e02bd-47f0-48cc-bc72-310e448ab34c">
+      <div class="mt-5" id="b425cd95-2895-403b-94bd-d0166c1f2c6e">
+       <div class="d-flex justify-content-between" id="66019cfc-9784-404c-841f-c9fd288b1585">
+        <h4 id="4f975a18-301b-4e32-86a9-c0bbd8bf58c9">
          Method
-         <span class="text-primary" id="71f2bb8b-537f-4ae9-a68c-3f6189f131fe">
+         <span class="text-primary" id="0fa44099-ca15-4058-81a3-cfdcef7fc21c">
           dismiss
          </span>
         </h4>
-        <div id="2eb0c5a3-84fd-46d6-ba66-c4203801bf72">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#f1e4c106-a924-4d8d-8380-9b0935d87807" data-bs-toggle="collapse" id="13ff64e7-f9d7-4946-a068-8cee46cafde4" onclick="return false;" type="button">
+        <div id="738042fa-7098-4c2f-8f9a-1cd55ccd673f">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#8f1ae8ad-fa9f-4df9-b9a4-aac06118ba62" data-bs-toggle="collapse" id="2ffe9205-920c-4cdd-82a5-a3cc520409a8" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="710b5f29-e7c5-4c6f-9d05-3b72da887a44">
+       <span class="text-muted" id="34ccea0b-1f23-49aa-a891-fa7824ab4919">
         Performes a dismiss action.
        </span>
-       <pre id="0bc351de-4242-4213-a2cd-2f4b46d78489"><code class="python">dismiss()</code></pre>
-       <div class="ms-3 collapse" id="f1e4c106-a924-4d8d-8380-9b0935d87807">
-        <h6 id="c5510990-8da6-4805-82d2-b30539b7086f">
-         <strong>
-          Returns
-         </strong>
+       <pre id="1085afd0-2556-471d-baff-8319721e2ca4"><code class="python">dismiss()</code></pre>
+       <div class="ms-3 collapse" id="8f1ae8ad-fa9f-4df9-b9a4-aac06118ba62">
+        <h6 id="b96f43a0-fc50-47c3-9a7d-0c14e7e43c4a">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="5f0ee7f8-89de-4fde-955a-3a7ef90d6fd6">
+        <table class="table table-sm bg-light" id="8b6482fb-54b4-49ee-914a-d7c803bc4b82">
          <thead>
           <tr>
            <th scope="col">
@@ -2139,13 +2033,11 @@ button = Button('Portfolio').add_menu(
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="90859b72-0992-430d-b5b8-8ff87dfcab40">
-        <h6 id="868fbf10-7664-4ae2-a26f-4c78f4ff33a3">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="fc0d7330-0de9-47e9-ad6f-89ceb3357a31">
+        <h6 id="dbe92d62-6acf-401c-b57a-4f8c1a69332f">
+         Example
         </h6>
-        <pre id="4b4a9044-a486-403a-89fb-8614301d0d8b"><code class="python">from bootwrap import Dialog, Button
+        <pre id="6946dd1b-f884-45d6-961a-dd86fbd4c2a1"><code class="python">from bootwrap import Dialog, Button
 
 # Note, that Button inherits ActionMixin.
 dialog = Dialog(
@@ -2155,34 +2047,32 @@ dialog = Dialog(
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="6ffb0fec-1762-4079-b6c7-965dfc0481b6">
-       <div class="d-flex justify-content-between" id="a299024a-7371-4a22-b52f-ec3d2ad051ae">
-        <h4 id="ddcbb068-20e7-4bad-a406-5feaef11b31a">
+      <div class="mt-5" id="b57de400-b7fa-4cb5-856e-cc9870aa8731">
+       <div class="d-flex justify-content-between" id="d45ddd6c-9f3a-4b28-8fca-77f568cb5730">
+        <h4 id="21e9e7d9-50df-4f77-aec7-6dc494d444bb">
          Method
-         <span class="text-primary" id="b921f036-97e7-4ec0-8aa5-9e62cc715bde">
+         <span class="text-primary" id="9c467908-ed2e-4aa2-ac18-c168952e90ae">
           link
          </span>
         </h4>
-        <div id="0a58db59-a89b-4762-9bde-bef4c431d25e">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#cc0d3cf4-577b-4714-9917-ce00653b4ee2" data-bs-toggle="collapse" id="129f6939-3583-4f8d-b5aa-6f96e1d5bad5" onclick="return false;" type="button">
+        <div id="9f8c65f0-e547-49a7-8734-e33714182924">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#5dbfd555-c491-496b-b1b5-63a25cee5415" data-bs-toggle="collapse" id="3708ed48-f8cd-4c42-90fe-be5546b59fa6" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#7335f956-41b2-41b5-96db-80b8fdb2b9de" data-bs-toggle="collapse" id="4ea64158-a80a-4466-8926-1321d976967a" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#c803bee9-3531-44f9-bed4-2db744e7f54f" data-bs-toggle="collapse" id="954ad2f1-708c-4a03-9124-67b685da064a" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="58e884ab-8f62-40c2-bab5-aab398c96a2d">
+       <span class="text-muted" id="d818916c-e1b3-4d1d-a0bb-1e89c73f5423">
         Links to the web-resource.
        </span>
-       <pre id="be3c9c67-fc29-4e64-bd19-9a55e7403ff3"><code class="python">link(target)</code></pre>
-       <div class="ms-3 collapse" id="cc0d3cf4-577b-4714-9917-ce00653b4ee2">
-        <h6 id="376bca62-68c2-40a5-ba77-099cac807744">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="df5ef2f4-5bef-4fe9-b96a-6cc4c5d1e402">
+       <pre id="5b1ff220-3fa8-4ec9-adc4-f6e449d93018"><code class="python">link(target)</code></pre>
+       <div class="ms-3 collapse" id="5dbfd555-c491-496b-b1b5-63a25cee5415">
+        <h6 id="8bb304c5-27a0-4548-8109-b1b6b8cb372c">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="c8816800-6cb5-4fee-83ca-096261d03194">
          <thead>
           <tr>
            <th scope="col">
@@ -2220,13 +2110,11 @@ dialog = Dialog(
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="7335f956-41b2-41b5-96db-80b8fdb2b9de">
-        <h6 id="f28939c4-d0e8-4361-bf57-b096d80669f6">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="c803bee9-3531-44f9-bed4-2db744e7f54f">
+        <h6 id="1fd797ba-ec98-4025-a39c-c69c9535caca">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="71aaa4b8-594f-4e1b-9032-3c3176bc1c07">
+        <table class="table table-sm bg-light" id="5888dd1a-50bb-48be-94d9-95b73589ba37">
          <thead>
           <tr>
            <th scope="col">
@@ -2259,44 +2147,40 @@ dialog = Dialog(
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="00393678-9ef9-4e24-8419-6544b39e3555">
-        <h6 id="051773f7-cd53-4d8d-9354-a722fbb36efa">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="8efc2f9c-6c2e-47ed-92f7-bfbcd0e6c826">
+        <h6 id="9c5b464a-e21e-4743-bcb1-324a2f1fed2b">
+         Example
         </h6>
-        <pre id="2b0b56e3-dd7b-4efa-a4df-1513192b1283"><code class="python">from bootwrap import Button
+        <pre id="f20eb95b-b7ca-4079-9021-d5e0bf88034b"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits ActionMixin.
 button = Button("Search").link("https://www.google.com")
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="06debb70-93eb-4d32-82a4-89b62135e7e3">
-       <div class="d-flex justify-content-between" id="6bdb2b05-a332-431d-9b9c-f36e2a47ee6d">
-        <h4 id="3cb81f15-839e-4c0d-921a-db552c0e34e8">
+      <div class="mt-5" id="9b427371-4a9c-400b-9aea-3d62dbee2fdf">
+       <div class="d-flex justify-content-between" id="5ea25c07-7491-401c-b8b0-33a10ca6db1f">
+        <h4 id="ec8d6bd8-692b-4d48-9e3a-7b87c6f16e7e">
          Method
-         <span class="text-primary" id="7d2e6263-7867-469a-a4b2-d43271d2e83f">
+         <span class="text-primary" id="2b79a0eb-d239-4533-be1c-9551e9e4af15">
           submit
          </span>
         </h4>
-        <div id="9535c1a0-33a4-4721-bf50-3d76f263e648">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#f8059ae9-a427-479b-8939-5cfb24594595" data-bs-toggle="collapse" id="0f714ea1-1e9b-48a6-a94e-4ae294270001" onclick="return false;" type="button">
+        <div id="780d7dc8-afc9-47a3-a748-97837aa1de0d">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#619a51a2-5051-4c98-b28b-b268331c89ae" data-bs-toggle="collapse" id="0b573303-109b-4136-9129-7022de0e5743" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="7229942e-1a2e-410b-8696-0a25ff903e97">
+       <span class="text-muted" id="fb4711c0-5aca-4c6f-b099-8eb537bb8429">
         Performes a submit action.
        </span>
-       <pre id="5a9d34b3-3f84-4f65-9084-33e4734edad4"><code class="python">submit()</code></pre>
-       <div class="ms-3 collapse" id="f8059ae9-a427-479b-8939-5cfb24594595">
-        <h6 id="57c8d6f0-0950-4ea7-82ff-0713fa99f561">
-         <strong>
-          Returns
-         </strong>
+       <pre id="cad23c6c-7191-4ab6-9802-6f940170fc4f"><code class="python">submit()</code></pre>
+       <div class="ms-3 collapse" id="619a51a2-5051-4c98-b28b-b268331c89ae">
+        <h6 id="8ee9b8db-c48b-403c-ab69-185c478d9489">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="3f6a3223-4a8d-4fb0-b82e-b077ccb2e628">
+        <table class="table table-sm bg-light" id="ed8a3dd8-2718-4ba8-b266-9dfa8aa99597">
          <thead>
           <tr>
            <th scope="col">
@@ -2329,13 +2213,11 @@ button = Button("Search").link("https://www.google.com")
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="de2a9669-b6b3-46bd-a8bb-64a05ada9a66">
-        <h6 id="cbd1ee15-745f-4771-b9b3-ba414f8ad133">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="99e38e6c-7b72-460e-974d-6808e6a0f835">
+        <h6 id="b4f58a9a-e8e0-412e-aae4-6aeefd944573">
+         Example
         </h6>
-        <pre id="5c619800-428d-498d-8509-e40b0955284a"><code class="python">from bootwrap import Form, Button
+        <pre id="963cf7b6-0528-468d-a2d8-fcf679d00456"><code class="python">from bootwrap import Form, Button
 
 # Note, that Button inherits ActionMixin.
 form = Form(
@@ -2345,34 +2227,32 @@ form = Form(
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="8dbb5912-478a-4709-a478-64ffcd3a2319">
-       <div class="d-flex justify-content-between" id="215b582b-033f-418e-9cac-ac9696b0203c">
-        <h4 id="5c353897-032d-4c2c-b346-23443a7c38ce">
+      <div class="mt-5" id="e3bb0625-d93d-4177-8c23-90fbd50feb13">
+       <div class="d-flex justify-content-between" id="2910bc37-a31d-46e4-8ea1-5547a5993242">
+        <h4 id="2e872cdc-8180-4200-b601-536b4bf63771">
          Method
-         <span class="text-primary" id="e5b3d99d-df53-4601-97bf-84e5db3e9ebb">
+         <span class="text-primary" id="b5b5efbc-5991-429e-a65c-7d83227672cf">
           toggle
          </span>
         </h4>
-        <div id="b13f820a-b651-4d06-8a69-b4eab0e899e4">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#84c9a3ca-6355-4559-a32f-da338e5f81e2" data-bs-toggle="collapse" id="e0e13179-239f-4fd1-9770-8ebe28996c36" onclick="return false;" type="button">
+        <div id="e490bd0a-ac02-4952-acd2-e75d2ca0b6e4">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#04f23eb5-674a-43e3-bd2d-47b2c4c56ed6" data-bs-toggle="collapse" id="faf55874-6067-4a4e-ba28-cd1b5e4d39d5" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#50a48a4e-9bdc-4943-aead-5b25070a45ef" data-bs-toggle="collapse" id="aefa33f2-97c4-4b2c-8ad4-187fbc6b7c85" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#064e98ed-0a76-46db-a348-427bd8d1d921" data-bs-toggle="collapse" id="480c90d8-ab37-40ca-a2d3-b39266aecfb0" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="243485e1-62a0-409a-8a37-a57fe5d2be87">
+       <span class="text-muted" id="1efac113-0ac1-46ad-85d0-a8196855bb95">
         Toggles an other web component.
        </span>
-       <pre id="4481cef5-af77-4927-9372-b1b2f0713701"><code class="python">toggle(target)</code></pre>
-       <div class="ms-3 collapse" id="84c9a3ca-6355-4559-a32f-da338e5f81e2">
-        <h6 id="ca2704e8-118c-4f75-b1dd-7df4dfac3140">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="be2e35f0-372c-4616-9bd4-d6276fd69a25">
+       <pre id="092aa6d1-6886-4739-bef3-014ac3300991"><code class="python">toggle(target)</code></pre>
+       <div class="ms-3 collapse" id="04f23eb5-674a-43e3-bd2d-47b2c4c56ed6">
+        <h6 id="16f01083-57ea-4dc5-ae82-430b8eb554fc">
+         Arguments
+        </h6>
+        <table class="table table-sm bg-light" id="460e8336-089b-4d42-95b7-613a63edc171">
          <thead>
           <tr>
            <th scope="col">
@@ -2405,13 +2285,11 @@ form = Form(
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="50a48a4e-9bdc-4943-aead-5b25070a45ef">
-        <h6 id="80c5a3af-77ea-4d04-9c55-2bdbf5fc6b0c">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="064e98ed-0a76-46db-a348-427bd8d1d921">
+        <h6 id="1b1af654-522e-4b75-8132-7a7b5eda758a">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="e15243b9-f5b2-46bd-b529-f3a234670f3a">
+        <table class="table table-sm bg-light" id="eea4273b-a2fa-471a-9055-e1ee76c04daf">
          <thead>
           <tr>
            <th scope="col">
@@ -2444,13 +2322,11 @@ form = Form(
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="3c81a2bc-26d6-4ee3-b187-3bfd8816d090">
-        <h6 id="5903b1b9-e950-4bda-a1f6-444ab89f1e78">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="31add213-1264-4a7c-8c6e-c17146b01c2f">
+        <h6 id="c3fba7ae-ec6b-4f59-b1ce-cce08ffd64c0">
+         Example
         </h6>
-        <pre id="236fa2c6-dd96-40da-853c-92ee255b815d"><code class="python">from bootwrap import Button, Dialog
+        <pre id="96057a93-1127-4ddf-8d02-e95dd54a7032"><code class="python">from bootwrap import Button, Dialog
 
 # Note, that Button inherits ActionMixin.
 dialog = Dialog(...)
@@ -2460,48 +2336,46 @@ button = Button("Open").toggle(dialog)
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="ec9f61fb-fdb1-4703-998b-8917ae613e82">
-     <div class="mt-5" id="d20b1625-dcc6-458c-a035-c2fb333f6f77">
-      <div class="d-flex justify-content-between" id="483ef35c-f4f8-4890-ace0-ce8a0fa8bff6">
-       <h1 id="b2821ae6-875b-47a2-9807-c99921c22001">
+    <div class="tab-pane fade" id="cc4a1b9b-7195-42ae-b952-f9b4fe4b90eb">
+     <div class="mt-5" id="8bf85235-8990-4e7d-ae69-6f018ce0262d">
+      <div class="d-flex justify-content-between" id="5a355092-4f26-4e77-b3cd-1d0992b26a50">
+       <h1 id="62effaa8-d0f7-4d33-8266-af46da29a2ad">
         Class
-        <span class="text-primary" id="b78ebe85-b78c-484f-9281-0dcac040e626">
+        <span class="text-primary" id="b0e66d7c-7db2-4468-8a38-6808e93f96b6">
          AppearanceMixin
         </span>
        </h1>
-       <div id="90d4f4b2-66b1-416c-b778-7ab0cdb3a232">
+       <div id="ae545bf2-509b-4f7a-a374-27abcf5ac1ca">
        </div>
       </div>
-      <span class="text-muted" id="4083b4b9-e934-462a-8243-5bbe52a3c9ca">
+      <span class="text-muted" id="d8e180ba-4336-42d1-8ae2-4d7517d766ba">
        Mixin for a web component which appearance can be associated
     with predefined categories.
       </span>
-      <pre id="5ee6912f-90e5-4ede-92ce-528c44aee9ed"><code class="python">AppearanceMixin()</code></pre>
-      <div class="mt-5" id="714b5bd7-e6f0-426d-9535-dca0b0ed5828">
-       <div class="d-flex justify-content-between" id="f5df11c8-1093-4453-b4e2-33221120c1ec">
-        <h4 id="27f8bc58-f5a4-412c-9251-605bfa77726b">
+      <pre id="06e2a02e-371f-4125-81b3-22794a19fd4a"><code class="python">AppearanceMixin()</code></pre>
+      <div class="mt-5" id="06c8e69c-fc56-47c6-a001-685fd489487a">
+       <div class="d-flex justify-content-between" id="ec37a0ee-d604-42fe-8578-ee3fecb91a7d">
+        <h4 id="8de65717-d679-4819-9744-e4b350cda194">
          Method
-         <span class="text-primary" id="0d99a767-033c-4692-bd10-e808306db0ba">
+         <span class="text-primary" id="1bd91ccc-7d82-462a-8fe2-2a848b85e4bf">
           as_danger
          </span>
         </h4>
-        <div id="c9ab8004-1bee-4282-9f18-f4a3870b2e9b">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#366472e8-ff01-459f-89d0-01af9d5c9ab5" data-bs-toggle="collapse" id="198453d4-34a6-4d01-9d54-f0cdac315872" onclick="return false;" type="button">
+        <div id="762e3b50-5e5f-464c-b862-ebee0357c561">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#bfd103f6-86db-4fcb-bb48-e9be270e80df" data-bs-toggle="collapse" id="fc645ab0-6548-4d99-b34a-bda60fae9b13" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="2b379914-c706-4ae0-868b-15c73962c5da">
+       <span class="text-muted" id="6069058b-4c67-4769-a72f-b21523c4a926">
         Makes the 'danger' look to a web components.
        </span>
-       <pre id="c98dc85b-edc1-4b4b-a35e-cab070dc4f82"><code class="python">as_danger()</code></pre>
-       <div class="ms-3 collapse" id="366472e8-ff01-459f-89d0-01af9d5c9ab5">
-        <h6 id="d4dce61e-be8f-4fee-ab0e-e28d43c2794a">
-         <strong>
-          Returns
-         </strong>
+       <pre id="5e8cd5f2-77cb-4040-aebf-5ed6d8fa967b"><code class="python">as_danger()</code></pre>
+       <div class="ms-3 collapse" id="bfd103f6-86db-4fcb-bb48-e9be270e80df">
+        <h6 id="31bead29-fe06-438c-9788-55478df38477">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="eab8200f-7662-400e-826a-c09008ba42b3">
+        <table class="table table-sm bg-light" id="3b93c35f-8f7d-466b-98ea-4c152a6b991e">
          <thead>
           <tr>
            <th scope="col">
@@ -2534,44 +2408,40 @@ button = Button("Open").toggle(dialog)
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="2fa8842d-08d4-4e16-a978-3f369ceb6999">
-        <h6 id="5b2a15f7-758a-416f-ac6f-09435dafdb90">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="8f1ffe17-a800-4a83-b67a-9e86d0739066">
+        <h6 id="eff20d98-1a93-4efc-8584-289d4be2f3bb">
+         Example
         </h6>
-        <pre id="a657af80-dd52-4f15-a526-009695573e6d"><code class="python">from bootwrap import Button
+        <pre id="509fb70e-a411-43cb-8f78-66a563741076"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Danger").as_danger()
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="a506c855-b971-43ce-91ec-b566fb986574">
-       <div class="d-flex justify-content-between" id="a38713bd-3619-48ff-9609-efff8b2ab206">
-        <h4 id="9a29345f-9fa8-492c-b498-6ee3e7cca4f9">
+      <div class="mt-5" id="4cb215fe-5426-4397-9c50-76510f25d407">
+       <div class="d-flex justify-content-between" id="d91b492f-ffd8-4105-81d6-894b0760cb21">
+        <h4 id="a5ec1386-3cbd-4c6e-9609-43ef08cb2283">
          Method
-         <span class="text-primary" id="cdcb2678-ecc8-4ae5-9a39-4c21f3448804">
+         <span class="text-primary" id="4f2fc1a8-7ef5-47cf-ac41-df98e088d28e">
           as_dark
          </span>
         </h4>
-        <div id="ee382a58-5a03-4172-94f1-e47d609e2447">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#eed83ec1-c0aa-43ad-98c6-763f080c9470" data-bs-toggle="collapse" id="6a923b95-a05f-4cd8-86b6-c90ffeae41cc" onclick="return false;" type="button">
+        <div id="665bf4dc-9c1b-40dd-ba97-39c44cfa531e">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#e435d365-dc83-4a56-9fe9-427f93563fcb" data-bs-toggle="collapse" id="40a7fab3-b165-4f42-b6d8-6fab6f85c72c" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="64e3bdef-8362-4e56-8c51-38e07e6dde55">
+       <span class="text-muted" id="6103a7f5-001a-4600-bd36-46dcf660f209">
         Makes the 'dark' look to a web components.
        </span>
-       <pre id="5bbccfe8-d660-41b3-8e91-1546a6d6062c"><code class="python">as_dark()</code></pre>
-       <div class="ms-3 collapse" id="eed83ec1-c0aa-43ad-98c6-763f080c9470">
-        <h6 id="3b4251fa-d417-4cc9-a87f-9d7245262e08">
-         <strong>
-          Returns
-         </strong>
+       <pre id="deea99b7-b4f0-4cce-97c4-5a0cf833d341"><code class="python">as_dark()</code></pre>
+       <div class="ms-3 collapse" id="e435d365-dc83-4a56-9fe9-427f93563fcb">
+        <h6 id="885362eb-03d4-4cc0-9b79-c2833508f5b4">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="b5baa345-2da1-4818-9771-e543ad84a758">
+        <table class="table table-sm bg-light" id="a45bab5d-d1e9-4254-8140-8ff80b1fc574">
          <thead>
           <tr>
            <th scope="col">
@@ -2604,44 +2474,40 @@ button = ("Danger").as_danger()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="25008e2a-3106-401a-b1c8-30029d98615e">
-        <h6 id="08e9188e-2e9f-47e2-851f-f1a3ab5077fd">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="4991b22e-aa49-4a28-83fc-fa88166180bf">
+        <h6 id="b6be3d67-c810-4fa8-b629-35101669d99c">
+         Example
         </h6>
-        <pre id="c874c495-2b59-430e-9d9d-8d9475e94c9b"><code class="python">from bootwrap import Button
+        <pre id="e831e378-6ae0-48e6-8f38-123f5003cf20"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Dark").as_dark()
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="27c362b0-0aee-4ed4-852e-1005d7c47942">
-       <div class="d-flex justify-content-between" id="adb368fe-34d7-4333-92a8-58d0a2e8a844">
-        <h4 id="9622a358-4521-47cc-9304-5d89457e7f7b">
+      <div class="mt-5" id="88bbf3bd-6084-4b7d-a98b-7f32ccece343">
+       <div class="d-flex justify-content-between" id="7ae103e2-cfec-4af9-8c47-f5f35e6d9c94">
+        <h4 id="a1853d8d-dc3c-44dc-b3fa-6e4c5cff0605">
          Method
-         <span class="text-primary" id="27d658f2-676b-48ab-bf2b-def595fd9700">
+         <span class="text-primary" id="d54c775d-bdfd-4267-acc9-9b7d362efe09">
           as_info
          </span>
         </h4>
-        <div id="029a04bd-0363-42f5-ba08-3007876e5b82">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#4e7e3d64-f322-4090-b7fb-560f3e8ece32" data-bs-toggle="collapse" id="31b066b6-5736-4ee5-91eb-315e42719609" onclick="return false;" type="button">
+        <div id="7c0b2fab-4a13-4115-8fb5-085f0c07f364">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#f1fc1bd5-d4e5-4c7d-8f4c-d6b0a4761dd1" data-bs-toggle="collapse" id="608a8391-07ea-4ef5-b1cd-22d67a10eb66" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="d7f59260-64ef-4787-8512-2a5238d4d48a">
+       <span class="text-muted" id="4cdd9605-4fdb-4855-8649-bdb804dddcd8">
         Makes the 'info' look to a web components.
        </span>
-       <pre id="b7a17228-0da2-4475-86ab-0a4142d2fcca"><code class="python">as_info()</code></pre>
-       <div class="ms-3 collapse" id="4e7e3d64-f322-4090-b7fb-560f3e8ece32">
-        <h6 id="dd845c4c-b7ab-462a-adee-3c04cc9c0430">
-         <strong>
-          Returns
-         </strong>
+       <pre id="2d84dde0-3fd4-4ff0-adcd-b52612bf3d81"><code class="python">as_info()</code></pre>
+       <div class="ms-3 collapse" id="f1fc1bd5-d4e5-4c7d-8f4c-d6b0a4761dd1">
+        <h6 id="de79265b-cb8c-4d98-82db-03987c046c77">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="18997b97-0907-4f13-9f85-8e47b7621a0b">
+        <table class="table table-sm bg-light" id="be5d956c-f5b3-4af0-b110-ba90227fd277">
          <thead>
           <tr>
            <th scope="col">
@@ -2674,44 +2540,40 @@ button = ("Dark").as_dark()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="d329f616-7ea3-4b16-8966-2bc7d830cf63">
-        <h6 id="d038af8d-c51d-40d5-90d6-e1abdacc453b">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="e7a8e08b-4309-4cc5-9452-a4f6316fcac9">
+        <h6 id="f14b9a55-9e77-4c24-a305-3da67908d0d0">
+         Example
         </h6>
-        <pre id="187fa1e2-181d-4853-8118-78b280adb048"><code class="python">from bootwrap import Button
+        <pre id="00e54c18-e58e-443f-bacc-95f973d946dc"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Info").as_info()
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="264b85ff-862e-40b3-9095-ab72a4c570d0">
-       <div class="d-flex justify-content-between" id="1ef4bb7d-1574-4909-ae87-0c63711c23f1">
-        <h4 id="90f5a0b7-711f-4785-bcdc-983934b311f2">
+      <div class="mt-5" id="585c8710-bfef-48b8-95ff-1646c184889b">
+       <div class="d-flex justify-content-between" id="0a39d92d-a115-45b0-962b-d37febede8c4">
+        <h4 id="3d6d4265-50cc-4548-94e1-6e0eef442d81">
          Method
-         <span class="text-primary" id="706c888a-8423-48c2-8efb-d55fb81f4d43">
+         <span class="text-primary" id="1e8eaa20-995f-41f4-adc9-74b3ca0d3afc">
           as_light
          </span>
         </h4>
-        <div id="5ec5addb-9873-49e0-95fc-5d01aa8153d9">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#efa77f33-4ab8-404f-ba16-4c29183c1555" data-bs-toggle="collapse" id="224dc0a8-5e50-40b2-8216-9ec9e0fc3a55" onclick="return false;" type="button">
+        <div id="5e5b36db-48b1-44aa-a6ee-e32aa3e9abee">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#20459bd0-9c79-4ce5-a268-0e5211a4153d" data-bs-toggle="collapse" id="e0406bbd-467d-4712-b016-cf8a833ab6c8" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="fb0ba591-a305-4377-a4f5-b92eeff94420">
+       <span class="text-muted" id="e34a8708-7cb8-4942-8770-750afd0130e5">
         Makes the 'light' look to a web components.
        </span>
-       <pre id="2e3b86ea-cf58-4768-a611-c4b6f413bd0f"><code class="python">as_light()</code></pre>
-       <div class="ms-3 collapse" id="efa77f33-4ab8-404f-ba16-4c29183c1555">
-        <h6 id="2730b60e-2cbd-4023-8ca8-06a6c22dcaca">
-         <strong>
-          Returns
-         </strong>
+       <pre id="1543fb0b-af1e-42e2-ba4c-bf7ac0bf6d99"><code class="python">as_light()</code></pre>
+       <div class="ms-3 collapse" id="20459bd0-9c79-4ce5-a268-0e5211a4153d">
+        <h6 id="98528894-e6fd-4e87-ba45-3d35d0ccafa9">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="06062146-b3e6-482e-a9df-f2ee66a9327f">
+        <table class="table table-sm bg-light" id="830ca639-0f5d-4d82-be06-d4ef342ec351">
          <thead>
           <tr>
            <th scope="col">
@@ -2744,44 +2606,40 @@ button = ("Info").as_info()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="7298984e-b183-4d54-9ce4-69e8d5eb003f">
-        <h6 id="b54b33fe-ca02-4361-b014-51619052694e">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="5dcadca2-c6ba-4e7d-bfed-38ade744fc7d">
+        <h6 id="b00141f6-c418-4953-b099-c8312b56273a">
+         Example
         </h6>
-        <pre id="0c9382be-4a37-4870-ac37-c52739b46866"><code class="python">from bootwrap import Button
+        <pre id="fcec9f92-6a48-41c1-8649-f10d29707aad"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Light").as_light()
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="65a4d206-9cad-4b53-8d2a-9cc45641e029">
-       <div class="d-flex justify-content-between" id="3d1337dc-d14a-4d3f-a169-aceaa9483283">
-        <h4 id="02811ce9-f42e-498d-9222-dd7a3006237b">
+      <div class="mt-5" id="90ff04ea-b610-40a7-bbb5-76986f96fae2">
+       <div class="d-flex justify-content-between" id="bfe72a11-7ea2-4782-a11a-1a9976fc6e23">
+        <h4 id="13459aab-3651-4ed1-b43d-f0a43804dbd4">
          Method
-         <span class="text-primary" id="ea56f08c-67e2-4c64-8746-3371d1e98316">
+         <span class="text-primary" id="8323c983-bdab-46a5-97c3-128b20cac248">
           as_primary
          </span>
         </h4>
-        <div id="0641ad11-79f4-4e70-a693-0a0a6d5d3580">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#db8d8167-3ab1-4454-a135-afa6c46f665c" data-bs-toggle="collapse" id="347f1db0-6de5-4be0-a443-53a871843901" onclick="return false;" type="button">
+        <div id="f6fdb91d-c4b9-4e08-96b6-165bde50a453">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#10886d8a-3236-4c2b-957b-b1a9be042d4c" data-bs-toggle="collapse" id="32645bf6-e970-4a01-8143-989982781ec3" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="153e3da4-53cb-4158-8969-7e65d1334e5a">
+       <span class="text-muted" id="d52f49f0-bfa6-4f93-921d-dafb777b8041">
         Makes the 'primary' look to a web components.
        </span>
-       <pre id="fc4cf5ec-3365-440a-8f86-39c8618d5cb9"><code class="python">as_primary()</code></pre>
-       <div class="ms-3 collapse" id="db8d8167-3ab1-4454-a135-afa6c46f665c">
-        <h6 id="9c054307-98b1-4d3b-b58c-f3c1af9ea510">
-         <strong>
-          Returns
-         </strong>
+       <pre id="20d330bb-02cd-4027-9507-19c95e58f52f"><code class="python">as_primary()</code></pre>
+       <div class="ms-3 collapse" id="10886d8a-3236-4c2b-957b-b1a9be042d4c">
+        <h6 id="55ccd965-73fc-4eb8-a625-706c193686d9">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="f43bc5c9-fcf3-4145-8592-07101a3e9ac8">
+        <table class="table table-sm bg-light" id="d07e3d9d-f5a4-460e-9b17-da2678db571f">
          <thead>
           <tr>
            <th scope="col">
@@ -2814,44 +2672,40 @@ button = ("Light").as_light()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="d69a9606-f9b6-4b5c-b545-c6cff11b2cad">
-        <h6 id="2e57b294-c0da-47be-99f3-864100c48eb0">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="d9bee5d6-1d7e-4007-b366-d7c5bb2494d5">
+        <h6 id="eceb379b-60d8-430e-97cc-03617905874a">
+         Example
         </h6>
-        <pre id="1fcaa977-8d38-4f79-851f-9636c9ec3e49"><code class="python">from bootwrap import Button
+        <pre id="1fc41394-79eb-4fe1-b6b9-9b2c47056562"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Primary").as_primary()
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="1c52f534-8771-4d9a-b062-eacace63cdf2">
-       <div class="d-flex justify-content-between" id="d650316b-1b14-46ea-8e8b-383267d037d4">
-        <h4 id="018fd7ac-f4e2-4548-982e-d76e47937dae">
+      <div class="mt-5" id="bc64b75e-04a0-49ed-b068-b8ca112b7971">
+       <div class="d-flex justify-content-between" id="bb230c38-7edd-41fc-808e-d6407194f6d5">
+        <h4 id="fc71bc6f-bb58-4183-9106-3320946a3c3b">
          Method
-         <span class="text-primary" id="e3ab40e6-e501-43d1-8289-97f31621ea5c">
+         <span class="text-primary" id="d82dfa92-c7fe-4e1f-babb-78362f19ab50">
           as_secondary
          </span>
         </h4>
-        <div id="f8a0a96d-ac8e-4bdf-9d26-3db55dc7e449">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#1c2ba540-4afd-42bf-826d-26ed89c06176" data-bs-toggle="collapse" id="240db79b-477b-4512-b3dd-366ba6e5ee32" onclick="return false;" type="button">
+        <div id="7f16589d-c9ff-418a-8ee8-91985cc50d0a">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#11983c9c-0dbe-4983-b680-fec31d07d3e5" data-bs-toggle="collapse" id="107c0ce7-179c-42eb-a3b0-05868617c1e7" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="662379ba-9a64-4bc0-9ee8-4fcc7b99105b">
+       <span class="text-muted" id="53168dcb-6ce9-40f8-b44f-29354d1e7e31">
         Makes the 'secondary' look to a web components.
        </span>
-       <pre id="b728dda7-b808-4f6b-91ef-2269f4ce0440"><code class="python">as_secondary()</code></pre>
-       <div class="ms-3 collapse" id="1c2ba540-4afd-42bf-826d-26ed89c06176">
-        <h6 id="48b5ccd0-6192-4a1a-bd6f-5150a4de70e1">
-         <strong>
-          Returns
-         </strong>
+       <pre id="981156f2-d8e6-4871-9a48-d64a140a2c50"><code class="python">as_secondary()</code></pre>
+       <div class="ms-3 collapse" id="11983c9c-0dbe-4983-b680-fec31d07d3e5">
+        <h6 id="935071a7-a87a-482a-9d69-969f6b7e49b6">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="9e156e79-4bed-4d00-b8bd-dbb9e77989a7">
+        <table class="table table-sm bg-light" id="4f69a8e5-e178-46d3-b158-e8e5c2bb5f74">
          <thead>
           <tr>
            <th scope="col">
@@ -2884,44 +2738,40 @@ button = ("Primary").as_primary()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="c6fd85ed-6555-4332-9030-9b1acfe19429">
-        <h6 id="14e53224-45a6-4c41-a07e-166b472eb2fa">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="b0141185-5d50-4735-8e98-dfa816366ab5">
+        <h6 id="f839903b-9c40-4841-869b-7921f591b6d0">
+         Example
         </h6>
-        <pre id="c890c432-fcf3-482e-85d5-556018af52c3"><code class="python">from bootwrap import Button
+        <pre id="c4cfb6f8-7aed-41a1-adf7-153ef8115b6c"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Secondary").as_secondary()
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="d8eff278-fa2c-4b6e-8603-15da990ec9db">
-       <div class="d-flex justify-content-between" id="6f6f35e0-5f6b-4c33-9bad-73d66b96f020">
-        <h4 id="70ea12e7-2aec-40ae-af8a-170351fe8072">
+      <div class="mt-5" id="4f8ee424-7e03-4f4e-a5c3-85f2a42c21c6">
+       <div class="d-flex justify-content-between" id="e661d615-6ab2-41a4-a9d1-0bff1436e9c9">
+        <h4 id="f930a09c-e404-4ec0-9156-f1ff85f5b18c">
          Method
-         <span class="text-primary" id="a96074ec-4b61-40f7-bf17-7a8bb40defe9">
+         <span class="text-primary" id="6832a1ee-a475-4e8a-a716-df371795af2c">
           as_success
          </span>
         </h4>
-        <div id="10443e6d-8762-4022-ace6-403120ae803b">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#f95c0afe-1538-4876-b66d-0b4324a3f0f1" data-bs-toggle="collapse" id="74b1ca0c-4ba7-4464-a07e-b2248e976613" onclick="return false;" type="button">
+        <div id="ac40a5d1-6743-4bba-b230-1d795a7957f8">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#d6782133-b575-4b5f-833f-e16396ba5388" data-bs-toggle="collapse" id="1431876b-c735-4f6d-866f-5a285b391423" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="1a3a3b16-d96d-4a66-aae7-7bbed3909a79">
+       <span class="text-muted" id="17c1925c-a7b2-4be6-bdd2-fc9cd441c442">
         Makes the 'success' look to a web components.
        </span>
-       <pre id="c7a52f7c-c785-41c3-8624-985620fb9fc7"><code class="python">as_success()</code></pre>
-       <div class="ms-3 collapse" id="f95c0afe-1538-4876-b66d-0b4324a3f0f1">
-        <h6 id="8e350199-7d0c-48d5-b241-0448597cbd6d">
-         <strong>
-          Returns
-         </strong>
+       <pre id="6dd17b26-4f85-4e70-babc-1d3c1e56f754"><code class="python">as_success()</code></pre>
+       <div class="ms-3 collapse" id="d6782133-b575-4b5f-833f-e16396ba5388">
+        <h6 id="ab537744-70ce-474b-a14f-f1e83d6fb8bb">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="95122153-9df7-452b-8a85-8c5282ef8b40">
+        <table class="table table-sm bg-light" id="a04e44d2-b74c-4aec-8735-625dc288d98d">
          <thead>
           <tr>
            <th scope="col">
@@ -2954,44 +2804,40 @@ button = ("Secondary").as_secondary()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="e54bf1aa-68bb-44c6-b2cc-e02977e54752">
-        <h6 id="209a30e2-995e-4b08-9079-9a8fa03d1cdd">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="3a2ece3e-8d13-4795-9168-51dc96f10bfe">
+        <h6 id="3e721579-4962-42ef-bb8e-9ca743c8ff12">
+         Example
         </h6>
-        <pre id="7adde25f-38d7-4451-9ece-66f0a821fe7a"><code class="python">from bootwrap import Button
+        <pre id="9b18531a-913f-4278-9484-a7bf4ab8884a"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Success").as_success()
 </code></pre>
        </div>
       </div>
-      <div class="mt-5" id="2673838b-5f78-49e3-8808-07f55463eb1d">
-       <div class="d-flex justify-content-between" id="e1910d46-6301-4019-858e-2bb7e35ca00d">
-        <h4 id="72b34c0a-0546-4c76-8f35-c2fc40d56fd3">
+      <div class="mt-5" id="f6c06944-be28-42c7-af72-52c09b6a5351">
+       <div class="d-flex justify-content-between" id="caa5d876-d571-4918-acce-d64bd0c9c742">
+        <h4 id="a1392fd5-a691-4839-b16a-c340fe3f6ee1">
          Method
-         <span class="text-primary" id="f30105bf-f806-4668-81d1-54463fcb89fb">
+         <span class="text-primary" id="7f971575-42b7-436a-90e9-9b07d3e0887f">
           as_warning
          </span>
         </h4>
-        <div id="ce6d48f5-7274-4ca3-b482-2d34f5f20661">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#ab33f569-7a87-40c3-baa8-f3787c1a6167" data-bs-toggle="collapse" id="6f8937b9-7797-490a-9946-6bef9c518683" onclick="return false;" type="button">
+        <div id="7014a96c-d1bc-41b1-bf81-a49a7e3ab8bd">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#cfdcd905-30ef-4018-835b-e0decded2176" data-bs-toggle="collapse" id="85e74333-3af3-40b5-b80b-24272cede4b7" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="78de6ddb-3c76-4500-a710-681cddb72b82">
+       <span class="text-muted" id="57754761-a826-482d-b12d-1ec6bfb8606f">
         Makes the 'warning' look to a web components.
        </span>
-       <pre id="53bc5b77-ecd5-42ce-ae48-5ab87ffa5c77"><code class="python">as_warning()</code></pre>
-       <div class="ms-3 collapse" id="ab33f569-7a87-40c3-baa8-f3787c1a6167">
-        <h6 id="2de1f160-bf6f-4dbb-a93e-45d59a65c287">
-         <strong>
-          Returns
-         </strong>
+       <pre id="62b64fce-e5a9-4898-8f3a-5dee4f7f43f6"><code class="python">as_warning()</code></pre>
+       <div class="ms-3 collapse" id="cfdcd905-30ef-4018-835b-e0decded2176">
+        <h6 id="d9d17942-dfb9-4c38-8978-06afe9db9fd3">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="b92b1c2a-1881-438b-a397-1cc79731425d">
+        <table class="table table-sm bg-light" id="33762d1e-e6ba-4c38-83c5-2292cc91c1ac">
          <thead>
           <tr>
            <th scope="col">
@@ -3024,13 +2870,11 @@ button = ("Success").as_success()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="248163a0-89e2-4c14-9791-048ef2962b98">
-        <h6 id="860d92dd-a360-45e0-b3f9-c7fef28519ce">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="06138eb3-36eb-4c09-aa00-769b9f256118">
+        <h6 id="a0a8c134-790e-487e-bc5f-a75fd7374c2f">
+         Example
         </h6>
-        <pre id="da61c679-e9ec-4f47-b6ba-4e5355b151f2"><code class="python">from bootwrap import Button
+        <pre id="95f10760-b05c-4ef5-9442-928fca42cf13"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Warning").as_warning()
@@ -3039,23 +2883,23 @@ button = ("Warning").as_warning()
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="d5adb124-ba0d-4a87-8f30-878ae41948de">
-     <div class="mt-5" id="5ca8e896-0545-4358-ae72-f85915c4cd47">
-      <div class="d-flex justify-content-between" id="8c05e94d-2db0-4b41-a056-269174d19885">
-       <h1 id="37553da5-e197-4334-8654-ebae765276bd">
+    <div class="tab-pane fade" id="9ce0c44e-3540-4c12-a10f-1e7e95633612">
+     <div class="mt-5" id="348d218b-b649-4429-bd52-0b7f6f94d353">
+      <div class="d-flex justify-content-between" id="b3016137-fbc1-4f31-bda2-35c0813093e0">
+       <h1 id="14ffa325-dc4b-42b0-bec6-82a16131d21b">
         Class
-        <span class="text-primary" id="c8e7230d-908b-4365-8147-47cc498779d0">
+        <span class="text-primary" id="d0c30caa-9c0b-451b-82af-9eeb231b3af7">
          OutlineMixin
         </span>
        </h1>
-       <div id="c7ebf555-dc7c-4440-b80e-7fb73bf4f7c5">
+       <div id="afe981a0-adb9-42a3-a619-f6e2c0b72c31">
        </div>
       </div>
-      <span class="text-muted" id="f219ee83-2f3e-45c7-a3aa-9bd74a6e74b7">
+      <span class="text-muted" id="e33b576a-1cff-4bcb-b7f8-40f25dd8c236">
        Mixin for a web component that can be surrounded by a border.
       </span>
-      <pre id="f9d217c7-880d-4ff0-8e4c-751d475b544a"><code class="python">OutlineMixin()</code></pre>
-      <p id="42683b18-2ea7-4358-b343-a271e15f7197">
+      <pre id="372c24c4-38e5-49ea-bc43-a0ef4ac93f0b"><code class="python">OutlineMixin()</code></pre>
+      <p id="0cb38b91-027d-4603-9291-8504d681d39c">
        Usually
        <code>
         OutlineMixin
@@ -3067,31 +2911,29 @@ button = ("Warning").as_warning()
        to
     specify the border appearance.
       </p>
-      <div class="mt-5" id="c34d9868-e62d-4d9a-b49d-f8d8d9eda1c3">
-       <div class="d-flex justify-content-between" id="0686e09b-dc17-4ac6-9321-b46911cfd6e6">
-        <h4 id="c7dd07b4-4780-4099-9318-b17199ad7a6c">
+      <div class="mt-5" id="b7d8d121-d6d1-43fd-bad1-c0a655893c3f">
+       <div class="d-flex justify-content-between" id="7cc42d7e-f6c7-4e44-896a-3640afa3f242">
+        <h4 id="30d745ab-acaf-47d2-b74d-348a97b84639">
          Method
-         <span class="text-primary" id="cc1778a7-bab9-4809-8bf2-bb38afe4f354">
+         <span class="text-primary" id="a467b72b-2e6c-4b67-af53-a5efad329dee">
           as_outline
          </span>
         </h4>
-        <div id="fa353f6b-6a19-47fe-be6f-4ab0be4b7234">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#0c25b7e7-4318-4273-adad-218fc30c5b58" data-bs-toggle="collapse" id="9224c8b5-287c-4904-abad-1b9431e69168" onclick="return false;" type="button">
+        <div id="d6ebbc77-cfa8-4b66-a3a5-2c3582b54ed4">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#454acc13-53b2-42bd-adcf-dc5f1394aee2" data-bs-toggle="collapse" id="29d5e7e4-9e3b-4478-b65e-a2b5d897c483" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="9dd5437d-798b-4fc7-a3fd-1ee33f69231d">
+       <span class="text-muted" id="4334b1f1-3187-4d83-81e4-a221f9da8c32">
         Makes the web component surrounded by a border.
        </span>
-       <pre id="6ae6f3d8-1b11-4d34-900e-158a4915536b"><code class="python">as_outline()</code></pre>
-       <div class="ms-3 collapse" id="0c25b7e7-4318-4273-adad-218fc30c5b58">
-        <h6 id="dcdb72b2-3213-4588-9e8c-771c63771cc7">
-         <strong>
-          Returns
-         </strong>
+       <pre id="4f417d2c-c4e0-4a5f-80a5-683db5207ef5"><code class="python">as_outline()</code></pre>
+       <div class="ms-3 collapse" id="454acc13-53b2-42bd-adcf-dc5f1394aee2">
+        <h6 id="97730f6c-0c30-495f-ae6e-5dbc2ba54f90">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="c69a604c-4d89-4b5f-9211-a326ceb4e746">
+        <table class="table table-sm bg-light" id="9ca1f8df-4359-4516-9224-925d337f6a56">
          <thead>
           <tr>
            <th scope="col">
@@ -3124,13 +2966,11 @@ button = ("Warning").as_warning()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="77792654-be05-4e5a-b10e-77c360a92916">
-        <h6 id="0b4972f1-d662-463e-b964-4c582678354f">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="55d879fd-998d-4e98-9f53-1bb9c753cf5d">
+        <h6 id="b533cfc4-ae89-4388-acf8-374df0943c1b">
+         Example
         </h6>
-        <pre id="5effdf97-0107-432e-bb6b-ea552d3dfe1a"><code class="python">from bootwrap import Button
+        <pre id="3d208d7a-1db2-41a2-b950-511e1ee4a793"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Primary").as_primary().as_outline()
@@ -3139,51 +2979,49 @@ button = ("Primary").as_primary().as_outline()
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="7d094c5d-efd1-490c-a881-2ed743811df8">
-     <div class="mt-5" id="7e89b36e-df45-4e43-9bad-d58fb746f704">
-      <div class="d-flex justify-content-between" id="f5cf678c-4e53-440b-bab1-ce21d5cfe006">
-       <h1 id="41f8a521-4cd6-4590-81dd-d0c2f0d80d4f">
+    <div class="tab-pane fade" id="4d612acb-c719-4e1e-b825-cb38f7378916">
+     <div class="mt-5" id="8f3bc356-78bd-4b0f-971f-5d627c738d7d">
+      <div class="d-flex justify-content-between" id="9cc89684-6db1-4fd7-9cfc-c38c4c4b5e9f">
+       <h1 id="f4b834bb-9302-48a2-b387-6a04563080a7">
         Class
-        <span class="text-primary" id="ead352f7-4670-48cb-8f9f-7e08e8077005">
+        <span class="text-primary" id="c8ecebb3-0f22-4b5d-a514-732c21845c95">
          AvailabilityMixin
         </span>
        </h1>
-       <div id="56a58ceb-f426-4aa0-aa49-c816efe9832b">
+       <div id="42a9daf2-ba3c-4dc8-bf7f-ccaaf05d6e1a">
        </div>
       </div>
-      <span class="text-muted" id="bbc97115-3efb-48e4-ab03-9b5a1bef25a2">
+      <span class="text-muted" id="b19ef08e-a23d-4956-ac0c-0e96fd82c467">
        Mixin for a web component which can be enabled or disabled.
       </span>
-      <pre id="a753c00a-d29c-466a-a910-f3ed20e92aed"><code class="python">AvailabilityMixin()</code></pre>
-      <p id="92fa75c7-be4c-407a-816f-f3cceb8424f6">
+      <pre id="70eb5887-b19b-4576-af84-cdc568c32b26"><code class="python">AvailabilityMixin()</code></pre>
+      <p id="774763b3-72e5-4fb5-8ccf-faa1ef52e02e">
        By default, every web component is enabled. The web components inheriting
     this class can be forced to be disabled.
       </p>
-      <div class="mt-5" id="7e62825c-4e56-4e74-ad08-4861436fb994">
-       <div class="d-flex justify-content-between" id="c07da477-21df-43cd-a436-ea8baf7060ad">
-        <h4 id="a026f48a-d3b6-4e47-bdfe-fddd2dd87584">
+      <div class="mt-5" id="2a046925-c6b3-4ee6-a78b-038ba0bda415">
+       <div class="d-flex justify-content-between" id="afb06d12-6b8e-4337-b6fe-5c253aacb791">
+        <h4 id="359e05cf-ae1d-464c-b1b7-c7bd9bdce903">
          Method
-         <span class="text-primary" id="65eab0c6-4da6-4376-86bb-dc36a26e688a">
+         <span class="text-primary" id="55989d25-e5eb-4196-84db-4915b22f57d6">
           as_disabled
          </span>
         </h4>
-        <div id="0bfef521-c803-4778-9a29-89daf023827c">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#5a6bebda-9462-4c1e-bf79-27f9130e4ae1" data-bs-toggle="collapse" id="b19a726c-0f19-4456-a780-ee8528a3c54e" onclick="return false;" type="button">
+        <div id="386c640c-5813-421e-8893-096e7f980132">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#d5c3133c-6a43-4e28-8ea5-7c422f20b08d" data-bs-toggle="collapse" id="62a48827-1b52-4b86-9fd7-8306d95e3ec4" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="59237698-35ec-4e5a-abe2-60dbd7009807">
+       <span class="text-muted" id="397a3e38-5be1-4c69-9b0a-bdffea37b38d">
         Disables a web component.
        </span>
-       <pre id="c0bff1d4-7e2a-45b7-b0f6-295e2ad6cfb7"><code class="python">as_disabled()</code></pre>
-       <div class="ms-3 collapse" id="5a6bebda-9462-4c1e-bf79-27f9130e4ae1">
-        <h6 id="144d5dab-36ab-42fc-931a-b85447f68e23">
-         <strong>
-          Returns
-         </strong>
+       <pre id="a9874e2c-d0a2-4b2b-a0c9-db0283953591"><code class="python">as_disabled()</code></pre>
+       <div class="ms-3 collapse" id="d5c3133c-6a43-4e28-8ea5-7c422f20b08d">
+        <h6 id="ee571deb-f2ac-46cb-8508-2c9a011dc188">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="5676b5fa-3e35-4418-a3b0-368019a6a891">
+        <table class="table table-sm bg-light" id="2a2380d5-bdd9-482b-9ac5-b07b44ec2627">
          <thead>
           <tr>
            <th scope="col">
@@ -3216,13 +3054,11 @@ button = ("Primary").as_primary().as_outline()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="9f291b1c-1913-4f04-9b8f-865ac2a7f1e9">
-        <h6 id="37413b7c-3b1b-4548-b6c2-0c6eca7b07f4">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="2abaa9ac-451e-4fb8-b8ac-42da8c90032b">
+        <h6 id="1fdc8df8-5ec8-46b7-9b18-e17db3fde5a2">
+         Example
         </h6>
-        <pre id="59eccd17-4bce-41ec-8539-fb4548022ab4"><code class="python">from bootwrap import Button
+        <pre id="0737eea4-5256-4ead-bb91-5532bce4643f"><code class="python">from bootwrap import Button
 
 # Note, that Button inherits AppearanceMixin.
 button = ("Primary").as_disabled()
@@ -3231,56 +3067,56 @@ button = ("Primary").as_disabled()
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="dc0c6da3-d05d-456b-b1a5-fd4d60d9c1e9">
-     <div id="3e2521d3-af03-4ce1-8750-98fb814f6935">
+    <div class="tab-pane fade" id="5b238ddf-f83e-43a9-8aeb-a7db32168c20">
+     <div id="a7015ac5-90b2-4f56-bc6a-75afb62c3919">
       <hr/>
-      <ul class="nav" id="b822982f-082b-4b59-a731-befa14341553" role="tablist">
+      <ul class="nav" id="f363f148-2f08-4112-b850-140365065d91" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#81a1c690-093a-4714-81fa-fe29e0023187" data-bs-toggle="tab" href="#81a1c690-093a-4714-81fa-fe29e0023187" id="f12c1e9f-982c-4d08-871a-1d0ac39bc19a" role="tab">
-         <span class="text-secondary" id="08923c0a-1550-4eb0-8670-f30bf7c55087">
+        <a class="nav-link active" data-bs-target="#473deded-29dd-402e-adc3-6ce79cf6621c" data-bs-toggle="tab" href="#473deded-29dd-402e-adc3-6ce79cf6621c" id="a6441783-561f-47aa-b3d5-e65a1b78357c" role="tab">
+         <span class="text-secondary" id="ea580b9f-77f1-4d91-b304-91fb82b99596">
           Breakpoint
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#10fb3ea5-d606-49c1-b0d0-b6e4690db47b" data-bs-toggle="tab" href="#10fb3ea5-d606-49c1-b0d0-b6e4690db47b" id="1f3dcd74-890a-4393-a158-240a9fbf45e7" role="tab">
-         <span class="text-secondary" id="fa0f80be-0734-45d3-bebd-b5808b33c221">
+        <a class="nav-link" data-bs-target="#64f1555e-c316-44be-b1db-73cbe3616345" data-bs-toggle="tab" href="#64f1555e-c316-44be-b1db-73cbe3616345" id="d33c2744-5859-4348-ac4a-f5bc245c0aff" role="tab">
+         <span class="text-secondary" id="b7a157bd-5cc1-4a6d-943d-ed1ef29ad9cb">
           Action
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="81a1c690-093a-4714-81fa-fe29e0023187">
-        <div class="mt-5" id="1f90835b-ad74-4f3b-81da-7501ead7973d">
-         <div class="d-flex justify-content-between" id="e98905d7-a04c-4ca0-b0d9-c55b3fd819a4">
-          <h1 id="5b7abf31-43e4-4c8e-8b95-b80c9c84faf3">
+       <div class="tab-pane fade active show" id="473deded-29dd-402e-adc3-6ce79cf6621c">
+        <div class="mt-5" id="9c4f1d0e-4f43-4053-9c7b-a57db0601efb">
+         <div class="d-flex justify-content-between" id="491b9db6-c982-4852-958c-8efc15f2e95a">
+          <h1 id="2fb48ef2-9046-4969-81db-569bb94401e3">
            Class
-           <span class="text-primary" id="f6722c84-fc92-425e-b3a5-468ea9181d37">
+           <span class="text-primary" id="6da570c9-7e1b-4f81-b425-9a636a543fc1">
             Breakpoint
            </span>
           </h1>
-          <div id="0b321f9b-2305-4632-b5cc-beefe898eb41">
+          <div id="569cb849-cc15-4735-9d6e-7e7c1a04e25f">
           </div>
          </div>
-         <span class="text-muted" id="1067209a-39f3-4c75-93a0-ed6254afc9fd">
+         <span class="text-muted" id="72dd639d-058c-49ce-8a35-b85de8332cc5">
           The breakpoint constants.
          </span>
-         <p id="094e6e41-d8bc-4150-bf8e-4b93fcfeee19">
+         <p id="711cb9cb-05b0-4465-a3bc-f604a9ce32f3">
           Breakpoints are defined by Bootstrap and mostly based on minimum
     viewport widths and allow us to scale up elements as the viewport
     changes.
          </p>
-         <p id="4a5ab832-b3b9-4bef-93ab-18eae7c93a36">
+         <p id="f740776c-19cf-4272-9331-a2151dcfbc8e">
           See
           <a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints">
            for more information.
           </a>
          </p>
-         <div id="b39e2de4-ee7c-4122-b11a-7b7919cc4a12">
+         <div id="595475d4-2b6c-42f4-8ccc-a0bff297b9e8">
           <div class="row">
            <div class="col-md">
-            <div class="p-1 m-1 border text-center" id="fdc840b8-52ab-4744-b205-283f65f786cb">
+            <div class="p-1 m-1 border text-center" id="df86940b-bb98-4a8d-8a9f-bc554b0e8008">
              Breakpoint.
              <strong class="text-primary">
               LG
@@ -3288,7 +3124,7 @@ button = ("Primary").as_disabled()
             </div>
            </div>
            <div class="col-md">
-            <div class="p-1 m-1 border text-center" id="e969120c-ba56-4838-8ce6-5af674f51835">
+            <div class="p-1 m-1 border text-center" id="647e7049-d2b2-4599-804f-4742a8ed9212">
              Breakpoint.
              <strong class="text-primary">
               MD
@@ -3296,7 +3132,7 @@ button = ("Primary").as_disabled()
             </div>
            </div>
            <div class="col-md">
-            <div class="p-1 m-1 border text-center" id="0478fefa-1f72-47be-bccc-6d712c75f03d">
+            <div class="p-1 m-1 border text-center" id="0b7bcc76-2c29-4545-8e69-c5733d1d24ba">
              Breakpoint.
              <strong class="text-primary">
               SM
@@ -3304,7 +3140,7 @@ button = ("Primary").as_disabled()
             </div>
            </div>
            <div class="col-md">
-            <div class="p-1 m-1 border text-center" id="06291aea-70af-4393-a388-92ae4d14d795">
+            <div class="p-1 m-1 border text-center" id="1cbcef57-9e1d-4923-8efa-3c0170f06b46">
              Breakpoint.
              <strong class="text-primary">
               XL
@@ -3312,7 +3148,7 @@ button = ("Primary").as_disabled()
             </div>
            </div>
            <div class="col-md">
-            <div class="p-1 m-1 border text-center" id="ec7c3323-5928-4032-a284-546860c9d1a5">
+            <div class="p-1 m-1 border text-center" id="8385bf29-dee6-44e6-8d4e-dcaaa0551937">
              Breakpoint.
              <strong class="text-primary">
               XS
@@ -3323,25 +3159,25 @@ button = ("Primary").as_disabled()
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="10fb3ea5-d606-49c1-b0d0-b6e4690db47b">
-        <div class="mt-5" id="1305a1ea-73f2-42e1-9068-18f9156a0671">
-         <div class="d-flex justify-content-between" id="83d26f9d-1e71-4f19-ba0d-18441404e721">
-          <h1 id="2f17d9b8-08b3-4848-bc9f-d7abc1e77302">
+       <div class="tab-pane fade" id="64f1555e-c316-44be-b1db-73cbe3616345">
+        <div class="mt-5" id="2642a617-8bb0-4be9-a2a9-d901ab67593c">
+         <div class="d-flex justify-content-between" id="99e50299-1210-4524-90c8-d644944dff9e">
+          <h1 id="5f56d5c3-6448-49b6-b698-c3c869e60ec0">
            Class
-           <span class="text-primary" id="12defb93-ab59-4506-af51-ca8ec7380ca9">
+           <span class="text-primary" id="c0c4880c-7d00-4ba0-b05f-b78e763c687f">
             Action
            </span>
           </h1>
-          <div id="4bd6f3c3-0bc1-44f8-a8d7-2d6ae9db0395">
+          <div id="e2734ac5-3c5c-4e97-8dc3-f3248fca9c7e">
           </div>
          </div>
-         <span class="text-muted" id="7429ff09-f8ea-45fd-a4d7-8fd1d5126e44">
+         <span class="text-muted" id="d6095b48-5f25-4403-be54-abf48af5964b">
           The action constants.
          </span>
-         <div id="40fa9584-532c-46b7-89d4-3ae05dcc0a30">
+         <div id="72b36636-74f6-4ab4-bcd6-cabb3f43ab83">
           <div class="row">
            <div class="col-md">
-            <div class="p-1 m-1 border text-center" id="74fafb66-89f4-4053-9369-1c36f038e016">
+            <div class="p-1 m-1 border text-center" id="8e321a64-120e-476d-9acb-b672d61c75eb">
              Action.
              <strong class="text-primary">
               DISMISS
@@ -3349,7 +3185,7 @@ button = ("Primary").as_disabled()
             </div>
            </div>
            <div class="col-md">
-            <div class="p-1 m-1 border text-center" id="6c0aced3-9e94-4e13-935a-97888bc2489a">
+            <div class="p-1 m-1 border text-center" id="639c2379-0bf5-4996-8c7c-fd16308f9237">
              Action.
              <strong class="text-primary">
               LINK
@@ -3357,7 +3193,7 @@ button = ("Primary").as_disabled()
             </div>
            </div>
            <div class="col-md">
-            <div class="p-1 m-1 border text-center" id="cf1e438c-fd2e-4b83-ac3b-a4e1696b32ee">
+            <div class="p-1 m-1 border text-center" id="04d15942-372b-4249-951c-11ad1ebfde00">
              Action.
              <strong class="text-primary">
               SUBMIT
@@ -3365,7 +3201,7 @@ button = ("Primary").as_disabled()
             </div>
            </div>
            <div class="col-md">
-            <div class="p-1 m-1 border text-center" id="cc394db2-dd50-4c8f-a693-24e3dcc5809b">
+            <div class="p-1 m-1 border text-center" id="9ec44b70-44fa-4396-bf31-f99c10766672">
              Action.
              <strong class="text-primary">
               TOGGLE
diff --git a/docs/components.html b/docs/components.html
index c8e5c02..db9e36b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -21,12 +21,10 @@
  </head>
  <body>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-   <img alt="Bootwrap Logo" id="5e1e4025-e604-4479-8fb9-892e8fbcab88" src="logo.png" width="32"/>
-   <span class="text-light" id="98379d22-0fd1-4d56-b3b9-0a80d4db08d7">
-    <strong>
-     Bootwrap
-    </strong>
-   </span>
+   <img alt="Bootwrap Logo" id="cc708297-2e20-4b91-b286-1510dce49730" src="logo.png" width="32"/>
+   <strong class="text-light" id="14bb006a-fd4e-4c79-926c-be6e51577b58">
+    Bootwrap
+   </strong>
    <button aria-controls="menu" aria-expanded="false" aria-label="Toggle menu" class="navbar-toggler" data-bs-target="#menu" data-bs-toggle="collapse" type="button">
     <span class="navbar-toggler-icon">
     </span>
@@ -34,194 +32,192 @@
    <div class="collapse navbar-collapse" id="menu">
     <ul class="navbar-nav me-auto">
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="index.html" id="9d2b7d8e-a3fd-415d-a994-133f11ecefd2">
+      <a class="ms-2 nav-link" href="index.html" id="3b939ce8-9ddd-47e7-8258-3d891df4e1df">
        Home
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="layout.html" id="06e29be1-f0c1-4045-8a44-2812e7fc81cc">
+      <a class="ms-2 nav-link" href="layout.html" id="3a6649db-82e4-4147-8c0f-f1fa27ec55be">
        Layout
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="base.html" id="8bdc53c1-e7c1-4d61-8b97-6b0956f64012">
+      <a class="ms-2 nav-link" href="base.html" id="10fef156-ece5-4541-b8ee-abba508cb0e2">
        Base
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="components.html" id="8aabb675-6aa4-4ad0-8d9b-e124959da30e">
+      <a class="ms-2 nav-link" href="components.html" id="6d0c2fcc-05ff-42c9-b9ee-78e3bd99c7fd">
        Components
       </a>
      </li>
     </ul>
-    <a class="ms-2 btn btn-outline-light" href="https://github.com/mmgalushka/bootwrap" id="2802897a-98e2-4c94-b48e-8a7121c1f892" role="button">
+    <a class="ms-2 btn btn-outline-light" href="https://github.com/mmgalushka/bootwrap" id="6f738ac1-8bb1-4d34-8986-5863d9682dc0" role="button">
      GitHub
     </a>
    </div>
   </nav>
   <div class="container-fluid">
-   <ul class="nav nav-pills" id="fe655691-91a1-4c50-a618-e61f58cf49a5" role="tablist">
+   <ul class="nav nav-pills" id="a011dbef-c093-4a09-9414-a0e4fd8b7f7d" role="tablist">
     <li class="nav-item">
-     <a class="nav-link active" data-bs-target="#0371f044-e75a-41a1-9343-c540ec981775" data-bs-toggle="tab" href="#0371f044-e75a-41a1-9343-c540ec981775" id="8eb17e2b-913a-49eb-90c8-1cee31566dbe" role="tab">
+     <a class="nav-link active" data-bs-target="#27f74941-8975-400e-b7c8-69da431121b6" data-bs-toggle="tab" href="#27f74941-8975-400e-b7c8-69da431121b6" id="a0aff907-c874-450d-b2f0-2a51e6624818" role="tab">
       Anchor
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#39b1fa39-4055-4fcd-aae9-49039adb697f" data-bs-toggle="tab" href="#39b1fa39-4055-4fcd-aae9-49039adb697f" id="bf8693d4-fa3f-473d-8a71-ca9b4f06bb6a" role="tab">
+     <a class="nav-link" data-bs-target="#65bad313-d01f-4f63-94d9-31de4607dd7d" data-bs-toggle="tab" href="#65bad313-d01f-4f63-94d9-31de4607dd7d" id="63b25250-ff65-453f-be91-b0b8c39cd8ab" role="tab">
       Badge
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#b51cebc0-9799-4539-a4b8-d278c6238ab9" data-bs-toggle="tab" href="#b51cebc0-9799-4539-a4b8-d278c6238ab9" id="f270f263-00e7-40c0-b223-00dec43c3f29" role="tab">
+     <a class="nav-link" data-bs-target="#dcd14819-9d68-4c5e-8a0c-1e1a1cd7620f" data-bs-toggle="tab" href="#dcd14819-9d68-4c5e-8a0c-1e1a1cd7620f" id="974d8870-f214-4b22-b437-2328aa281773" role="tab">
       Button
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#8e157bd6-d103-4329-9535-47662da84332" data-bs-toggle="tab" href="#8e157bd6-d103-4329-9535-47662da84332" id="3512ee19-705e-45fd-b272-bb33e61b8163" role="tab">
+     <a class="nav-link" data-bs-target="#4938bfa2-8f07-4229-aa6c-0d9152355245" data-bs-toggle="tab" href="#4938bfa2-8f07-4229-aa6c-0d9152355245" id="2cd6f2c1-ebfe-491f-bba9-8ca5e16e259c" role="tab">
       ButtonGroup
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#f6e84fc0-6c41-4e5f-b9a4-97538408ae7f" data-bs-toggle="tab" href="#f6e84fc0-6c41-4e5f-b9a4-97538408ae7f" id="9524301a-39a5-4f88-8498-362e4445561a" role="tab">
+     <a class="nav-link" data-bs-target="#8d85f898-cbcc-42b6-a7cc-b068ba70673f" data-bs-toggle="tab" href="#8d85f898-cbcc-42b6-a7cc-b068ba70673f" id="2acde060-1d94-49ce-9f17-de5a0bcc1360" role="tab">
       Deck
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#87743293-9169-46e5-8042-9ff18cb6b930" data-bs-toggle="tab" href="#87743293-9169-46e5-8042-9ff18cb6b930" id="8b8958e1-dee2-476c-a24b-45fb672a7bcc" role="tab">
+     <a class="nav-link" data-bs-target="#f7989b01-74e3-44dc-9940-e61551120f41" data-bs-toggle="tab" href="#f7989b01-74e3-44dc-9940-e61551120f41" id="11a28d27-7414-431b-b979-79a9a4f75502" role="tab">
       Dialog
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#b9bf6367-0d86-4009-986a-c38db014776c" data-bs-toggle="tab" href="#b9bf6367-0d86-4009-986a-c38db014776c" id="c93d652f-be45-4e88-8552-05b7aff348ec" role="tab">
+     <a class="nav-link" data-bs-target="#beca1969-af72-4461-b882-565aef1afe2a" data-bs-toggle="tab" href="#beca1969-af72-4461-b882-565aef1afe2a" id="3e269d74-062d-42e6-a40c-68253fb789bc" role="tab">
       Form
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#136f2f06-df0c-4f0d-a2fb-1870e8432585" data-bs-toggle="tab" href="#136f2f06-df0c-4f0d-a2fb-1870e8432585" id="544a7796-8cd6-4827-b49f-6ec93ae099f3" role="tab">
+     <a class="nav-link" data-bs-target="#c3a30185-a08c-4434-a0c6-4f3c8d4d3189" data-bs-toggle="tab" href="#c3a30185-a08c-4434-a0c6-4f3c8d4d3189" id="fe48d180-1c4d-4832-ba03-9d80bbe09d3b" role="tab">
       Icon
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#6ff1b5b1-54e0-451e-b285-485f21e18c32" data-bs-toggle="tab" href="#6ff1b5b1-54e0-451e-b285-485f21e18c32" id="35d594ca-e1c7-40c5-ae3d-af173de2880c" role="tab">
+     <a class="nav-link" data-bs-target="#d5143d00-3578-4a6b-9d5d-fe0f1d29e729" data-bs-toggle="tab" href="#d5143d00-3578-4a6b-9d5d-fe0f1d29e729" id="96143e09-d07a-4ba8-b2d7-e3a2f152723d" role="tab">
       Image
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#817f368e-8a6d-45b1-86c2-c41073535413" data-bs-toggle="tab" href="#817f368e-8a6d-45b1-86c2-c41073535413" id="a28e18e5-381c-4f5a-b5d7-cb8df07565ab" role="tab">
+     <a class="nav-link" data-bs-target="#aa1277d2-c29c-44d7-95e2-87d954fe9c34" data-bs-toggle="tab" href="#aa1277d2-c29c-44d7-95e2-87d954fe9c34" id="3fc008b6-e138-4756-8040-373a5ea880c2" role="tab">
       Javascript
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#9c25c336-e248-4a2c-bfda-0c3ded5cda58" data-bs-toggle="tab" href="#9c25c336-e248-4a2c-bfda-0c3ded5cda58" id="4a5be667-c93a-40cb-8a90-4c17834b135b" role="tab">
+     <a class="nav-link" data-bs-target="#1d691913-3266-467d-a9b0-b15f8d136d30" data-bs-toggle="tab" href="#1d691913-3266-467d-a9b0-b15f8d136d30" id="a41e5362-7ca8-493f-9a0b-95be8b4eb6d2" role="tab">
       Link
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#5d7272c7-3441-4e9f-a8f5-9e032211a044" data-bs-toggle="tab" href="#5d7272c7-3441-4e9f-a8f5-9e032211a044" id="3b8e8a2c-4acd-4727-9112-b8fca5a7cd02" role="tab">
+     <a class="nav-link" data-bs-target="#02f80da1-b39f-4eac-a31a-77d4144b419a" data-bs-toggle="tab" href="#02f80da1-b39f-4eac-a31a-77d4144b419a" id="a033020a-99f8-485c-9b60-26d4cb684842" role="tab">
       List
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#2f69ce0b-12f1-41ee-ab34-3e6e791bde46" data-bs-toggle="tab" href="#2f69ce0b-12f1-41ee-ab34-3e6e791bde46" id="ef0aaca3-fe82-4f23-84f1-3b0d9058e4cb" role="tab">
+     <a class="nav-link" data-bs-target="#34c7abee-054b-4069-acf4-62a5373c1af7" data-bs-toggle="tab" href="#34c7abee-054b-4069-acf4-62a5373c1af7" id="d77f6bca-dab5-430c-ba2d-28065659d3d9" role="tab">
       Navigation
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#1cb75d71-2477-403e-bdaa-740de3116f1d" data-bs-toggle="tab" href="#1cb75d71-2477-403e-bdaa-740de3116f1d" id="4bab117a-0509-470e-a830-5c1c91478395" role="tab">
+     <a class="nav-link" data-bs-target="#1aefe3d8-aa39-4654-ab35-72a3aa7cccb8" data-bs-toggle="tab" href="#1aefe3d8-aa39-4654-ab35-72a3aa7cccb8" id="a5b7afd4-31ce-467a-852b-344f0146e7d8" role="tab">
       Panel
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#65cac881-efc1-4709-90c3-a2769a47c69a" data-bs-toggle="tab" href="#65cac881-efc1-4709-90c3-a2769a47c69a" id="f9d56081-c7b0-49f6-b802-0564bbbb8dcc" role="tab">
+     <a class="nav-link" data-bs-target="#79186759-c895-4504-a58e-f8dc4ba3f2b7" data-bs-toggle="tab" href="#79186759-c895-4504-a58e-f8dc4ba3f2b7" id="21f4c071-859e-4959-a7c6-7c3c07fae477" role="tab">
       Separator
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#5b0c1454-fc12-42e1-bfc1-4ba204dcfd2c" data-bs-toggle="tab" href="#5b0c1454-fc12-42e1-bfc1-4ba204dcfd2c" id="cfed1cf2-26b9-4bc0-ab16-1d90a7c547e9" role="tab">
+     <a class="nav-link" data-bs-target="#98b35cce-7512-41bd-8e8a-1ffbb124a863" data-bs-toggle="tab" href="#98b35cce-7512-41bd-8e8a-1ffbb124a863" id="f60eae25-b4f2-4509-939c-d861a7dfb631" role="tab">
       Table
      </a>
     </li>
     <li class="nav-item">
-     <a class="nav-link" data-bs-target="#3a24f4de-aeb2-4516-b84c-ca02e3b3928b" data-bs-toggle="tab" href="#3a24f4de-aeb2-4516-b84c-ca02e3b3928b" id="52a8d85f-bd00-442a-813a-356fd9db0816" role="tab">
+     <a class="nav-link" data-bs-target="#e7c64769-e8b1-42ef-ac82-f14c3bd3be46" data-bs-toggle="tab" href="#e7c64769-e8b1-42ef-ac82-f14c3bd3be46" id="06a1b083-fbb2-417b-b791-0597d5ae4544" role="tab">
       Text
      </a>
     </li>
    </ul>
    <div class="tab-content">
-    <div class="tab-pane fade active show" id="0371f044-e75a-41a1-9343-c540ec981775">
-     <div id="c712b693-21c4-4bff-b8de-7e7cba11ed04">
+    <div class="tab-pane fade active show" id="27f74941-8975-400e-b7c8-69da431121b6">
+     <div id="9c838d79-1671-496d-a8ba-37cb7accaa57">
       <hr/>
-      <ul class="nav" id="24085d24-1efb-43a0-94b0-653fe9fb27d4" role="tablist">
+      <ul class="nav" id="fcc31585-3664-459b-8250-64b76b415707" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#c6254bdc-cb61-4eb7-a0a6-525f5582b197" data-bs-toggle="tab" href="#c6254bdc-cb61-4eb7-a0a6-525f5582b197" id="3f2f3e9d-0859-4a8d-a2ec-a3f107f3e3f4" role="tab">
-         <span class="text-secondary" id="5d0893f3-6b72-4fa8-8191-119ae7179049">
+        <a class="nav-link active" data-bs-target="#7f310559-2636-41e6-a772-20a85aafee2a" data-bs-toggle="tab" href="#7f310559-2636-41e6-a772-20a85aafee2a" id="8b513952-3aed-4c8b-a184-e9b4387380e8" role="tab">
+         <span class="text-secondary" id="ad337c2f-4347-48be-8a0b-c8bbef75006a">
           Anchor
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#09b5f1d1-de5a-473a-8f6a-24ce76dd22b2" data-bs-toggle="tab" href="#09b5f1d1-de5a-473a-8f6a-24ce76dd22b2" id="84bc79cb-ed59-456c-8210-2bc1cde4a5c0" role="tab">
-         <span class="text-secondary" id="2fa8db1b-a99a-48e7-bb2d-8140114c82ce">
+        <a class="nav-link" data-bs-target="#269ced98-fb06-4b2f-86f9-98db40c28f87" data-bs-toggle="tab" href="#269ced98-fb06-4b2f-86f9-98db40c28f87" id="629d168f-a34f-4f28-8ff1-5a7daaf05462" role="tab">
+         <span class="text-secondary" id="067e81d6-8427-4a24-ac69-193fe638f68e">
           Appearance
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#b03b0789-20a1-4ced-a641-eb6acbb386d6" data-bs-toggle="tab" href="#b03b0789-20a1-4ced-a641-eb6acbb386d6" id="a078b972-cfad-4063-b5fc-12016a06207b" role="tab">
-         <span class="text-secondary" id="4f1b4547-9be9-4b08-a1bc-d6906dea979e">
+        <a class="nav-link" data-bs-target="#7cb9faf7-e097-4a13-a521-bc707b559a13" data-bs-toggle="tab" href="#7cb9faf7-e097-4a13-a521-bc707b559a13" id="e680a62c-84e7-4a78-ac65-a9089b2b8a2f" role="tab">
+         <span class="text-secondary" id="2832889f-1fd4-4146-a319-b7b7b7c303d3">
           Link Resource
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#f7c40a04-508d-486c-a7a5-cc8737f6c6e8" data-bs-toggle="tab" href="#f7c40a04-508d-486c-a7a5-cc8737f6c6e8" id="78a96774-8afa-448b-bac3-3408106da630" role="tab">
-         <span class="text-secondary" id="c2fd181e-6704-432e-acb4-98d0caeff966">
+        <a class="nav-link" data-bs-target="#516342a0-6afb-4ea9-b490-955d9ea69acd" data-bs-toggle="tab" href="#516342a0-6afb-4ea9-b490-955d9ea69acd" id="2f616d7e-4f9a-48c9-80e3-c22ee253c6a9" role="tab">
+         <span class="text-secondary" id="70ed5ff8-5a2c-4b52-beb7-a66cd756214d">
           Open Dialog
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#930ac37e-e4fa-4c33-b1b7-48f81c16eb2f" data-bs-toggle="tab" href="#930ac37e-e4fa-4c33-b1b7-48f81c16eb2f" id="d10490d9-6819-45d1-8e73-ae9872a80f53" role="tab">
-         <span class="text-secondary" id="3a9ad6c0-89c7-4cbf-ae99-6b88fe35beda">
+        <a class="nav-link" data-bs-target="#e4fcdef7-675f-4129-b0f2-10f95ccd4120" data-bs-toggle="tab" href="#e4fcdef7-675f-4129-b0f2-10f95ccd4120" id="1ef1fde2-f1ad-4dbd-b4b7-aae63d1c0b3e" role="tab">
+         <span class="text-secondary" id="61c85cd8-d7aa-46cb-bc61-43b757926201">
           Close Dialog
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#7c554330-ecc2-4d08-a3bc-54376184352d" data-bs-toggle="tab" href="#7c554330-ecc2-4d08-a3bc-54376184352d" id="bd596b99-8d7f-46f2-8fea-6bf278d6a0c7" role="tab">
-         <span class="text-secondary" id="d1067da0-9948-4752-9fb6-2062c7bfd77a">
+        <a class="nav-link" data-bs-target="#596a9eb5-0d4b-4748-9b94-61490e19afa8" data-bs-toggle="tab" href="#596a9eb5-0d4b-4748-9b94-61490e19afa8" id="35512c84-c1d0-4d6d-9db7-0a4f560e0bd9" role="tab">
+         <span class="text-secondary" id="fb43be94-2360-4f57-92e9-ce5494d1aa9c">
           Expand/Collapse Panel
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="c6254bdc-cb61-4eb7-a0a6-525f5582b197">
-        <div class="mt-5" id="3145eee4-3917-4c4b-a61a-45cec4aaecb4">
-         <div class="d-flex justify-content-between" id="6903e736-4622-464a-a228-85404c322259">
-          <h1 id="cd5a4a8d-b151-4c22-ba4e-e2422d9e6373">
+       <div class="tab-pane fade active show" id="7f310559-2636-41e6-a772-20a85aafee2a">
+        <div class="mt-5" id="77693873-3ccf-4378-8d5c-ddb07644ab81">
+         <div class="d-flex justify-content-between" id="601b6c47-84b5-4d3c-a521-0a88d1dcb376">
+          <h1 id="0dd05beb-7ef5-4092-9a08-f4406b4b2347">
            Class
-           <span class="text-primary" id="46d2faa2-1bac-4e17-990b-1d76d4e2f4c9">
+           <span class="text-primary" id="a2160140-9a33-4373-a543-bd4f191534a4">
             Anchor
            </span>
           </h1>
-          <div id="174d183a-6a01-49f9-8bc8-e3d16c1c0e08">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#2c4055b5-a12f-469f-82e2-2bf31b1ef3bf" data-bs-toggle="collapse" id="0cffd9fa-6c95-48ea-ba86-883760c5dda7" onclick="return false;" type="button">
+          <div id="72cddd7d-0d24-445c-8bc1-47302f2e539a">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#f7afed6b-71e5-4bea-b598-b02411580f6d" data-bs-toggle="collapse" id="75fab22e-2c9d-40b4-9800-a3940022929e" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="cba78807-fcc3-43e0-93ae-3ab90bfda429">
+         <span class="text-muted" id="e29e2b54-3a35-4c6b-a757-9075eb08309d">
           A web component for an anchor.
          </span>
-         <pre id="91b604b1-48a9-4acc-b2c1-7c5e3db07402"><code class="python">Anchor(inner=None)</code></pre>
-         <div class="ms-3 collapse" id="2c4055b5-a12f-469f-82e2-2bf31b1ef3bf">
-          <h6 id="4e00341a-ba30-4f71-b19d-fb3adfeb8b97">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="be2c519d-58c7-4062-b344-53fd27c421df"><code class="python">Anchor(inner=None)</code></pre>
+         <div class="ms-3 collapse" id="f7afed6b-71e5-4bea-b598-b02411580f6d">
+          <h6 id="a91c18ae-2799-41cf-b38b-76777dfc5024">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="4e8a6e30-0ff7-4289-aa0a-b7883b4bcec9">
+          <table class="table table-sm bg-light" id="ee01a6a7-7dc2-4dfc-9f26-fffd5fe389ef">
            <thead>
             <tr>
              <th scope="col">
@@ -254,7 +250,7 @@
            </tbody>
           </table>
          </div>
-         <p id="92f4c829-9a40-41d4-aaac-4c81a31ac545">
+         <p id="0a40407d-b66b-4da8-b544-1d7457c3363c">
           The
           <code>
            Anchor
@@ -273,45 +269,43 @@
     conjunction with other components, for example, in creating a navigation
     menu.
          </p>
-         <div class="ms-3" id="6939da9a-8596-432d-9fc0-3203fc4163db">
-          <h6 id="0255bb48-6128-4cb2-8c08-49619d131304">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="9a5ff426-fe0e-4692-a0fd-8b97d9879e15">
+          <h6 id="de3a3cb2-35d7-4361-8eb3-84a0cbbe755e">
+           Example
           </h6>
-          <pre id="52bbfea4-5b48-46fd-b834-480c458b10e3"><code class="python">from bootwrap import Anchor
+          <pre id="703d9b42-388b-427d-85f8-6ab14d630773"><code class="python">from bootwrap import Anchor
 Anchor('Google Search').link('https://www.google.com/')
 </code></pre>
          </div>
-         <div class="ms-3" id="ca0bbf74-5486-44b8-a931-63120d325ce2">
-          <a href="https://www.google.com/" id="7de35ff5-ea51-4343-bc26-10614c7a0b69">
+         <div class="ms-3" id="b8262cfe-c803-4e77-a0cc-d249b35e93d9">
+          <a href="https://www.google.com/" id="4d1559ff-553f-4c2b-86eb-aa16a9b00fba">
            Google Search
           </a>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="09b5f1d1-de5a-473a-8f6a-24ce76dd22b2">
-        <div class="mt-3" id="54be8b35-528c-4521-8845-15e789647c0f">
-         <div id="7bde939b-0c09-4770-9c8c-5a8bbb6382f3">
+       <div class="tab-pane fade" id="269ced98-fb06-4b2f-86f9-98db40c28f87">
+        <div class="mt-3" id="409a6f50-2cac-468d-a439-489c21f3becd">
+         <div id="00beb03c-ad2f-4128-ad6a-41240cfc7294">
           <div class="row">
            <div class="col-md">
-            <div id="03f5db49-8717-46bd-b914-2d1ea0e4ba84">
-             <h1 id="90a199b9-f045-4da9-b337-7d6c37c30519">
+            <div id="2fd6295a-13b3-46dc-b7f9-5aab1b8ff2ca">
+             <h1 id="a2c2a21f-36ad-4c3e-805f-ffe6f7f9ca9e">
               Appearance
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="e58ae665-97a0-4629-bfa5-85d555badbab">
+            <div id="bc23e7fd-df9e-4718-8905-dccac64b2d4f">
             </div>
            </div>
           </div>
          </div>
-         <div id="e35ba683-6622-43a5-bc0f-c76b3aa0d4fc">
+         <div id="250af278-37ed-40d3-8947-f091ad485f5b">
           <div class="row">
            <div class="col-md">
-            <div id="ade45b10-4670-4a86-a3c9-24e1ce8b9d6f">
-             <p id="186c987e-8131-4aad-bc7d-0637b2dd87a1">
+            <div id="57aa952c-cb2b-4752-a44e-b1b12e589b87">
+             <p id="67bd675a-8459-4412-802d-66513734b046">
               Change
               <code>
                Anchor
@@ -353,8 +347,8 @@ Anchor('Google Search').link('https://www.google.com/')
             </div>
            </div>
            <div class="col-md">
-            <div id="6082ead2-1db4-42c0-94e3-28dd6e736ac1">
-             <pre id="0d3728b0-b2fa-4134-8567-208bc74da203"><code class="python">from bootwrap import Panel, Anchor
+            <div id="26f8820a-940a-4b4c-936a-22f3fb6caf05">
+             <pre id="c6bd8bbf-52a3-4bf4-825c-8e705e101c0d"><code class="python">from bootwrap import Panel, Anchor
 panel = Panel(
   Anchor("Primary").link("#").as_primary(),
   Anchor("Secondary").link("#").as_secondary(),
@@ -368,29 +362,29 @@ panel = Panel(
 for anchor in panel:
   anchor.mb(1)
 panel</code></pre>
-             <div id="a2fd908b-0aee-46e6-98fc-d42a47eb2398">
-              <a class="mb-1 text-primary" href="#" id="9e6d99eb-ae3a-4de7-8567-3e4e2bcc37ab">
+             <div id="93601d64-6c1d-474d-a23d-c214e5f85e24">
+              <a class="mb-1 text-primary" href="#" id="86a8ab62-be06-44c0-9c42-afcfdac39677">
                Primary
               </a>
-              <a class="mb-1 text-secondary" href="#" id="5d08e817-2b1f-49af-a98b-8c56cf6b527d">
+              <a class="mb-1 text-secondary" href="#" id="1e4faa8c-1943-4494-9d32-67afec940991">
                Secondary
               </a>
-              <a class="mb-1 text-success" href="#" id="87de121d-1352-4e8a-a1ad-409fafc056df">
+              <a class="mb-1 text-success" href="#" id="3180b62c-ac6f-4eeb-8efc-8fc274cd25c2">
                Success
               </a>
-              <a class="mb-1 text-warning" href="#" id="32bf70dd-2d51-4e59-b486-1bbe3f6463e5">
+              <a class="mb-1 text-warning" href="#" id="69eee5ad-741f-496a-b115-8f070fdb0ccb">
                Warning
               </a>
-              <a class="mb-1 text-danger" href="#" id="bc57738e-8af0-4012-b3dd-6b01a3c44023">
+              <a class="mb-1 text-danger" href="#" id="ae12224a-6052-4cf8-bf9f-db2582ec544a">
                Danger
               </a>
-              <a class="mb-1 text-info" href="#" id="c8b21856-38e9-4b59-8f1c-ddaf0afaff87">
+              <a class="mb-1 text-info" href="#" id="06fe9eaa-009e-42b1-b3e7-78a65ac8a782">
                Info
               </a>
-              <a class="mb-1 text-light" href="#" id="76e7c28e-dde9-48bf-8367-d2b72225cef2">
+              <a class="mb-1 text-light" href="#" id="f86bcf7f-cfcb-45c1-996f-e35b93405306">
                Light
               </a>
-              <a class="mb-1 text-dark" href="#" id="3eb043f1-d107-4ce0-9bf9-04cba40dec05">
+              <a class="mb-1 text-dark" href="#" id="1e0c743d-20b5-4699-b376-fbb89afcfa26">
                Dark
               </a>
              </div>
@@ -400,28 +394,28 @@ panel</code></pre>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="b03b0789-20a1-4ced-a641-eb6acbb386d6">
-        <div class="mt-3" id="2ae12bb9-8601-4e9b-bd39-cf63b86b2a16">
-         <div id="ad6f9165-79cc-4070-bcad-af2ae93d1a6a">
+       <div class="tab-pane fade" id="7cb9faf7-e097-4a13-a521-bc707b559a13">
+        <div class="mt-3" id="39276df8-929e-48ef-860a-f5bdd0457f8d">
+         <div id="8e4e51f1-9fd2-463c-aa47-7c14bd910360">
           <div class="row">
            <div class="col-md">
-            <div id="27a89361-460b-4100-bd42-73b8cdde7955">
-             <h1 id="07637722-dbe9-4839-b150-76139d084cfe">
+            <div id="122f9dbd-739f-41ef-a4cf-e47f4c5d21ff">
+             <h1 id="bfd8fdc5-0620-4086-a635-0416f4457f58">
               Link Resource
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="6f394df6-f09f-45f1-8263-680a1f557b1a">
+            <div id="30908c42-e64e-41db-9d23-069579c53023">
             </div>
            </div>
           </div>
          </div>
-         <div id="3e815644-bb53-4e3e-9a4a-36d024ebd3f8">
+         <div id="33c2fb8c-234a-42ee-a939-1708dad7b7a0">
           <div class="row">
            <div class="col-md">
-            <div id="02c5ed70-2d2b-4889-b790-53f497a1a8ef">
-             <p id="c4e6fc90-7a71-466a-9dd3-fabdc2ae2e01">
+            <div id="d5d060b8-bc60-4c84-a2ee-0f115a427b07">
+             <p id="fe924066-1dfa-4a21-8b69-1ff6a3ec1540">
               Associate
               <code>
                Anchor
@@ -435,13 +429,13 @@ panel</code></pre>
             </div>
            </div>
            <div class="col-md">
-            <div id="0a9afef9-dfe0-4b9c-b306-ab6328598379">
-             <pre id="dfcc8485-bb70-45cf-be8c-9e6d60108b82"><code class="python">from bootwrap import Panel, Anchor
+            <div id="97e94b4f-5328-472f-a063-543708a605e9">
+             <pre id="ac02a923-b2d3-4011-8095-5d1653897e18"><code class="python">from bootwrap import Panel, Anchor
 Panel(
     Anchor("Google Search").link("https://www.google.com/")
 )</code></pre>
-             <div id="31917532-3663-4fbb-9bd7-6709aa0a7b7d">
-              <a href="https://www.google.com/" id="d44af575-1147-4c7d-914e-c8146035377e">
+             <div id="4ad175e2-373c-4349-b4eb-9893770eab4b">
+              <a href="https://www.google.com/" id="405f2b38-baf7-4c9b-a76a-358f9390660a">
                Google Search
               </a>
              </div>
@@ -451,28 +445,28 @@ Panel(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="f7c40a04-508d-486c-a7a5-cc8737f6c6e8">
-        <div class="mt-3" id="84bb9dc2-f2ee-4b77-a229-1d1e5c735304">
-         <div id="1538eaf1-a5e6-4121-b7b0-87f8a1dc4637">
+       <div class="tab-pane fade" id="516342a0-6afb-4ea9-b490-955d9ea69acd">
+        <div class="mt-3" id="80c0458b-fa45-4457-bdac-33af06c7e196">
+         <div id="588965e8-6b01-4401-a06b-dcf2f731808a">
           <div class="row">
            <div class="col-md">
-            <div id="c464cf42-7618-457a-8f4b-471d52f8d770">
-             <h1 id="24c57f54-8e62-4b79-a84d-7e9fa4f28679">
+            <div id="0273f5ca-5c31-4bc6-9ccc-4b4c2e5cb4d0">
+             <h1 id="ac6df9fa-c877-4bf9-b859-c0d349f182b5">
               Open Dialog
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="9784421d-2d4f-4aa4-aed2-0774b012b5dd">
+            <div id="2aa85652-ca25-4960-8b9f-09e726a7902f">
             </div>
            </div>
           </div>
          </div>
-         <div id="15244459-b62e-42d2-886c-56e6dff00904">
+         <div id="5200c41e-b4a7-4b78-9b9c-9ceda4d9b9b1">
           <div class="row">
            <div class="col-md">
-            <div id="e1ae108d-ba69-4004-bd2b-70eebf3a02c0">
-             <p id="0ac885ad-eb0e-4e89-8cbb-89d20b28ee14">
+            <div id="4f963194-b684-43ff-88ff-16055c96e0e9">
+             <p id="01efc337-af35-4fbd-a2f5-7fa189eefcb7">
               Use
               <code>
                Anchor
@@ -486,16 +480,16 @@ Panel(
             </div>
            </div>
            <div class="col-md">
-            <div id="37d0c46c-b8a0-48b7-8356-9152e0b6d294">
-             <pre id="36f7b833-d612-43a4-8b95-78e60fb7612c"><code class="python">from bootwrap import Panel, Dialog, Anchor
+            <div id="80669dac-65a4-4361-97d3-08b29a1cb7c4">
+             <pre id="fb7eaaee-b671-43cf-854d-b653e8ab62f4"><code class="python">from bootwrap import Panel, Dialog, Anchor
 dialog = Dialog(
   "Greeting",
   "Hello World!"
 )
 anchor = Anchor("Say Hello").toggle(dialog)
 Panel(dialog, anchor)</code></pre>
-             <div id="0830e939-c0db-4df7-9623-dee6e36bdf08">
-              <div class="modal" id="33c7400f-bab3-4cc6-a430-5ba7b3d78f98">
+             <div id="ee0b868d-5024-43a4-82c6-0e4902896eaa">
+              <div class="modal" id="d35635af-507a-455b-8bae-ecff81a0ad3c">
                <div class="modal-dialog" role="document">
                 <div class="modal-content">
                  <div class="modal-header">
@@ -511,7 +505,7 @@ Panel(dialog, anchor)</code></pre>
                 </div>
                </div>
               </div>
-              <a data-bs-toggle="modal" href="#33c7400f-bab3-4cc6-a430-5ba7b3d78f98" id="b3b08eec-6740-4823-9855-b501b3d0787c" role="modal">
+              <a data-bs-toggle="modal" href="#d35635af-507a-455b-8bae-ecff81a0ad3c" id="30a1b37e-8c57-43e5-a0e0-b90441362d39" role="modal">
                Say Hello
               </a>
              </div>
@@ -521,28 +515,28 @@ Panel(dialog, anchor)</code></pre>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="930ac37e-e4fa-4c33-b1b7-48f81c16eb2f">
-        <div class="mt-3" id="3d78eead-a7d7-43e5-8308-e5c73f23be39">
-         <div id="df8ae717-9985-461e-9fa4-f309062c3a1f">
+       <div class="tab-pane fade" id="e4fcdef7-675f-4129-b0f2-10f95ccd4120">
+        <div class="mt-3" id="28d43587-84ee-4ea7-95fd-36e44a878218">
+         <div id="3bf67abe-f8aa-4eb1-bc14-888161908947">
           <div class="row">
            <div class="col-md">
-            <div id="bc0fdab2-3e6f-43f9-b639-c76963c3ce67">
-             <h1 id="6121fdab-8fb9-476f-a9f1-09804d142c29">
+            <div id="637bcb31-68a7-424f-ab37-ffa8317631af">
+             <h1 id="f1598918-e739-4fd8-a81c-6d3601db6050">
               Close Dialog
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="903b6dd0-405f-48a1-b3b9-933729905f8d">
+            <div id="bc9d9d86-9008-49e8-9f39-f555e3e653b8">
             </div>
            </div>
           </div>
          </div>
-         <div id="c11177ca-2d8f-4c54-8a82-95b054005bc1">
+         <div id="ca73c2ca-7fc4-45c5-802f-1f674758b527">
           <div class="row">
            <div class="col-md">
-            <div id="b2db5b91-3aaf-4cef-86a3-d9772cdc53dc">
-             <p id="b0846f7f-a03d-4d6a-993f-58e1e4ec201c">
+            <div id="778af7cc-88df-489d-87c4-80de80d10f9a">
+             <p id="3ccdb6af-b7df-4e05-b358-af89bc721ca3">
               Use
               <code>
                Anchor
@@ -556,8 +550,8 @@ Panel(dialog, anchor)</code></pre>
             </div>
            </div>
            <div class="col-md">
-            <div id="4f6216eb-e499-4c59-8950-801be66eef6d">
-             <pre id="ad059987-a57e-46f9-a337-f820cb872e65"><code class="python">from bootwrap import Panel, Dialog, Anchor
+            <div id="15aee6ff-0260-413c-b493-aeaba20d3a4f">
+             <pre id="ba4f8828-7476-48fd-a66b-a2b99e6765e1"><code class="python">from bootwrap import Panel, Dialog, Anchor
 dialog = Dialog(
   "Greeting",
   "Hello World!",
@@ -565,8 +559,8 @@ dialog = Dialog(
 )
 anchor = Anchor("Say Hello").toggle(dialog)  
 Panel(dialog, anchor)</code></pre>
-             <div id="0580c0c8-37b0-426c-85f6-fe615e46c856">
-              <div class="modal" id="58ed53b2-9b0b-421d-8cd2-c79acfa59791">
+             <div id="2441600a-9246-4348-848e-b38e8ca1ac20">
+              <div class="modal" id="4f1d91cf-6a35-408b-b6b8-5ea0ecf5f96e">
                <div class="modal-dialog" role="document">
                 <div class="modal-content">
                  <div class="modal-header">
@@ -580,14 +574,14 @@ Panel(dialog, anchor)</code></pre>
                   Hello World!
                  </div>
                  <div class="modal-footer">
-                  <a data-bs-dismiss="modal" href="#" id="31796ce6-8fce-4ac4-9162-77e94b572c08">
+                  <a data-bs-dismiss="modal" href="#" id="a8a6bdbd-b2cf-4a70-8fbc-67c984e91304">
                    Bye
                   </a>
                  </div>
                 </div>
                </div>
               </div>
-              <a data-bs-toggle="modal" href="#58ed53b2-9b0b-421d-8cd2-c79acfa59791" id="25e5c538-06a7-45ad-a7e6-784b444d6183" role="modal">
+              <a data-bs-toggle="modal" href="#4f1d91cf-6a35-408b-b6b8-5ea0ecf5f96e" id="ae34c5fc-bbbc-4122-af37-a701d1139f4b" role="modal">
                Say Hello
               </a>
              </div>
@@ -597,28 +591,28 @@ Panel(dialog, anchor)</code></pre>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="7c554330-ecc2-4d08-a3bc-54376184352d">
-        <div class="mt-3" id="a7b55dbf-8002-4f9b-88dc-b121e0b506e6">
-         <div id="b25b3229-96c3-43c3-8ebd-374c7ddacec9">
+       <div class="tab-pane fade" id="596a9eb5-0d4b-4748-9b94-61490e19afa8">
+        <div class="mt-3" id="373712c2-9d8f-48f6-bfbe-36c4ea889a11">
+         <div id="bf870385-0acf-40c1-a849-4cc8d0f331da">
           <div class="row">
            <div class="col-md">
-            <div id="0699d30f-8dfa-4a40-a4c0-63d044e8905e">
-             <h1 id="29b0aef9-6acb-48ea-92df-b432d549a0d8">
+            <div id="17ba7e2b-63f2-430d-967f-ad4d14159af3">
+             <h1 id="b650fc5a-bf86-4263-b2f5-76b017e94fe6">
               Expand/Collapse Panel
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="457c6f72-48fb-4570-a035-7c79390a14cd">
+            <div id="1c7cd10f-5cc8-4732-b0fc-4b0651bec560">
             </div>
            </div>
           </div>
          </div>
-         <div id="1d1adb8c-6ce1-4549-97ee-0aa562681005">
+         <div id="0527de84-41e5-4382-afd9-4d6bb998caf4">
           <div class="row">
            <div class="col-md">
-            <div id="a16b8a41-2e64-435f-85e1-f30754517609">
-             <p id="be2d6831-306a-49a4-9a8d-a60fb22a2619">
+            <div id="2662d876-0d35-4ae8-8a64-7d8d87b51e89">
+             <p id="c950b581-68e8-4516-96a9-4919dd7d97d6">
               Use
               <code>
                Anchor
@@ -632,8 +626,8 @@ Panel(dialog, anchor)</code></pre>
             </div>
            </div>
            <div class="col-md">
-            <div id="0ff5ed95-d83e-491c-8756-e362c88f8ebc">
-             <pre id="fe0d702b-0bcd-45dd-80c6-59f0665b2221"><code class="python">from bootwrap import Panel, Anchor
+            <div id="c25bd1e0-4f61-4d11-a710-b49a2cf769dd">
+             <pre id="60c7696f-27c1-49b6-a23c-f0e8fc2cd5c3"><code class="python">from bootwrap import Panel, Anchor
 quote = Panel(
   "Sometimes life is going to hit you in " +
   "the head with a brick. Don’t lose faith."
@@ -642,11 +636,11 @@ Panel(
   Anchor("Steve Jobs Quote").toggle(quote),
   quote
 )</code></pre>
-             <div id="f7825f35-4f4e-4aea-aa2e-cd80745ae5cb">
-              <a data-bs-target="#9f102814-c4c4-41b6-8d35-0e0f7d093c29" data-bs-toggle="collapse" href="#9f102814-c4c4-41b6-8d35-0e0f7d093c29" id="23601c9f-d6f0-4b42-9ee5-53c791eca5f0" role="collapse">
+             <div id="edcd8fbc-62f9-48fb-a740-c5235da9f4f7">
+              <a data-bs-target="#af7e860e-25ba-4605-8163-43eeea46597a" data-bs-toggle="collapse" href="#af7e860e-25ba-4605-8163-43eeea46597a" id="693242a0-eb85-448d-b53b-96e54ed77029" role="collapse">
                Steve Jobs Quote
               </a>
-              <div class="collapse" id="9f102814-c4c4-41b6-8d35-0e0f7d093c29">
+              <div class="collapse" id="af7e860e-25ba-4605-8163-43eeea46597a">
                Sometimes life is going to hit you in the head with a brick. Don’t lose faith.
               </div>
              </div>
@@ -659,52 +653,50 @@ Panel(
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="39b1fa39-4055-4fcd-aae9-49039adb697f">
-     <div id="d48dd010-7c58-4ff2-a22a-e09519baf91c">
+    <div class="tab-pane fade" id="65bad313-d01f-4f63-94d9-31de4607dd7d">
+     <div id="0b9c30be-5a28-4136-b32c-d107a3d9ad88">
       <hr/>
-      <ul class="nav" id="7e20ef0c-eca8-4855-90e4-1ca598e8c7ab" role="tablist">
+      <ul class="nav" id="ea3c6fb4-e371-49df-85b1-523d0d530b04" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#066dacac-d410-48af-a4f4-4339ffb329e7" data-bs-toggle="tab" href="#066dacac-d410-48af-a4f4-4339ffb329e7" id="36210d45-1e61-4612-93d3-7b074cef1ab3" role="tab">
-         <span class="text-secondary" id="7c697142-668e-4b72-b457-7008e3f9c1f3">
+        <a class="nav-link active" data-bs-target="#64583613-1445-4be5-87cc-e0da8d3a88eb" data-bs-toggle="tab" href="#64583613-1445-4be5-87cc-e0da8d3a88eb" id="3a27ba5c-c84a-4092-a068-0b86ef913fed" role="tab">
+         <span class="text-secondary" id="2ba993c1-590a-497c-b591-39eb956f8ee3">
           Badge
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#b78502e8-3b64-47a1-85f1-5c7427c07885" data-bs-toggle="tab" href="#b78502e8-3b64-47a1-85f1-5c7427c07885" id="6c796713-28fb-4c78-99cb-97fb7c2002e6" role="tab">
-         <span class="text-secondary" id="e831e86c-69a2-44c8-be38-820cb5ebed14">
+        <a class="nav-link" data-bs-target="#590ee68b-00f8-4098-ba75-e643d4f6974d" data-bs-toggle="tab" href="#590ee68b-00f8-4098-ba75-e643d4f6974d" id="70cd4200-7bf0-4b3a-998c-7b32e71ff102" role="tab">
+         <span class="text-secondary" id="1e3e2d9a-24f8-488b-886e-4d88dc2a3fb4">
           Appearance
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="066dacac-d410-48af-a4f4-4339ffb329e7">
-        <div class="mt-5" id="74863860-e0c4-4219-af89-e4d95c8953ac">
-         <div class="d-flex justify-content-between" id="4cc0c759-3784-435d-9312-149d787b8a44">
-          <h1 id="079b4c5e-e6f3-4e8d-b793-0de0a861aa0d">
+       <div class="tab-pane fade active show" id="64583613-1445-4be5-87cc-e0da8d3a88eb">
+        <div class="mt-5" id="7b093a26-9b0f-4a95-a6c8-20d2687c898c">
+         <div class="d-flex justify-content-between" id="26b776c2-50c0-46a5-aba0-4006e21d62f5">
+          <h1 id="d502e094-4c62-4732-af11-4b6f6ce2f37e">
            Class
-           <span class="text-primary" id="bc4c2f6a-44c0-471b-a60e-b71d6fbeff0d">
+           <span class="text-primary" id="5141da0a-777a-4ea2-9ef6-66cec869ddb7">
             Badge
            </span>
           </h1>
-          <div id="5b73e140-1ff4-46a3-b769-c87e6bb876b2">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#cd999341-e4c8-4421-bcb1-234d1d8b601a" data-bs-toggle="collapse" id="46772606-367e-4a7b-834b-1c1a1ee16043" onclick="return false;" type="button">
+          <div id="4bd92ab4-6666-49c7-b7aa-8def548f3805">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#d47eaf84-c89c-48ee-986e-23f0d3cbba2b" data-bs-toggle="collapse" id="d83001bf-6e94-49d4-b31a-73d68ead5b46" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="61034097-3deb-4b58-b664-5d404ed18dc7">
+         <span class="text-muted" id="537a85ef-4323-46fe-a0f7-29770a5c10e2">
           A web component for a badge.
          </span>
-         <pre id="db3adcea-a201-44d9-b3af-3880db4668e3"><code class="python">Badge(label)</code></pre>
-         <div class="ms-3 collapse" id="cd999341-e4c8-4421-bcb1-234d1d8b601a">
-          <h6 id="b6b29743-74bb-4e92-8bf5-f16b1ec84cc4">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="30d27f3d-2302-44d9-bd7b-a76846fabed7"><code class="python">Badge(label)</code></pre>
+         <div class="ms-3 collapse" id="d47eaf84-c89c-48ee-986e-23f0d3cbba2b">
+          <h6 id="736daecd-3beb-457f-858f-d30b1fa93c6a">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="a606273c-428a-448b-8e79-2f516d61ad8e">
+          <table class="table table-sm bg-light" id="66d515ff-fec6-4474-9411-50aced610be1">
            <thead>
             <tr>
              <th scope="col">
@@ -737,45 +729,43 @@ Panel(
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="689d9657-ccc8-40f1-b1ab-47c323b42474">
-          <h6 id="7d5c0b40-4bd8-44ef-a556-4c9d27575082">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="ef867c7d-8ffb-4b45-9581-9a4c317a506e">
+          <h6 id="8bc2b60f-2ea4-4bb1-be90-625fc21055df">
+           Example
           </h6>
-          <pre id="d008625b-1f19-4d56-a7b7-15170ef9a63c"><code class="python">from bootwrap import Badge
+          <pre id="4b027c29-9a20-4fee-be63-55fa7a032d87"><code class="python">from bootwrap import Badge
 Badge('Some Badge').as_dark()
 </code></pre>
          </div>
-         <div class="ms-3" id="b876ac70-d8b1-42bc-9980-44c72fbf3d4e">
-          <span class="badge text-bg-dark" id="f5448133-c73b-4271-91f3-adbffc428d86">
+         <div class="ms-3" id="06029d60-f92c-4534-9442-66f692c96764">
+          <span class="badge text-bg-dark" id="9bd33477-fb00-4d1f-b39b-575bc337ac9f">
            Some Badge
           </span>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="b78502e8-3b64-47a1-85f1-5c7427c07885">
-        <div class="mt-3" id="ef7d74a3-2829-4ae8-8a9c-106394c2635b">
-         <div id="77790781-28b0-4d12-9a42-d4a897e9b9c8">
+       <div class="tab-pane fade" id="590ee68b-00f8-4098-ba75-e643d4f6974d">
+        <div class="mt-3" id="73cd9514-7ef9-494a-a0ef-113ac9dadf9c">
+         <div id="996db971-4be3-45bd-81cd-8a7f1af67e65">
           <div class="row">
            <div class="col-md">
-            <div id="2c6ba17c-df70-4b75-a802-946790dc1b33">
-             <h1 id="55bd0f3d-ff8f-49b4-966c-d939d94aa1fb">
+            <div id="c689df33-b105-419a-bef6-dea1f09e2e85">
+             <h1 id="3ec81f93-12be-4e1a-9859-7b23996889f1">
               Appearance
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="deccfd16-1769-4edb-a7ab-897205bd7389">
+            <div id="390d4913-743c-4bcc-983c-860eab11568d">
             </div>
            </div>
           </div>
          </div>
-         <div id="7a4f2317-33e7-447d-9180-291206f7998c">
+         <div id="816044f6-622b-4127-bcc0-d9dd5ddd9d08">
           <div class="row">
            <div class="col-md">
-            <div id="0ed0b051-9aa5-4707-bc09-40e705e03121">
-             <p id="d178eeff-6958-43f5-b0c3-003c90674faf">
+            <div id="1ad261b8-851d-4fb9-bccf-76098b79c21c">
+             <p id="98b5545b-7775-4b17-9339-4b10b08eede9">
               Change
               <code>
                Badge
@@ -817,8 +807,8 @@ Badge('Some Badge').as_dark()
             </div>
            </div>
            <div class="col-md">
-            <div id="16c05e5a-7bed-45eb-aba8-9969e03551f4">
-             <pre id="4e4896c1-b5d8-489a-95bf-68a89a8ceed0"><code class="python">from bootwrap import Panel, Badge
+            <div id="fe128f7b-49b0-4ebb-b88c-078490b6a148">
+             <pre id="5d5257de-e712-43cd-bb26-dde66405594f"><code class="python">from bootwrap import Panel, Badge
 panel = Panel(
   Badge("Primary").as_primary(),
   Badge("Secondary").as_secondary(),
@@ -832,29 +822,29 @@ panel = Panel(
 for anchor in panel:
   anchor.mb(1)
 panel</code></pre>
-             <div id="65727042-31d3-4a58-b072-65f296eb0a0c">
-              <span class="badge text-bg-primary mb-1" id="53999f6c-6d72-43eb-b056-de091d95cf32">
+             <div id="f0c709cd-ab18-441e-9817-88e7db6a58f8">
+              <span class="badge text-bg-primary mb-1" id="f921399e-c476-4cbb-b0cb-f36c90f703e1">
                Primary
               </span>
-              <span class="badge text-bg-secondary mb-1" id="6da0a5ac-b6cd-41e2-8df9-04d964dfb00b">
+              <span class="badge text-bg-secondary mb-1" id="41b51b2d-71c7-4072-9abd-3e805b773ec1">
                Secondary
               </span>
-              <span class="badge text-bg-success mb-1" id="7af61290-f37c-447d-bac9-c3cd397c9d3b">
+              <span class="badge text-bg-success mb-1" id="c41a841a-1d2e-4bb8-a3b3-7124b5926e07">
                Success
               </span>
-              <span class="badge text-bg-warning mb-1" id="17d34cf0-564d-4dc8-927b-68351e8f6795">
+              <span class="badge text-bg-warning mb-1" id="7399b30e-eb1b-4d48-9866-01eadf0845e3">
                Warning
               </span>
-              <span class="badge text-bg-danger mb-1" id="e25c6906-8336-4650-8572-acfa70fac7b4">
+              <span class="badge text-bg-danger mb-1" id="a115819a-dcd6-4742-a874-56b8dd93901c">
                Danger
               </span>
-              <span class="badge text-bg-info mb-1" id="a34fa2b6-21af-447b-ae40-214bbeb3a5c7">
+              <span class="badge text-bg-info mb-1" id="64bd7152-e80f-473c-b3ae-0eac5285cdb4">
                Info
               </span>
-              <span class="badge text-bg-light mb-1" id="17682a43-1a83-404b-9c18-03e159763bfc">
+              <span class="badge text-bg-light mb-1" id="e13fbd73-40b8-4e00-8ab3-604cc7df1fca">
                Light
               </span>
-              <span class="badge text-bg-dark mb-1" id="09984f4c-ab4b-4807-80bd-623c3d2ed972">
+              <span class="badge text-bg-dark mb-1" id="14478e36-60d9-4313-b53f-ff70e582b902">
                Dark
               </span>
              </div>
@@ -867,101 +857,99 @@ panel</code></pre>
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="b51cebc0-9799-4539-a4b8-d278c6238ab9">
-     <div id="7be0d561-fca4-4c52-83a5-769560ff4474">
+    <div class="tab-pane fade" id="dcd14819-9d68-4c5e-8a0c-1e1a1cd7620f">
+     <div id="310fde7c-0e45-4028-b3c1-da4693b0b348">
       <hr/>
-      <ul class="nav" id="18bc45c0-6999-4413-91f5-4390ac8a4eb1" role="tablist">
+      <ul class="nav" id="3a6521dc-4596-4b90-845c-b7f427624e52" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#5f6ecf8b-4fc5-4c14-97c5-12cb9be32cc0" data-bs-toggle="tab" href="#5f6ecf8b-4fc5-4c14-97c5-12cb9be32cc0" id="b8224159-5a5f-4501-a100-af708bf9def4" role="tab">
-         <span class="text-secondary" id="3bb610fe-cbf4-4f36-a41d-4b8815d6cf0a">
+        <a class="nav-link active" data-bs-target="#3eb99925-8f9d-4b0e-a8f9-5dc4d7dceb27" data-bs-toggle="tab" href="#3eb99925-8f9d-4b0e-a8f9-5dc4d7dceb27" id="a6b1c77c-bea6-478b-ae03-76cf46351280" role="tab">
+         <span class="text-secondary" id="bc906095-92ec-4136-8273-de27f520a901">
           Button
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#2451a6e8-99c7-47e0-b8cd-b13418a8d214" data-bs-toggle="tab" href="#2451a6e8-99c7-47e0-b8cd-b13418a8d214" id="ff8a2110-88a2-4aee-92d4-274337495102" role="tab">
-         <span class="text-secondary" id="1f57c7e4-2f6e-4cf6-82f3-6f1004307e66">
+        <a class="nav-link" data-bs-target="#e6b7e050-37f5-4124-9548-edb4d26ec4f6" data-bs-toggle="tab" href="#e6b7e050-37f5-4124-9548-edb4d26ec4f6" id="ba897304-e863-45a1-beb4-da9e80582fa5" role="tab">
+         <span class="text-secondary" id="9f175fb0-07b6-44c6-92ed-69b84c505fa7">
           Appearance
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#aa84bf71-a33f-4842-9071-71bf87360c88" data-bs-toggle="tab" href="#aa84bf71-a33f-4842-9071-71bf87360c88" id="1c8e5921-19f4-4928-affc-4479edcc0b2c" role="tab">
-         <span class="text-secondary" id="0742bb52-bcff-4df1-be6d-0f4db34cca78">
+        <a class="nav-link" data-bs-target="#587587c9-5658-49b5-9154-c1c4e67ed59f" data-bs-toggle="tab" href="#587587c9-5658-49b5-9154-c1c4e67ed59f" id="ec7fa8ee-1d1a-4e18-8e25-c85894f6fbfe" role="tab">
+         <span class="text-secondary" id="b086d73a-8094-49c8-b852-57081774b64e">
           Outline
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#e48975c4-a46e-4a46-930f-5c993316494a" data-bs-toggle="tab" href="#e48975c4-a46e-4a46-930f-5c993316494a" id="c95406c0-b084-4fb0-a2d8-92267c433bbc" role="tab">
-         <span class="text-secondary" id="a9c2c959-3dcb-4315-8e32-89e822c4d72e">
+        <a class="nav-link" data-bs-target="#33426b73-a51f-4ac1-9afb-a448194e53e6" data-bs-toggle="tab" href="#33426b73-a51f-4ac1-9afb-a448194e53e6" id="08ab6747-329a-4985-80a8-345b9b6268ee" role="tab">
+         <span class="text-secondary" id="b6044ac0-8569-4f3f-91c2-76e93d4d497a">
           Disable
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#37597ab4-8a5f-4d03-a442-245997630bd1" data-bs-toggle="tab" href="#37597ab4-8a5f-4d03-a442-245997630bd1" id="94d17186-cb4c-40b5-923d-cf172e31615f" role="tab">
-         <span class="text-secondary" id="dd754bff-7024-4019-ae85-24643d5ecf0f">
+        <a class="nav-link" data-bs-target="#01fdba8a-2349-4bbd-8cee-790a2b8c4b35" data-bs-toggle="tab" href="#01fdba8a-2349-4bbd-8cee-790a2b8c4b35" id="635be4de-f936-4a85-9ed6-27375e491dcd" role="tab">
+         <span class="text-secondary" id="6abb73dd-0132-41e4-a2f8-b3a67e90f1f2">
           Link Resource
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#4b49fba0-552d-43a3-bcb6-6ec877743e51" data-bs-toggle="tab" href="#4b49fba0-552d-43a3-bcb6-6ec877743e51" id="0650f33e-5762-4e46-a990-5d3e44d02ce1" role="tab">
-         <span class="text-secondary" id="b08ee257-465b-49c1-972f-e19c73e239eb">
+        <a class="nav-link" data-bs-target="#0ca0a4da-fb75-4a79-8926-e8613f04e8e1" data-bs-toggle="tab" href="#0ca0a4da-fb75-4a79-8926-e8613f04e8e1" id="3871abf9-4098-4d9c-94e0-5a2aa76686c4" role="tab">
+         <span class="text-secondary" id="99ce6dab-480e-4ba7-a4ca-3eeb6e89ecce">
           Open Dialog
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#ba54c9aa-eb24-43c9-8e2f-55ac6e7bafb2" data-bs-toggle="tab" href="#ba54c9aa-eb24-43c9-8e2f-55ac6e7bafb2" id="15f08f37-bab1-441c-96da-4e3b707faa16" role="tab">
-         <span class="text-secondary" id="bd472fa4-6325-496b-a616-d6295cca4262">
+        <a class="nav-link" data-bs-target="#b7eba904-aaaa-4d93-aaab-69113cdd96e4" data-bs-toggle="tab" href="#b7eba904-aaaa-4d93-aaab-69113cdd96e4" id="755aeb73-b013-41cc-981d-b07748499e2a" role="tab">
+         <span class="text-secondary" id="2ce4acf2-e81f-4d23-b600-1ebc110dc767">
           Close Dialog
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#1e2ea340-eeed-4f38-9cdb-40f37c91cdbd" data-bs-toggle="tab" href="#1e2ea340-eeed-4f38-9cdb-40f37c91cdbd" id="ebd81b50-5dbd-4dbe-b940-9768c2fabd0f" role="tab">
-         <span class="text-secondary" id="93d93aed-fd3f-426d-9d69-70ae8b797bd8">
+        <a class="nav-link" data-bs-target="#eac617c4-807c-429f-961c-27cf872ba292" data-bs-toggle="tab" href="#eac617c4-807c-429f-961c-27cf872ba292" id="a2708b07-a074-4e51-b3f8-13397edcaf70" role="tab">
+         <span class="text-secondary" id="3439121e-582c-4d03-968f-184896cd7148">
           Expand/Collapse Panel
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#27626a24-8a6a-4989-aedd-1080b06fe844" data-bs-toggle="tab" href="#27626a24-8a6a-4989-aedd-1080b06fe844" id="8b6cc013-6d4c-4f3a-a9e4-a205a52a45f0" role="tab">
-         <span class="text-secondary" id="c6e88f6e-c55b-4715-85d6-7c5323f3da34">
+        <a class="nav-link" data-bs-target="#1b21c2fc-5145-4fef-b8b3-d597490ffa8e" data-bs-toggle="tab" href="#1b21c2fc-5145-4fef-b8b3-d597490ffa8e" id="a5996331-2ad2-48bb-b784-278a7a0d48d3" role="tab">
+         <span class="text-secondary" id="fd8072b2-5853-4c42-b5bf-15d03ea78509">
           Submit Action
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="5f6ecf8b-4fc5-4c14-97c5-12cb9be32cc0">
-        <div class="mt-5" id="bc82b252-0910-4063-af03-72dfc1368903">
-         <div class="d-flex justify-content-between" id="c4ea7f99-a636-4fdb-b295-d48c8007d463">
-          <h1 id="20d1def8-1e57-48c1-b7c7-4c64aae793cf">
+       <div class="tab-pane fade active show" id="3eb99925-8f9d-4b0e-a8f9-5dc4d7dceb27">
+        <div class="mt-5" id="f6f08f2f-29ba-4b40-a24c-06a610baaaf6">
+         <div class="d-flex justify-content-between" id="85f2d1b2-f4f1-4478-a370-83e81758bca3">
+          <h1 id="1bc24e35-903b-49e2-a5ff-d93cbd137a5e">
            Class
-           <span class="text-primary" id="ed7ec0f6-e78e-430e-9f32-d0006d36b9bb">
+           <span class="text-primary" id="215f320d-c82c-4976-a8fc-7e8c221513a6">
             Button
            </span>
           </h1>
-          <div id="49dfa038-3b99-43c6-8ff9-7295142526b6">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#c82a8e9e-dc50-4bc8-867a-96d79a5d0232" data-bs-toggle="collapse" id="b5277bb4-c6a9-49af-9e9c-aa64dcb732e4" onclick="return false;" type="button">
+          <div id="eba0c115-3480-430e-8d3d-0074b7848275">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#7d1a0bc1-fd71-443b-8345-1bfc1af6b04e" data-bs-toggle="collapse" id="699a918e-f3e6-4c64-9fc6-a0cc501ce550" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="7b7a88c9-2e62-40c2-8ce5-a9990e2ce2ee">
+         <span class="text-muted" id="b3ba8997-5b92-4c1b-86ef-1d2a301f13b7">
           A web component for a button.
          </span>
-         <pre id="78a6e537-466d-4081-9266-f6ab285c403f"><code class="python">Button(name)</code></pre>
-         <div class="ms-3 collapse" id="c82a8e9e-dc50-4bc8-867a-96d79a5d0232">
-          <h6 id="765bfeab-2ab4-4b38-9c20-fdb32fff08f0">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="add681d0-17e0-49db-a42a-7c95ec33000c"><code class="python">Button(name)</code></pre>
+         <div class="ms-3 collapse" id="7d1a0bc1-fd71-443b-8345-1bfc1af6b04e">
+          <h6 id="2bf1e770-81d1-452a-aa39-5cca455c32f7">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="bfea3c71-0ec2-4a5a-bdcb-a527a2fc021a">
+          <table class="table table-sm bg-light" id="7884ede8-1d60-4a5e-85d0-ce7d27aa2341">
            <thead>
             <tr>
              <th scope="col">
@@ -994,7 +982,7 @@ panel</code></pre>
            </tbody>
           </table>
          </div>
-         <p id="2591fb60-5391-45c4-9721-d286757ba4d3">
+         <p id="3940af51-6c8e-419a-b44b-a90f59f020be">
           Without applying a stylized method
           <code>
            Button
@@ -1006,46 +994,42 @@ panel</code></pre>
           </code>
           .
          </p>
-         <div class="ms-3" id="0d10a508-0756-4124-922a-aeec32072ffd">
-          <h6 id="5a58b932-201f-48c3-b72a-41739321d7bd">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="69f7cb3c-e847-43da-951f-cea97071d44d">
+          <h6 id="981f6b95-514c-47e1-a421-5bbd2131425a">
+           Example
           </h6>
-          <pre id="6cc2e856-2cbb-4853-9944-f1ac2e3dc0ae"><code class="python">from bootwrap import Button
+          <pre id="cbcba928-96f6-4d90-8ea1-244231d222b7"><code class="python">from bootwrap import Button
 Button('Google Search').link('https://www.google.com/')
 </code></pre>
          </div>
-         <div class="ms-3" id="04559e17-1b06-4a9f-a2af-703a3e62d57a">
-          <a class="btn" href="https://www.google.com/" id="02ba4ac9-df3b-49bf-9c8e-b4355f95b11c" role="button">
+         <div class="ms-3" id="ce785a68-3ea6-40dc-aa24-1241eaa0eeb1">
+          <a class="btn" href="https://www.google.com/" id="43ab5ebb-d3d2-4c99-8647-2937573c4a47" role="button">
            Google Search
           </a>
          </div>
-         <div class="mt-5" id="a4c7f796-f004-4ed4-8900-b52b6dae3e88">
-          <div class="d-flex justify-content-between" id="6ceae08a-2f9e-4015-96ad-5e3debd62e77">
-           <h4 id="7570ef42-df68-41f6-847f-e0e81d9d4279">
+         <div class="mt-5" id="7f4b6bac-b79b-4af5-baa4-5d36ec84536a">
+          <div class="d-flex justify-content-between" id="7f807b8e-c345-42e0-8729-7addb5d79a2f">
+           <h4 id="6b88b886-763a-47dc-a730-96fd1e839517">
             Method
-            <span class="text-primary" id="6e38028a-d79c-4c2c-ae3f-1534fe612672">
+            <span class="text-primary" id="433c629f-ed47-4a4d-a8a4-a273ef082ca2">
              with_icon
             </span>
            </h4>
-           <div id="7b533c43-52a1-4bc5-a297-e991864d35f5">
-            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#4a3460e6-7de0-4188-882e-db333e44a758" data-bs-toggle="collapse" id="a7e7b848-4046-4333-8c8a-46c3fbd604a9" onclick="return false;" type="button">
+           <div id="03ae1038-80d4-42f0-9d93-b70bf1c6c9c5">
+            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#5223da0d-27de-4e23-9672-3f95a12d8428" data-bs-toggle="collapse" id="3750668e-2c85-4989-b059-606653221b01" onclick="return false;" type="button">
              Argument
             </button>
            </div>
           </div>
-          <span class="text-muted" id="a8a144ff-8c8b-47b0-aa58-7a0dedf20633">
+          <span class="text-muted" id="1a2b597a-198e-4724-ac22-7d61ce9db15f">
            Makes button with icon.
           </span>
-          <pre id="5a5db981-dec5-4ac4-a842-98cd63e9f94f"><code class="python">with_icon(icon, right_side=False)</code></pre>
-          <div class="ms-3 collapse" id="4a3460e6-7de0-4188-882e-db333e44a758">
-           <h6 id="c2fed49a-de78-40e1-b168-26a58dee9e8a">
-            <strong>
-             Arguments
-            </strong>
+          <pre id="2903a428-bbc3-42d9-a243-77eb7f3e2b9f"><code class="python">with_icon(icon, right_side=False)</code></pre>
+          <div class="ms-3 collapse" id="5223da0d-27de-4e23-9672-3f95a12d8428">
+           <h6 id="bf0e3064-3d3f-4b80-87a2-deb3e9c9a483">
+            Arguments
            </h6>
-           <table class="table table-sm bg-light" id="6cf4b4fd-24b1-4b6c-b366-d1c78a685919">
+           <table class="table table-sm bg-light" id="ecdb7b1d-dcfb-4838-a8e8-b6371d96bae2">
             <thead>
              <tr>
               <th scope="col">
@@ -1102,13 +1086,11 @@ Button('Google Search').link('https://www.google.com/')
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="ee61596d-a7a8-44c1-ad1f-f78ccbeee381">
-           <h6 id="d58eef0e-7cd2-492e-a29e-bb050e200e78">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="3609478d-3fb6-4f1a-a894-0437db62cf0d">
+           <h6 id="91591e9b-4a27-410c-b4f6-6b6ec7a3bbf0">
+            Example
            </h6>
-           <pre id="e3c86f17-56c9-4d87-bdae-1f725a3770af"><code class="python">from bootwrap import Button, Icon, Panel
+           <pre id="2ed63930-580f-4000-bdf6-f173e680d69a"><code class="python">from bootwrap import Button, Icon, Panel
 ico_left = Icon("fa-solid fa-arrow-left")
 btn_left = Button("Left").with_icon(ico_left).as_primary()
 ico_right = Icon("fa-solid fa-arrow-right")
@@ -1116,16 +1098,16 @@ btn_right = Button("Right").with_icon(ico_right, True).as_primary()
 Panel(btn_left, btn_right)
 </code></pre>
           </div>
-          <div class="ms-3" id="b7044b27-de3c-47dc-a7bf-0143f00d7abb">
-           <div id="ba41609a-9fc7-4a2a-a28d-83a9e856ba02">
-            <button class="btn btn-primary" id="51ccb9f0-d9e1-40c3-9754-0d747cf257ab" onclick="return false;">
-             <i class="fa-solid fa-arrow-left" id="cae0bfdf-0314-4f12-ac17-73f5e3da4f51">
+          <div class="ms-3" id="54432fe3-6fb1-4ace-8e71-e99bd36179e9">
+           <div id="922dbc57-3524-4444-9928-bcd542430c6b">
+            <button class="btn btn-primary" id="a0ed45c6-0063-4d2a-8012-60a164c67c1c" onclick="return false;">
+             <i class="fa-solid fa-arrow-left" id="0f74f3e0-3938-4d81-876b-2fee8f0caf1e">
              </i>
              Left
             </button>
-            <button class="btn btn-primary" id="7e55dcaa-a7d3-482e-bdfe-6b219ce33d41" onclick="return false;">
+            <button class="btn btn-primary" id="6397ef70-edfe-4a36-92a7-22644580ab6b" onclick="return false;">
              Right
-             <i class="fa-solid fa-arrow-right" id="3b27fae0-8e7b-4b64-aecd-b17a8c67192f">
+             <i class="fa-solid fa-arrow-right" id="bdd58377-d15e-4520-83d3-12b5998c3680">
              </i>
             </button>
            </div>
@@ -1133,28 +1115,28 @@ Panel(btn_left, btn_right)
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="2451a6e8-99c7-47e0-b8cd-b13418a8d214">
-        <div class="mt-3" id="5b75423f-4420-4016-8115-cdd6b69f6905">
-         <div id="62f5f6e0-70f4-4e37-96a5-7a00fac9bd1d">
+       <div class="tab-pane fade" id="e6b7e050-37f5-4124-9548-edb4d26ec4f6">
+        <div class="mt-3" id="ece6962a-2bf6-4d69-8b03-fe5060ed7c36">
+         <div id="d322f76c-c8e7-48fb-8760-33596bc5cb16">
           <div class="row">
            <div class="col-md">
-            <div id="75291d07-70cb-4ef1-baa4-6bd896a0e31d">
-             <h1 id="02659c7d-ca03-4336-be99-537e9e72a6b0">
+            <div id="a44f18c5-b943-4fbc-84db-88d1170fb1ba">
+             <h1 id="cf8e20c6-d07e-4fbb-b66b-31b678c04aa4">
               Appearance
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="468c318c-876b-4f05-a51a-7b96a87fc95a">
+            <div id="94f14b5a-ebd4-4f53-b6ab-872e16a2719f">
             </div>
            </div>
           </div>
          </div>
-         <div id="006be135-3d7a-4d0e-9fe0-2e6681decc16">
+         <div id="ae392d91-29f4-4fae-a296-fbc199b5e560">
           <div class="row">
            <div class="col-md">
-            <div id="82fc8fe5-fe8a-404d-abf7-7d94250e25f2">
-             <p id="ff4da040-1134-44a5-be26-b1d885788672">
+            <div id="513bec0c-4a27-4bda-9850-b4d84658715e">
+             <p id="4f8789f0-f74f-49ce-b0d7-ecb03ca23cd8">
               Change
               <code>
                Button
@@ -1196,8 +1178,8 @@ Panel(btn_left, btn_right)
             </div>
            </div>
            <div class="col-md">
-            <div id="ad512558-cf21-4230-b627-72bbe4bb2f9c">
-             <pre id="d3499730-789d-4366-bd04-22df5c5ab3ff"><code class="python">from bootwrap import Panel, Button
+            <div id="4f2cd0c2-600e-431f-a615-58d7e4fe679f">
+             <pre id="2475ed49-1b1c-452f-a6b7-96a773020b4e"><code class="python">from bootwrap import Panel, Button
 panel = Panel(
   Button("Primary").link("#").as_primary(),
   Button("Secondary").link("#").as_secondary(),
@@ -1211,29 +1193,29 @@ panel = Panel(
 for anchor in panel:
   anchor.mb(1)
 panel</code></pre>
-             <div id="c5abc324-019c-4e0e-8c6b-7c1d236552d0">
-              <a class="mb-1 btn btn-primary" href="#" id="78013f07-8255-4751-94f1-840faf318d48" role="button">
+             <div id="7b8f77c0-31be-4260-9529-9d4823f4c3fd">
+              <a class="mb-1 btn btn-primary" href="#" id="d3852154-8cd5-4fc1-bfe1-b86207ff2e3b" role="button">
                Primary
               </a>
-              <a class="mb-1 btn btn-secondary" href="#" id="10fa08cd-18d0-403e-8752-bd333bedc30d" role="button">
+              <a class="mb-1 btn btn-secondary" href="#" id="f6359b57-a57b-41d5-9b43-c44d2cf8c292" role="button">
                Secondary
               </a>
-              <a class="mb-1 btn btn-success" href="#" id="18177390-3af4-4199-a2eb-1ca3190f630b" role="button">
+              <a class="mb-1 btn btn-success" href="#" id="c83c4007-a9d9-420e-b8aa-0032f0f7defd" role="button">
                Success
               </a>
-              <a class="mb-1 btn btn-warning" href="#" id="3678d0c0-2a44-4c46-8b28-8cc4e360b1d3" role="button">
+              <a class="mb-1 btn btn-warning" href="#" id="3bab04c3-c81b-48ec-bafe-4fe0c18b0c2f" role="button">
                Warning
               </a>
-              <a class="mb-1 btn btn-danger" href="#" id="9ddb4171-75f1-4fb0-aa32-bdfc111b3330" role="button">
+              <a class="mb-1 btn btn-danger" href="#" id="52611602-922e-4f1b-aada-ae68759efee7" role="button">
                Danger
               </a>
-              <a class="mb-1 btn btn-info" href="#" id="1e19d5c3-40ef-4bf8-a10f-0a5dc09aed44" role="button">
+              <a class="mb-1 btn btn-info" href="#" id="2cf7bd01-177b-4f3d-b398-072f3ea26697" role="button">
                Info
               </a>
-              <a class="mb-1 btn btn-light" href="#" id="8c086d34-e445-46a7-a75a-6268d80b0239" role="button">
+              <a class="mb-1 btn btn-light" href="#" id="e542b68d-e4b0-4386-ba1b-5efe7f728abf" role="button">
                Light
               </a>
-              <a class="mb-1 btn btn-dark" href="#" id="5d18ab3c-a760-47a6-9349-8c460736a627" role="button">
+              <a class="mb-1 btn btn-dark" href="#" id="c477b7c7-870d-4b2d-afa6-80a749e81b35" role="button">
                Dark
               </a>
              </div>
@@ -1243,28 +1225,28 @@ panel</code></pre>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="aa84bf71-a33f-4842-9071-71bf87360c88">
-        <div class="mt-3" id="c4ebfee7-b5f1-44f0-b6a4-be1d6dfc63bc">
-         <div id="f14ccc84-af20-477a-8c90-a9232a8b0a71">
+       <div class="tab-pane fade" id="587587c9-5658-49b5-9154-c1c4e67ed59f">
+        <div class="mt-3" id="7496c2b5-ed5d-4774-a345-c584fb83473e">
+         <div id="d8221c2a-d505-414e-be33-88d3d910366a">
           <div class="row">
            <div class="col-md">
-            <div id="2279c6aa-38f6-4a76-9682-affa8a6a5254">
-             <h1 id="e98a359d-868f-4b27-a010-952b24be4065">
+            <div id="56d3d686-bc0a-4a70-9796-66d5360524d1">
+             <h1 id="e4dc292d-1d8f-4520-b8e1-fa50366f89d2">
               Outline
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="4de6c27c-517a-43b6-9495-b86f8a10890c">
+            <div id="b80ff5f8-b919-4b99-8bff-ca955996c598">
             </div>
            </div>
           </div>
          </div>
-         <div id="8da511f9-f5e3-4b17-99ed-cdd4403fa553">
+         <div id="7786b36f-1c9e-41cf-89fd-d4cd1c11a2c8">
           <div class="row">
            <div class="col-md">
-            <div id="2b819368-d440-4cde-8b52-f4e4138590b3">
-             <p id="9d5feaa8-b9ae-4796-a582-8df53174e89e">
+            <div id="0359ee22-89fd-45ae-9aaa-0b94a53d42f1">
+             <p id="ddca9802-add1-442a-8dbf-603107407b5f">
               Make
               <code>
                Button
@@ -1278,8 +1260,8 @@ panel</code></pre>
             </div>
            </div>
            <div class="col-md">
-            <div id="75cc50b7-e893-471a-8207-90e829e90243">
-             <pre id="b79c37d1-7da3-4aa1-9415-f4cd8e584130"><code class="python">from bootwrap import Panel, Button
+            <div id="be2e1bce-76a9-4299-88fb-ac89aec98263">
+             <pre id="33622287-d26f-4640-afcf-8af333bf9c51"><code class="python">from bootwrap import Panel, Button
 panel = Panel(
   Button("Primary").link("#").as_primary().as_outline(),
   Button("Secondary").link("#").as_secondary().as_outline(),
@@ -1293,29 +1275,29 @@ panel = Panel(
 for anchor in panel:
   anchor.mb(1)
 panel</code></pre>
-             <div id="3f739d6b-5f56-4b13-9615-7ca12bddba38">
-              <a class="mb-1 btn btn-outline-primary" href="#" id="400e12ba-5d53-43cb-84bc-176793209042" role="button">
+             <div id="23ff77f2-6b28-429b-9507-da849e0bdc47">
+              <a class="mb-1 btn btn-outline-primary" href="#" id="48d16315-923d-485c-842d-9fc7caf6aaec" role="button">
                Primary
               </a>
-              <a class="mb-1 btn btn-outline-secondary" href="#" id="9845bf3c-3747-4ab2-abf0-3ba422b3f4b8" role="button">
+              <a class="mb-1 btn btn-outline-secondary" href="#" id="b7aac6b1-0a54-4fc1-9a63-29d354404460" role="button">
                Secondary
               </a>
-              <a class="mb-1 btn btn-outline-success" href="#" id="c4022aa8-99d1-46af-a508-295fc3fcb286" role="button">
+              <a class="mb-1 btn btn-outline-success" href="#" id="2fae3351-6480-47a8-8974-d5eea2f80480" role="button">
                Success
               </a>
-              <a class="mb-1 btn btn-outline-warning" href="#" id="ed0ca0fe-5c0a-49b7-8bab-f5a2bdde896c" role="button">
+              <a class="mb-1 btn btn-outline-warning" href="#" id="77f5eb8f-aece-4e31-8dca-22863ce3cd7a" role="button">
                Warning
               </a>
-              <a class="mb-1 btn btn-outline-danger" href="#" id="8df77c13-c055-4429-bb6c-79c969fc7920" role="button">
+              <a class="mb-1 btn btn-outline-danger" href="#" id="61f10bdd-def8-4f10-8c85-1ab0fb38a8d4" role="button">
                Danger
               </a>
-              <a class="mb-1 btn btn-outline-info" href="#" id="7a8a3118-51b7-4485-8b76-58b26c6ad1f7" role="button">
+              <a class="mb-1 btn btn-outline-info" href="#" id="2e91c20a-aedb-4251-bedb-af9171bceae0" role="button">
                Info
               </a>
-              <a class="mb-1 btn btn-outline-light" href="#" id="6b383c88-7798-4bfe-9171-c956d6c1220d" role="button">
+              <a class="mb-1 btn btn-outline-light" href="#" id="7a0192fe-550a-450b-8ec1-48051f709597" role="button">
                Light
               </a>
-              <a class="mb-1 btn btn-outline-dark" href="#" id="993dc635-c1c4-48ba-bdc8-d3b25eb4110b" role="button">
+              <a class="mb-1 btn btn-outline-dark" href="#" id="c86733ed-6a6f-48ec-a5d6-4bd30a446a0b" role="button">
                Dark
               </a>
              </div>
@@ -1325,28 +1307,28 @@ panel</code></pre>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="e48975c4-a46e-4a46-930f-5c993316494a">
-        <div class="mt-3" id="3772f826-c3be-46a7-959a-be7a082f5480">
-         <div id="877228b7-fccd-4a73-8b75-b6f27945cf34">
+       <div class="tab-pane fade" id="33426b73-a51f-4ac1-9afb-a448194e53e6">
+        <div class="mt-3" id="9a739b7a-7265-4d16-b42c-dd68d7031ed2">
+         <div id="ce2f5a1e-feb5-43aa-89bc-f86671f8597f">
           <div class="row">
            <div class="col-md">
-            <div id="d11ea2c2-132f-409e-b0cd-dc5987cb5c86">
-             <h1 id="262d7830-58d5-4701-b899-885d16a5cd87">
+            <div id="8d8b5096-aa4b-46e9-b58f-9b6bfe63af5a">
+             <h1 id="846b6dfd-04c0-4e07-8174-a9e4fa858411">
               Disable
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="ab111151-e0b6-4fb0-b1b7-a6cefe46f4d9">
+            <div id="7bf4c3ce-328a-4607-bd89-d1ccc064c376">
             </div>
            </div>
           </div>
          </div>
-         <div id="97fcb69e-0896-4859-a4cf-731ffdca7e96">
+         <div id="d780bb68-8568-4ecb-85e1-348588a2b112">
           <div class="row">
            <div class="col-md">
-            <div id="b5df903e-f8ed-4edc-be71-ce012142fe47">
-             <p id="7835d40d-8618-4f13-922e-ba6ace536a41">
+            <div id="6f39bda7-5825-4132-9401-bd573add8ea8">
+             <p id="06ba86a0-c588-413a-98df-d6a1cc984de2">
               But default the
               <code>
                Button
@@ -1368,17 +1350,17 @@ panel</code></pre>
             </div>
            </div>
            <div class="col-md">
-            <div id="92bb68c7-3998-4fd9-b0b3-1f5464e7a1a5">
-             <pre id="dbebc215-2fb4-4969-b1f4-629ffc4c2857"><code class="python">from bootwrap import Panel, Button
+            <div id="8f1e01c0-5a41-4be6-a0e1-1c0187dac709">
+             <pre id="d4d08121-4a57-4fef-980e-d8c069971a80"><code class="python">from bootwrap import Panel, Button
 Panel(
   Button("Enabled").as_primary(),
   Button("Disabled").as_primary().as_disabled()
 )</code></pre>
-             <div id="9aaea4bc-f1da-4ea1-a8ef-22b19edb8cc7">
-              <button class="btn btn-primary" id="18712f4a-cfd1-4c1c-95b4-3a46c96dde9a" onclick="return false;">
+             <div id="be2104e6-e143-4b6f-b26e-a3dd610b38fd">
+              <button class="btn btn-primary" id="1437fb5a-3382-44fe-95b1-f6c2fd2db208" onclick="return false;">
                Enabled
               </button>
-              <button class="btn btn-primary" disabled="" id="d3beba25-878a-403c-9697-bf58899421a3" onclick="return false;">
+              <button class="btn btn-primary" disabled="" id="a542f42f-7aef-4eb2-bb2b-8c74a7200ba7" onclick="return false;">
                Disabled
               </button>
              </div>
@@ -1388,28 +1370,28 @@ Panel(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="37597ab4-8a5f-4d03-a442-245997630bd1">
-        <div class="mt-3" id="4e04620f-677a-48c1-8b67-d62675651d31">
-         <div id="f1605106-244c-4a89-95f1-b78101ddd447">
+       <div class="tab-pane fade" id="01fdba8a-2349-4bbd-8cee-790a2b8c4b35">
+        <div class="mt-3" id="657f2bca-ebd6-4303-a00e-fa311650ab2c">
+         <div id="6fa1d624-0e35-4922-94fb-b527952e561a">
           <div class="row">
            <div class="col-md">
-            <div id="8de8f30e-988f-4c97-9fb0-ea18816bae1e">
-             <h1 id="e6ac7269-8743-4188-ad7e-ed4b1d1b8222">
+            <div id="34e14e28-faf0-4d24-802f-c1f2c161a58b">
+             <h1 id="fb45981a-286f-40d7-a0a9-36720ea2df6c">
               Link Resource
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="2a370e4b-51f8-4e1c-b6ee-79e6d04e9b56">
+            <div id="67cbed1c-d239-411d-8805-f7dfb5a0da63">
             </div>
            </div>
           </div>
          </div>
-         <div id="14dd2309-2e01-4bfd-9f17-a796a2b8df98">
+         <div id="a801c137-d827-4876-898b-8ca14d63af66">
           <div class="row">
            <div class="col-md">
-            <div id="2ffc3cfb-1f92-47ba-b60f-79920aedc8c9">
-             <p id="3b0044af-9772-4fc1-9c15-f0d93a9b631c">
+            <div id="d6bf48b8-ee84-4e38-85b8-837d50757bca">
+             <p id="79a4f229-df97-4b42-ba14-84d4a71e705d">
               Associate
               <code>
                Button
@@ -1423,13 +1405,13 @@ Panel(
             </div>
            </div>
            <div class="col-md">
-            <div id="8292610d-d64d-4259-981d-296d413adc56">
-             <pre id="28e1ee62-4ed4-420a-abf8-109cc124a0a7"><code class="python">from bootwrap import Panel, Button
+            <div id="ef206e6e-5065-49eb-96db-1e1978094b12">
+             <pre id="69498c23-fd92-4dce-bd20-405308bd4d7b"><code class="python">from bootwrap import Panel, Button
 Panel(
     Button("Google Search").as_primary().link("https://www.google.com/")
 )</code></pre>
-             <div id="0e75bc3e-20b9-4d68-8ba9-a2475670752f">
-              <a class="btn btn-primary" href="https://www.google.com/" id="568b23d4-b042-480a-8f65-c3ac62aa53ef" role="button">
+             <div id="3e435118-ee12-4046-b34d-b869a7a80f03">
+              <a class="btn btn-primary" href="https://www.google.com/" id="1509f3b5-df2a-43b7-877e-cf885c0a18e0" role="button">
                Google Search
               </a>
              </div>
@@ -1439,28 +1421,28 @@ Panel(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="4b49fba0-552d-43a3-bcb6-6ec877743e51">
-        <div class="mt-3" id="1f8c4696-91de-4cf7-b9ce-07216edb5fc9">
-         <div id="0ec42b4c-c299-45b7-9bb2-c4fbe82b5b28">
+       <div class="tab-pane fade" id="0ca0a4da-fb75-4a79-8926-e8613f04e8e1">
+        <div class="mt-3" id="df800d07-5fde-489e-b9af-9e50f3a3ccdd">
+         <div id="25b6e904-64bf-43aa-9ed2-f6cab19de48d">
           <div class="row">
            <div class="col-md">
-            <div id="4c13d47f-9b85-41c9-abeb-4edff57217aa">
-             <h1 id="6383686b-f071-4ca4-b632-38e3ff0a2767">
+            <div id="5a5f6e86-bfd8-4eb5-a8ce-435682ce55f7">
+             <h1 id="139c6a27-99b4-4700-869f-418db6f43217">
               Open Dialog
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="cb6b0a44-8578-4f44-83bb-63858d9dc40b">
+            <div id="296cd9cd-3f4e-4c89-b601-7a4509885afd">
             </div>
            </div>
           </div>
          </div>
-         <div id="e9a844f2-f2a2-41a3-94f8-d49c79843c9e">
+         <div id="20ab8dbf-4019-4bac-99c8-73005ce34db8">
           <div class="row">
            <div class="col-md">
-            <div id="27f739a6-278b-4fdb-9db5-52f3f3c992f1">
-             <p id="f8ec28ad-e2a2-4266-bfa4-1e025d689abf">
+            <div id="d15a3f63-a327-465d-a297-5bff075b2780">
+             <p id="06e52c91-0532-4181-b7fd-e93274645408">
               Use
               <code>
                Button
@@ -1474,16 +1456,16 @@ Panel(
             </div>
            </div>
            <div class="col-md">
-            <div id="ff0aa9cd-7e62-41ef-aafc-843d57a16ae6">
-             <pre id="5282615f-29fb-4d93-bef1-dd3eac73a245"><code class="python">from bootwrap import Panel, Dialog, Button
+            <div id="ba4fa1e0-774e-4030-be2b-0c2cfcb5d2c0">
+             <pre id="cda421be-2777-43e0-8240-cae53f637845"><code class="python">from bootwrap import Panel, Dialog, Button
 dialog = Dialog(
   "Greeting",
   "Hello World!"
 )
 button = Button("Say Hello").as_primary().toggle(dialog)
 Panel(dialog, button)</code></pre>
-             <div id="aa054f7a-7789-42ba-83d8-fffbf744bc2f">
-              <div class="modal" id="568863d6-b18d-4a59-8f5a-47bfeeed87fc">
+             <div id="ed62e38b-eab7-4da0-8d3f-a4c17fbc99d8">
+              <div class="modal" id="922e7823-c45c-4d59-9c3c-28fcda48786e">
                <div class="modal-dialog" role="document">
                 <div class="modal-content">
                  <div class="modal-header">
@@ -1499,7 +1481,7 @@ Panel(dialog, button)</code></pre>
                 </div>
                </div>
               </div>
-              <button class="btn btn-primary" data-bs-target="#568863d6-b18d-4a59-8f5a-47bfeeed87fc" data-bs-toggle="modal" id="452c50eb-2375-4b9c-8170-14c9c291fe96" onclick="return false;" type="button">
+              <button class="btn btn-primary" data-bs-target="#922e7823-c45c-4d59-9c3c-28fcda48786e" data-bs-toggle="modal" id="97b90032-7530-4e25-9726-37c1727598d3" onclick="return false;" type="button">
                Say Hello
               </button>
              </div>
@@ -1509,28 +1491,28 @@ Panel(dialog, button)</code></pre>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="ba54c9aa-eb24-43c9-8e2f-55ac6e7bafb2">
-        <div class="mt-3" id="747f3b24-7595-433c-9619-05bd65c8541a">
-         <div id="a6da0221-2d23-4f8b-9501-17ff91b3f3be">
+       <div class="tab-pane fade" id="b7eba904-aaaa-4d93-aaab-69113cdd96e4">
+        <div class="mt-3" id="21d4ffc2-efbf-4c2e-b61e-c79af702a388">
+         <div id="10a2d7f0-1485-4186-9810-e19b71aa8179">
           <div class="row">
            <div class="col-md">
-            <div id="b060cfe3-cdde-40d7-9d0a-36c799eccce5">
-             <h1 id="93a11f9c-d4c3-4cac-a05d-005187d75649">
+            <div id="9018cb78-cb87-4f45-89c4-c0074b9c801b">
+             <h1 id="ef94c1b9-dd49-4219-bdf4-ed11a1fb6eaa">
               Close Dialog
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="9fca6eab-40b9-45ad-9b69-dc831d04466e">
+            <div id="a817852d-66c7-4e47-a38f-7fd9fb63fdf4">
             </div>
            </div>
           </div>
          </div>
-         <div id="49af1d2f-044f-4ebb-8cfc-178321257735">
+         <div id="13f5f40e-75f6-447a-9720-b27c51d0251e">
           <div class="row">
            <div class="col-md">
-            <div id="a07fcccd-ffae-4dcd-b9a0-1987d933cbd3">
-             <p id="842d418b-35e9-41a6-ba4c-afa62bc40ca4">
+            <div id="d7efc1ad-2e64-41f9-ad29-0c3600164505">
+             <p id="b5ce42e7-ccc3-4b3e-ab39-6073ac41d4c2">
               Use
               <code>
                Button
@@ -1544,8 +1526,8 @@ Panel(dialog, button)</code></pre>
             </div>
            </div>
            <div class="col-md">
-            <div id="ff0b2712-921a-48a6-8f26-2052154c269a">
-             <pre id="56020af3-f7e5-42c6-9447-95b36e5f9a25"><code class="python">from bootwrap import Panel, Dialog, Button
+            <div id="93c08ffb-491e-4671-8570-2c0e1e3c612d">
+             <pre id="3673494a-4d8b-4f84-84f6-c3c8300c48ed"><code class="python">from bootwrap import Panel, Dialog, Button
 dialog = Dialog(
   "Greeting",
   "Hello World!",
@@ -1553,8 +1535,8 @@ dialog = Dialog(
 )
 button = Button("Say Hello").as_primary().toggle(dialog)  
 Panel(dialog, button)</code></pre>
-             <div id="37406575-6185-4b35-bc06-36474310603e">
-              <div class="modal" id="96bdec6c-bdba-4580-92e8-64d4c71e9032">
+             <div id="252200a3-87c4-445b-8580-8b5b0c33b97c">
+              <div class="modal" id="5529916a-9aed-49e6-a077-5b79693c97d0">
                <div class="modal-dialog" role="document">
                 <div class="modal-content">
                  <div class="modal-header">
@@ -1568,14 +1550,14 @@ Panel(dialog, button)</code></pre>
                   Hello World!
                  </div>
                  <div class="modal-footer">
-                  <button class="btn btn-primary" data-bs-dismiss="modal" id="38184ccf-4f0b-4ffc-a933-712ca774b6cf" onclick="return false;" type="button">
+                  <button class="btn btn-primary" data-bs-dismiss="modal" id="deed277a-443d-40bd-b985-ee15f90b25ac" onclick="return false;" type="button">
                    Bye
                   </button>
                  </div>
                 </div>
                </div>
               </div>
-              <button class="btn btn-primary" data-bs-target="#96bdec6c-bdba-4580-92e8-64d4c71e9032" data-bs-toggle="modal" id="cce7c834-cc7e-45cd-becb-d0a639d30438" onclick="return false;" type="button">
+              <button class="btn btn-primary" data-bs-target="#5529916a-9aed-49e6-a077-5b79693c97d0" data-bs-toggle="modal" id="e7ba9a9f-8960-4051-a39b-3b346f73eb2e" onclick="return false;" type="button">
                Say Hello
               </button>
              </div>
@@ -1585,28 +1567,28 @@ Panel(dialog, button)</code></pre>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="1e2ea340-eeed-4f38-9cdb-40f37c91cdbd">
-        <div class="mt-3" id="f2654a4a-ac33-424e-8509-ff99d5fae9d7">
-         <div id="646861a9-558b-44d3-ac82-88c45f217e83">
+       <div class="tab-pane fade" id="eac617c4-807c-429f-961c-27cf872ba292">
+        <div class="mt-3" id="94bd4603-2899-4833-a7c9-a6e70758c6fe">
+         <div id="62e187ca-8623-44da-a3cd-41b865aadd5a">
           <div class="row">
            <div class="col-md">
-            <div id="1348dc45-ffd4-4c04-a49b-abb4cfa5ac3a">
-             <h1 id="5dd548d6-d1c3-4cfc-839a-1bad03f2247b">
+            <div id="55020c6b-1f35-4292-8f53-59c0de3ec2bd">
+             <h1 id="5b6a6e57-dba7-4c8e-ab2a-ac69ea437d08">
               Expand/Collapse Panel
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="a5c95960-4367-46df-ad96-29b40f24033e">
+            <div id="5ad1ff94-7e3d-45fb-9dd8-bc0dd513b00d">
             </div>
            </div>
           </div>
          </div>
-         <div id="3ecbc0dd-0f0d-420e-a4fa-9b2f2e707b95">
+         <div id="82cb8523-a3f8-4d78-b83b-b7cd690af1c1">
           <div class="row">
            <div class="col-md">
-            <div id="33567aa4-1cd6-4a1a-8a29-bb88c721f660">
-             <p id="cfb20564-4295-444e-a1a8-ab61739b42e9">
+            <div id="726b667d-9685-4648-b5df-c301ebed953d">
+             <p id="4c8a482e-ea93-4e03-8027-f71e0d1b1d87">
               Use
               <code>
                Button
@@ -1620,8 +1602,8 @@ Panel(dialog, button)</code></pre>
             </div>
            </div>
            <div class="col-md">
-            <div id="d4068ddd-0e31-4d50-a6af-bf9016272837">
-             <pre id="338c0d9e-7c39-4f1f-aef4-504ab71ae735"><code class="python">from bootwrap import Panel, Button
+            <div id="5e3d56f1-61f1-4281-abc1-e8d0699837be">
+             <pre id="40dc1e55-9f1d-449d-8820-eb50fc007f9a"><code class="python">from bootwrap import Panel, Button
 quote = Panel(
   "Sometimes life is going to hit you in " +
   "the head with a brick. Don’t lose faith."
@@ -1630,11 +1612,11 @@ Panel(
   Button("Steve Jobs Quote").as_primary().toggle(quote),
   quote
 )</code></pre>
-             <div id="2fb12d71-8d3c-459c-a8b7-3077ba51d025">
-              <button class="btn btn-primary" data-bs-target="#dc75f911-3e82-4ea8-9ead-b45d553532a1" data-bs-toggle="collapse" id="974590b7-9299-408b-8208-88c6038f26c6" onclick="return false;" type="button">
+             <div id="e65f2452-5a3b-463c-9517-cc716f3197c4">
+              <button class="btn btn-primary" data-bs-target="#e5e89890-e8d9-49aa-ba1a-0ec17d5b49cf" data-bs-toggle="collapse" id="514df17a-24dd-4c05-8bd8-8173e69eccb1" onclick="return false;" type="button">
                Steve Jobs Quote
               </button>
-              <div class="collapse" id="dc75f911-3e82-4ea8-9ead-b45d553532a1">
+              <div class="collapse" id="e5e89890-e8d9-49aa-ba1a-0ec17d5b49cf">
                Sometimes life is going to hit you in the head with a brick. Don’t lose faith.
               </div>
              </div>
@@ -1644,28 +1626,28 @@ Panel(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="27626a24-8a6a-4989-aedd-1080b06fe844">
-        <div class="mt-3" id="22901003-f4ae-4494-b2ea-e6a61d5941d7">
-         <div id="12673c9c-53f0-4c3d-9af3-375e4a9228f3">
+       <div class="tab-pane fade" id="1b21c2fc-5145-4fef-b8b3-d597490ffa8e">
+        <div class="mt-3" id="5da298df-8358-43b0-a5f4-207b21678284">
+         <div id="4d4a1818-59fa-4d11-922c-bae06c5f81b5">
           <div class="row">
            <div class="col-md">
-            <div id="766f7ca1-6bf0-4d57-9700-5e8095432620">
-             <h1 id="8104609f-b8b3-49ea-b634-743ff815f6ca">
+            <div id="999d4536-3b1d-41dd-aed1-369bc8c0ace0">
+             <h1 id="1db5c375-6c3a-4a36-b8b3-1773a94cb7dc">
               Submit Action
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="1eccce87-519c-4832-8169-ef803066e944">
+            <div id="0d2fa957-757f-4c3a-8a5c-4a201f8f0cc2">
             </div>
            </div>
           </div>
          </div>
-         <div id="6b1c0e99-35e5-489f-96fc-d32b20b5ae2d">
+         <div id="9894ec0b-861c-406d-9936-263c49faf57f">
           <div class="row">
            <div class="col-md">
-            <div id="b9c177e8-a559-4d2d-b70e-375c2c27237f">
-             <p id="e3cfce6d-2f7b-40d4-9645-02b510a1252e">
+            <div id="deb52d07-299f-4fc0-96f5-6d3d0af630d8">
+             <p id="4494630b-25f6-4b5d-a42d-68c5f49d5fab">
               Use
               <code>
                Button
@@ -1676,7 +1658,7 @@ Panel(
               </code>
               function.
              </p>
-             <p id="7ce25ce4-6040-4f24-bc55-d60eeb8a6f92">
+             <p id="8f9cc125-4b90-4170-9539-6e6ccd3e37be">
               <strong>
                Note:
               </strong>
@@ -1697,22 +1679,22 @@ Panel(
             </div>
            </div>
            <div class="col-md">
-            <div id="87ce1550-1d45-4300-b4cc-25f4a0eeca2c">
-             <pre id="969f4b08-912e-467c-b8d2-a70d63820932"><code class="python">from bootwrap import Form, TextInput, Button
+            <div id="39a15d75-1ae8-448c-9be4-3da93c68504b">
+             <pre id="53621c53-3736-4bda-a2ce-162fa3a7e4df"><code class="python">from bootwrap import Form, TextInput, Button
 Form(
   TextInput("Email", "email", "my@email.com").for_email(),
   Button("Send").as_primary().submit()
 )</code></pre>
-             <form enctype="multipart/form-data" id="e7b843f0-9656-4b71-ac40-e1bafae3e897" method="POST">
+             <form enctype="multipart/form-data" id="7bf7cc8a-308e-4ee7-92e5-71f289703fb5" method="POST">
               <div class="form-group row">
-               <label class="col-sm-4 col-form-label d-flex align-items-center" for="45abf83f-5e2e-4991-904a-d25c4ce511ec">
+               <label class="col-sm-4 col-form-label d-flex align-items-center" for="7986dbb6-3e9e-4cfa-9c2a-b46500c58b35">
                 Email
                </label>
                <div class="col-sm-8 d-flex align-items-center">
-                <input class="form-control" id="45abf83f-5e2e-4991-904a-d25c4ce511ec" name="email" type="email" value="my@email.com"/>
+                <input class="form-control" id="7986dbb6-3e9e-4cfa-9c2a-b46500c58b35" name="email" type="email" value="my@email.com"/>
                </div>
               </div>
-              <button class="btn btn-primary" id="15d9bed4-327c-4b0f-b9a2-bd05eb6c0532" type="submit">
+              <button class="btn btn-primary" id="08cbeaa3-c2b5-404b-8cfe-d078d6187125" type="submit">
                Send
               </button>
              </form>
@@ -1725,59 +1707,57 @@ Form(
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="8e157bd6-d103-4329-9535-47662da84332">
-     <div id="c11854c1-6dc3-46d6-9b75-d5dcc2a12430">
+    <div class="tab-pane fade" id="4938bfa2-8f07-4229-aa6c-0d9152355245">
+     <div id="2a562d27-0a85-44ba-a6b1-bbd9f458bdf8">
       <hr/>
-      <ul class="nav" id="33de85cf-abef-414a-acab-152994d6c637" role="tablist">
+      <ul class="nav" id="89ac25fc-628f-462d-a4d1-53bd4071b60b" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#e1d1f380-1f48-45d5-bef2-54340a3622f5" data-bs-toggle="tab" href="#e1d1f380-1f48-45d5-bef2-54340a3622f5" id="07c1f6b4-3276-4f0a-b2a7-a462e0cba607" role="tab">
-         <span class="text-secondary" id="969b534f-ca5a-4045-bafd-b2f2ed12b3f0">
+        <a class="nav-link active" data-bs-target="#359efbbb-ffe6-422d-8ce4-afec57b6e525" data-bs-toggle="tab" href="#359efbbb-ffe6-422d-8ce4-afec57b6e525" id="37473f30-4af6-48f8-9b8b-8f48a7d15bfc" role="tab">
+         <span class="text-secondary" id="59ce1c00-8ac3-48ff-b585-2f2c994b991f">
           ButtonGroup
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#392bc320-fd95-4ffe-b677-ce7b7ea21ff9" data-bs-toggle="tab" href="#392bc320-fd95-4ffe-b677-ce7b7ea21ff9" id="f2f40518-2561-4793-a699-354833c32b21" role="tab">
-         <span class="text-secondary" id="10083dc1-4134-4b94-8a8c-53d9cabcb515">
+        <a class="nav-link" data-bs-target="#062a6000-8929-4301-a12d-49dd265ad092" data-bs-toggle="tab" href="#062a6000-8929-4301-a12d-49dd265ad092" id="61fc2211-757d-4d70-a64a-5a7db038155e" role="tab">
+         <span class="text-secondary" id="5037e2bb-724d-4de2-81f0-c839e969c069">
           As check boxes
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#2565c47c-daa8-480a-aad6-616158585642" data-bs-toggle="tab" href="#2565c47c-daa8-480a-aad6-616158585642" id="1f8d1c60-2065-4605-96e5-42e959e5680c" role="tab">
-         <span class="text-secondary" id="ad5a28d0-8259-4d12-a47f-55e2ac679404">
+        <a class="nav-link" data-bs-target="#c7e62760-9db4-4e75-880f-8ec85e8ae0b3" data-bs-toggle="tab" href="#c7e62760-9db4-4e75-880f-8ec85e8ae0b3" id="34a47085-3965-4e2e-ac59-06149c032135" role="tab">
+         <span class="text-secondary" id="1cad1eed-efda-4d76-91ad-3881e89d9b54">
           As radio buttons
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="e1d1f380-1f48-45d5-bef2-54340a3622f5">
-        <div class="mt-5" id="4208629d-ddbf-4dbd-bdd5-4f57fd0c3af7">
-         <div class="d-flex justify-content-between" id="9cc0a14c-3f19-4a76-8a64-4c1274f3c401">
-          <h1 id="b2388572-6298-495c-918b-a8402b4242e2">
+       <div class="tab-pane fade active show" id="359efbbb-ffe6-422d-8ce4-afec57b6e525">
+        <div class="mt-5" id="fbe75aa7-97f8-43c2-b5b0-6f128574eee8">
+         <div class="d-flex justify-content-between" id="39674a32-9982-45c2-b3a9-8b7276cd1519">
+          <h1 id="a65265c7-2a22-4920-bda6-3762354dfc18">
            Class
-           <span class="text-primary" id="7cfe381f-cf0b-4f25-a225-85123702c388">
+           <span class="text-primary" id="c8b7c5ab-2c95-4840-822e-26afb07529cc">
             ButtonGroup
            </span>
           </h1>
-          <div id="174a37e0-64cb-4727-b6b1-cd2afa682f7e">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#5aca9691-f403-4203-ba7c-c3d135382be6" data-bs-toggle="collapse" id="c096e452-7734-4dbf-9276-a31951cf516c" onclick="return false;" type="button">
+          <div id="4bdbc189-9328-4752-9fe9-b63ddf67d22f">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#dc90a20d-9a9c-42d2-805d-16fdd514b997" data-bs-toggle="collapse" id="9318a769-0ac4-4412-9594-47b9590b5f9e" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="df2d8a14-ce02-4fee-bf20-c7e300dd6406">
+         <span class="text-muted" id="8f66f1e6-f89c-41d9-9ab3-2e2c176bd834">
           A web component for a button group.
          </span>
-         <pre id="d977de4d-1ac8-41df-bde1-ae7da9faf8a4"><code class="python">ButtonGroup(*buttons)</code></pre>
-         <div class="ms-3 collapse" id="5aca9691-f403-4203-ba7c-c3d135382be6">
-          <h6 id="b7a3d5c5-4001-4ebd-ad56-44f7da93949e">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="ed059b29-f32d-418c-bf74-c2586839bfc3"><code class="python">ButtonGroup(*buttons)</code></pre>
+         <div class="ms-3 collapse" id="dc90a20d-9a9c-42d2-805d-16fdd514b997">
+          <h6 id="1b15e783-081d-4179-98ee-ce961c62626c">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="276e7242-0957-45f8-a0f8-6b5b2264ba2c">
+          <table class="table table-sm bg-light" id="4e3c3626-ce10-4f4d-a894-c5956045089f">
            <thead>
             <tr>
              <th scope="col">
@@ -1814,17 +1794,15 @@ Form(
            </tbody>
           </table>
          </div>
-         <p id="34735b74-84f2-4c71-ac31-6eeb7e9c6bab">
+         <p id="e8cc7155-b1f2-4b0c-ab8b-7061df157455">
           Group a series of buttons together on a single line or stack them in
     a vertical column.
          </p>
-         <div class="ms-3" id="28e82b70-9bdd-4173-b927-800d63bc0f99">
-          <h6 id="3eb29b0a-33ce-43e0-a16e-0330094ffd2d">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="d7beeb5f-a9b5-4b82-85e9-c903acc0f213">
+          <h6 id="4aa38fe2-7896-40e8-84ff-cfde85913bb6">
+           Example
           </h6>
-          <pre id="960c1457-4043-4a2f-a55d-c12eca468368"><code class="python">from bootwrap import Button, ButtonGroup
+          <pre id="362a3f8c-cdbf-43bf-92d4-9e01c1d29309"><code class="python">from bootwrap import Button, ButtonGroup
 
 button1 = Button('One').as_success()
 button2 = Button('Two').as_warning()
@@ -1833,67 +1811,67 @@ button3 = Button('Three').as_danger()
 ButtonGroup(button1, button2, button3)
 </code></pre>
          </div>
-         <div class="ms-3" id="f49978d7-2ae9-45f1-969b-39d442d1aa79">
-          <div class="btn-group" id="89be135b-b334-4556-bc67-c1c288d4c974" role="group">
-           <button class="btn btn-success" id="f71a9279-4df6-47b0-a942-a122bf7f618b" onclick="return false;">
+         <div class="ms-3" id="89980417-2f6d-4762-a6ad-54426cf24a83">
+          <div class="btn-group" id="1ad07b2b-18f2-4285-9129-a028a9f1bc6c" role="group">
+           <button class="btn btn-success" id="ec79c1d1-5fc1-4df5-a144-3e0694822966" onclick="return false;">
             One
            </button>
-           <button class="btn btn-warning" id="61d628c9-bbff-40e6-b4d4-2861692d3294" onclick="return false;">
+           <button class="btn btn-warning" id="5ea5cfc8-7e5e-4add-bf7b-16b8225daaa5" onclick="return false;">
             Two
            </button>
-           <button class="btn btn-danger" id="36309aba-958a-4133-919f-3353974826b1" onclick="return false;">
+           <button class="btn btn-danger" id="25789604-52bf-4c9e-bbab-5aa4d60421b9" onclick="return false;">
             Three
            </button>
           </div>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="392bc320-fd95-4ffe-b677-ce7b7ea21ff9">
-        <div class="mt-3" id="0f6a3de7-f6c7-49ec-a9d9-79c3c878fa30">
-         <div id="4e3afbf1-0f5e-4c1e-b70b-fe4b7354c8c5">
+       <div class="tab-pane fade" id="062a6000-8929-4301-a12d-49dd265ad092">
+        <div class="mt-3" id="578cb7dd-861f-4071-80ec-36146b259125">
+         <div id="16b1c2a3-b426-4d01-bfd8-fa16b5cfa5a0">
           <div class="row">
            <div class="col-md">
-            <div id="830efeec-4024-4def-8bc4-41a4a443af6a">
-             <h1 id="b9d6b65c-e239-4edd-8976-c5fa9b62d37c">
+            <div id="1f8f90cc-db7e-4e1d-9429-6e3b9a5d965c">
+             <h1 id="b8c85f73-c34e-4438-8efd-e414fac21666">
               As check boxes
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="706abd79-3d5f-4951-9fc6-cfb6e3ce2190">
+            <div id="f95c83df-066c-4323-b186-90c44469f815">
             </div>
            </div>
           </div>
          </div>
-         <div id="ce045d35-bf1a-4191-a3b6-01a750b8c839">
+         <div id="e99d70f2-3e37-4391-bb50-34a02d101e24">
           <div class="row">
            <div class="col-md">
-            <div id="0b87f8ab-8155-4a24-9f8d-2af9ed0908c6">
-             <p id="f176a739-05e0-45ba-a9a0-d30f6cdaf050">
+            <div id="8d152868-42ed-4bfc-bebc-668f39def747">
+             <p id="510b56bd-efbb-46e3-ab78-cfcd8e5ee1fa">
               Group a series of buttons together, which act as check boxes.
              </p>
             </div>
            </div>
            <div class="col-md">
-            <div id="78501368-ccab-4683-8f7a-244d904032ed">
-             <pre id="bf0e7597-0ede-4ba6-a026-f0b1163fde6f"><code class="python">from bootwrap import CheckboxInput, ButtonGroup
+            <div id="b6361d4d-5e3c-4fc1-998c-61874162d48e">
+             <pre id="c62b2e30-37a8-4111-8689-64f58cdf9155"><code class="python">from bootwrap import CheckboxInput, ButtonGroup
 
 button1 = CheckboxInput('One', 'opt1').as_button().as_secondary()
 button2 = CheckboxInput('Two', 'opt2').as_button().as_secondary()
 button3 = CheckboxInput('Three', 'opt3').as_button().as_secondary()
 
 ButtonGroup(button1, button2, button3)</code></pre>
-             <div class="btn-group" id="1a9f8618-9c06-4e0c-beba-6e5830c7ee89" role="group">
-              <input autocomplete="off" class="btn-check" id="56a27d56-4db3-44c9-ae69-b1a3da321661" name="opt1" type="checkbox"/>
-              <label class="btn btn-secondary" for="56a27d56-4db3-44c9-ae69-b1a3da321661">
+             <div class="btn-group" id="e9910f49-bbe5-4581-b9fd-768febdbbb52" role="group">
+              <input autocomplete="off" class="btn-check" id="db4cf3b4-91b2-463b-8cb9-2e74069e48ed" name="opt1" type="checkbox"/>
+              <label class="btn btn-secondary" for="db4cf3b4-91b2-463b-8cb9-2e74069e48ed">
                One
               </label>
-              <input autocomplete="off" class="btn-check" id="4fe067e3-7786-4897-bf4f-ef60d542d730" name="opt2" type="checkbox"/>
-              <label class="btn btn-secondary" for="4fe067e3-7786-4897-bf4f-ef60d542d730">
+              <input autocomplete="off" class="btn-check" id="42416d9a-26e2-472e-ac19-64fc2d6d57eb" name="opt2" type="checkbox"/>
+              <label class="btn btn-secondary" for="42416d9a-26e2-472e-ac19-64fc2d6d57eb">
                Two
               </label>
-              <input autocomplete="off" class="btn-check" id="5c905e7c-58b5-4c47-8f51-a28089c13eb5" name="opt3" type="checkbox"/>
-              <label class="btn btn-secondary" for="5c905e7c-58b5-4c47-8f51-a28089c13eb5">
+              <input autocomplete="off" class="btn-check" id="5d0f0c06-a25e-4317-abd7-768f95cc1a35" name="opt3" type="checkbox"/>
+              <label class="btn btn-secondary" for="5d0f0c06-a25e-4317-abd7-768f95cc1a35">
                Three
               </label>
              </div>
@@ -1903,52 +1881,52 @@ ButtonGroup(button1, button2, button3)</code></pre>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="2565c47c-daa8-480a-aad6-616158585642">
-        <div class="mt-3" id="8afc91de-e626-4302-88d6-c51f60461f80">
-         <div id="7fcafa7e-1f96-4f87-8c2f-974177c7f1a8">
+       <div class="tab-pane fade" id="c7e62760-9db4-4e75-880f-8ec85e8ae0b3">
+        <div class="mt-3" id="3cffd2cb-c4e7-44ab-a39a-d215341d3432">
+         <div id="a0a37322-bd1f-41aa-b6d1-83fc25317059">
           <div class="row">
            <div class="col-md">
-            <div id="204a7fe0-fc75-4ee9-982d-4317b2c543f9">
-             <h1 id="a3884a49-2fe0-4945-8cab-3d87c77f9eda">
+            <div id="0d57a45e-76f2-4f5d-a1c1-eb1f4c597af4">
+             <h1 id="0bcf9cbf-2bbe-4f3c-a344-f331cb6a238c">
               As radio buttons
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="14573534-e631-403d-b442-d6c1403f6935">
+            <div id="03ad2d31-3f90-4d30-9d7e-40659e6373e3">
             </div>
            </div>
           </div>
          </div>
-         <div id="3589f3f2-fd70-4b07-9bfe-f3e15c31b1c8">
+         <div id="ad9b3e68-6ea8-42f7-aaf1-9933e9ad99d1">
           <div class="row">
            <div class="col-md">
-            <div id="e9506400-04f2-42b1-a787-a8bcdf2eabbd">
-             <p id="14bc5947-5514-4f65-94e3-771eac0389ea">
+            <div id="0db5e43c-79a3-4592-b88a-779520840e27">
+             <p id="2e5db55f-27ee-47fa-b4fe-a26ec53ac1ae">
               Group a series of buttons together, which act as radio buttons.
              </p>
             </div>
            </div>
            <div class="col-md">
-            <div id="98b093be-08ec-4e18-8a8f-96f8152aa8b2">
-             <pre id="431b1dfe-aa3f-478b-833f-52979f823ab9"><code class="python">from bootwrap import CheckboxInput, ButtonGroup
+            <div id="916846e3-40ff-4fa0-b93a-c05dd72bce81">
+             <pre id="cea9e5a3-70ec-4052-be7d-592785113ec4"><code class="python">from bootwrap import CheckboxInput, ButtonGroup
 
 button1 = CheckboxInput('One', 'opt').as_radio(1).as_button().as_secondary()
 button2 = CheckboxInput('Two', 'opt').as_radio(2).as_button().as_secondary()
 button3 = CheckboxInput('Three', 'opt').as_radio(3).as_button().as_secondary()
 
 ButtonGroup(button1, button2, button3)</code></pre>
-             <div class="btn-group" id="e9d9e9ec-3950-415b-9a87-475864316b57" role="group">
-              <input autocomplete="off" class="btn-check" id="26edf89a-1a3a-4fe5-97b4-94f0b5a6b36b" name="opt" type="radio" value="1"/>
-              <label class="btn btn-secondary" for="26edf89a-1a3a-4fe5-97b4-94f0b5a6b36b">
+             <div class="btn-group" id="603eb475-6a82-4923-8e64-f4dceb496ded" role="group">
+              <input autocomplete="off" class="btn-check" id="47859c80-f3c7-4219-bd6f-1c130e60a7d9" name="opt" type="radio" value="1"/>
+              <label class="btn btn-secondary" for="47859c80-f3c7-4219-bd6f-1c130e60a7d9">
                One
               </label>
-              <input autocomplete="off" class="btn-check" id="b0db000d-c3d9-460c-8349-6de20b61c8f7" name="opt" type="radio" value="2"/>
-              <label class="btn btn-secondary" for="b0db000d-c3d9-460c-8349-6de20b61c8f7">
+              <input autocomplete="off" class="btn-check" id="f856406d-3cf4-4d24-acc5-a9e1ab029053" name="opt" type="radio" value="2"/>
+              <label class="btn btn-secondary" for="f856406d-3cf4-4d24-acc5-a9e1ab029053">
                Two
               </label>
-              <input autocomplete="off" class="btn-check" id="31ffd787-d73f-4aaf-98fa-d0effe1393f7" name="opt" type="radio" value="3"/>
-              <label class="btn btn-secondary" for="31ffd787-d73f-4aaf-98fa-d0effe1393f7">
+              <input autocomplete="off" class="btn-check" id="09b2ed93-734d-40e9-95ad-c7b1f5966daf" name="opt" type="radio" value="3"/>
+              <label class="btn btn-secondary" for="09b2ed93-734d-40e9-95ad-c7b1f5966daf">
                Three
               </label>
              </div>
@@ -1961,52 +1939,50 @@ ButtonGroup(button1, button2, button3)</code></pre>
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="f6e84fc0-6c41-4e5f-b9a4-97538408ae7f">
-     <div id="9ef582c5-128b-4b22-85bc-be132f7ec18a">
+    <div class="tab-pane fade" id="8d85f898-cbcc-42b6-a7cc-b068ba70673f">
+     <div id="5fd8a600-836b-4dda-bd38-5750afae41f5">
       <hr/>
-      <ul class="nav" id="6bec4459-9e42-46d3-8d2d-39e6d7819191" role="tablist">
+      <ul class="nav" id="7776f8c1-0cb8-4618-84c5-fe15c4fb1f47" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#636571b2-b009-46e1-8def-6c6a1dbb59e9" data-bs-toggle="tab" href="#636571b2-b009-46e1-8def-6c6a1dbb59e9" id="3c1528e5-a89e-4f25-a188-6eb0f1a781f4" role="tab">
-         <span class="text-secondary" id="98bcc4cb-91a4-4709-ac05-9e9a6dc012b0">
+        <a class="nav-link active" data-bs-target="#2fcfa28f-2fd5-468a-8833-953d71094f76" data-bs-toggle="tab" href="#2fcfa28f-2fd5-468a-8833-953d71094f76" id="dc818624-b2b2-4f5f-a544-b345718be7c7" role="tab">
+         <span class="text-secondary" id="f71692b4-7cce-4691-ba7e-57db9b995d8f">
           Deck
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#31e7a614-be46-41be-92ec-f8b9135bef87" data-bs-toggle="tab" href="#31e7a614-be46-41be-92ec-f8b9135bef87" id="792e2189-3383-4702-bc02-b46b0d619e3c" role="tab">
-         <span class="text-secondary" id="525123e2-01ac-4d03-bd33-efd0302a6017">
+        <a class="nav-link" data-bs-target="#438be98d-85f5-4c0e-8d7e-fc8c1a57be88" data-bs-toggle="tab" href="#438be98d-85f5-4c0e-8d7e-fc8c1a57be88" id="73ff5618-4665-42fd-9f67-bcd49008813d" role="tab">
+         <span class="text-secondary" id="65ee22db-82b6-4b4f-96cd-0a7c198fa730">
           Deck.Card
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="636571b2-b009-46e1-8def-6c6a1dbb59e9">
-        <div class="mt-5" id="7f5b4556-4f3b-4983-a610-0a4198355e34">
-         <div class="d-flex justify-content-between" id="24a1ca7e-2b93-4d08-a388-b073f6bed53d">
-          <h1 id="53463119-005b-48ae-bd88-3e641117eb14">
+       <div class="tab-pane fade active show" id="2fcfa28f-2fd5-468a-8833-953d71094f76">
+        <div class="mt-5" id="3df132bf-d800-487e-a6cc-dbb89587c8bc">
+         <div class="d-flex justify-content-between" id="292c455a-2c50-4a6e-80fe-1911ed20b48a">
+          <h1 id="b3f7933f-51a3-4d37-ba0e-52bfada7a461">
            Class
-           <span class="text-primary" id="b38d13dc-0090-4b77-9ce6-164175c1a779">
+           <span class="text-primary" id="3601755a-fbde-4682-913e-9eb42e888fea">
             Deck
            </span>
           </h1>
-          <div id="d38b877d-0b6e-4484-90ae-82464b325a0d">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#611352cc-78a0-4701-8083-dcc056f055f9" data-bs-toggle="collapse" id="15018d7d-93ec-4589-b51e-ff66e5e24362" onclick="return false;" type="button">
+          <div id="daba497d-8aca-4197-8e4a-06b5ea28494c">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#a64f0746-9607-49e8-be15-4ae4b46ede8c" data-bs-toggle="collapse" id="c3695944-f77f-473b-8162-36d7187e8996" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="8ec8590f-00e1-4142-a5cf-a947d2be70bd">
+         <span class="text-muted" id="e5598e00-606e-4f9a-97a0-0f4221678b14">
           A web component for a deck of cards.
          </span>
-         <pre id="79966636-ff12-42c0-80ea-85c37724d175"><code class="python">Deck(*cards)</code></pre>
-         <div class="ms-3 collapse" id="611352cc-78a0-4701-8083-dcc056f055f9">
-          <h6 id="aad42a7f-ef91-44d2-ac42-16bc5e2c3bcd">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="78aaa2c1-a734-486b-9df1-8cd5ed655a51"><code class="python">Deck(*cards)</code></pre>
+         <div class="ms-3 collapse" id="a64f0746-9607-49e8-be15-4ae4b46ede8c">
+          <h6 id="bb2e12c0-57a0-4308-8816-ba5510300d18">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="e5861bdd-1eef-4b67-8731-8fedb1c3ecaa">
+          <table class="table table-sm bg-light" id="804cf6fc-6151-4690-8e3c-ed70fb5305ed">
            <thead>
             <tr>
              <th scope="col">
@@ -2047,13 +2023,11 @@ ButtonGroup(button1, button2, button3)</code></pre>
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="73aa825e-beb6-4bae-b708-023dc4bafe85">
-          <h6 id="584bbfe5-d338-4de6-bb12-117aee9315c9">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="271b64a1-13a2-48f5-84bd-0c85894e69a8">
+          <h6 id="09692217-dd15-47b7-a6d2-5def9aa676c7">
+           Example
           </h6>
-          <pre id="b24586ab-0a37-454f-ad07-0aedb02aecc7"><code class="python">from bootwrap import Button, Deck, Image
+          <pre id="fe237d66-e2d8-4c25-b9ca-01dfa9754bb3"><code class="python">from bootwrap import Button, Deck, Image
 
 actions = [
     Button("Buy"),
@@ -2086,107 +2060,101 @@ Deck(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="ae914aaf-debe-463b-8a7e-72ad804dd43f">
-          <div class="card-deck grid-container" id="c26aace2-e6f3-4d4d-b33b-cbc51205c37c">
-           <div class="card" id="fdfeb68b-a8a1-40c1-b34a-37d2c90ccc0b">
+         <div class="ms-3" id="f35c6a5f-8eef-497a-8a00-b7d7d42cdcfc">
+          <div class="card-deck grid-container" id="23ba39cd-f24e-45ed-a603-cb1b81c1c20b">
+           <div class="card" id="5c56747a-a2ae-44e9-ae03-0b4811522c3c">
             <a onclick="location.href='https://www.google.com';">
-             <img class="mt-3 card-img-top" id="250b33ac-96e3-40a8-86ca-5240ff47154e" src="google-logo.png" width="128"/>
+             <img class="mt-3 card-img-top" id="9e07ed9e-05af-4057-a00a-b794284b5da6" src="google-logo.png" width="128"/>
             </a>
             <div class="card-body" onclick="location.href='https://www.google.com';">
              <div class="text-right mb-2">
-              <span class="text-muted" id="19d99d82-fe86-4df8-bacf-cbcdc732e725">
-               <small>
-                12:04:58 12/01/2021
-               </small>
-              </span>
+              <small class="text-muted" id="d8e1b5f0-4a47-4c83-a044-2b5a2edbf744">
+               12:04:58 12/01/2021
+              </small>
              </div>
-             <h5 class="card-title" id="b8fd485f-a92b-4c98-a5ff-82a743611101">
+             <h5 class="card-title" id="8e7b2582-81d9-41cf-b3d8-ca45dda632f1">
               Google (NASDAQ: GOOGL)
              </h5>
              Price for a single Google share
             </div>
             <div class="card-footer text-right">
              <div class="btn-group">
-              <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="2aef43fa-f43c-4068-95fc-8533ad569085" onclick="return false;" style="cursor: pointer">
+              <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="bcc238f7-6e2e-4e45-bd3e-40749f0416f3" onclick="return false;" style="cursor: pointer">
               </i>
               <div class="dropdown-menu dropdown-menu-right">
-               <button class="dropdown-item btn" id="d9d1c337-c57a-4501-ad63-c2a7b81adcf8" onclick="return false;">
+               <button class="dropdown-item btn" id="ce33b862-e367-40de-bbc4-93c5d09ff55c" onclick="return false;">
                 Buy
                </button>
-               <button class="dropdown-item btn" id="36518ed0-cdb2-4a34-bd03-d387cd7313d4" onclick="return false;">
+               <button class="dropdown-item btn" id="264e73f4-6bdd-4531-a2ca-aa433d24be52" onclick="return false;">
                 Sell
                </button>
-               <button class="dropdown-item btn" id="639b44bf-720b-4080-bab9-40eb5ec9d6a5" onclick="return false;">
+               <button class="dropdown-item btn" id="62982e00-58a8-417c-9c12-fbe9d45c8ddd" onclick="return false;">
                 Transfer
                </button>
               </div>
              </div>
             </div>
            </div>
-           <div class="card" id="a700884c-04c5-4b4e-9f95-68c849c7563e">
+           <div class="card" id="58865ad0-bcdd-439e-9f9f-810720496e35">
             <a onclick="location.href='https://www.linkedin.com';">
-             <img class="mt-3 card-img-top" id="9cf20242-deac-4d3b-a476-cec59aae97ac" src="linkedin-logo.png" width="128"/>
+             <img class="mt-3 card-img-top" id="4584c08c-9f08-41bf-ab78-c36be470713c" src="linkedin-logo.png" width="128"/>
             </a>
             <div class="card-body" onclick="location.href='https://www.linkedin.com';">
              <div class="text-right mb-2">
-              <span class="text-muted" id="8cb1101b-18ee-42af-a8eb-b54c8bc70f8b">
-               <small>
-                12:04:58 12/01/2021
-               </small>
-              </span>
+              <small class="text-muted" id="ab4c02bb-ebbf-41b3-bd96-76b2a5d0f021">
+               12:04:58 12/01/2021
+              </small>
              </div>
-             <h5 class="card-title" id="ea99f021-eb48-43e6-a2af-05b86eb1bb9d">
+             <h5 class="card-title" id="5abdbd48-788c-403a-8ca8-a803b28fb9c9">
               LinkedIn (NASDAQ: LNKD)
              </h5>
              Price for a single LinkedIn share
             </div>
             <div class="card-footer text-right">
              <div class="btn-group">
-              <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="7e99bb9a-7760-4181-a12c-6550e39c2124" onclick="return false;" style="cursor: pointer">
+              <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="5c913643-3c05-44bd-a6fe-e1b85374fd70" onclick="return false;" style="cursor: pointer">
               </i>
               <div class="dropdown-menu dropdown-menu-right">
-               <button class="dropdown-item btn" id="d9d1c337-c57a-4501-ad63-c2a7b81adcf8" onclick="return false;">
+               <button class="dropdown-item btn" id="ce33b862-e367-40de-bbc4-93c5d09ff55c" onclick="return false;">
                 Buy
                </button>
-               <button class="dropdown-item btn" id="36518ed0-cdb2-4a34-bd03-d387cd7313d4" onclick="return false;">
+               <button class="dropdown-item btn" id="264e73f4-6bdd-4531-a2ca-aa433d24be52" onclick="return false;">
                 Sell
                </button>
-               <button class="dropdown-item btn" id="639b44bf-720b-4080-bab9-40eb5ec9d6a5" onclick="return false;">
+               <button class="dropdown-item btn" id="62982e00-58a8-417c-9c12-fbe9d45c8ddd" onclick="return false;">
                 Transfer
                </button>
               </div>
              </div>
             </div>
            </div>
-           <div class="card" id="892894f9-4ac3-45ed-aa37-e99f106bd36b">
+           <div class="card" id="8bd87414-e555-403e-8050-22c3c6ef45b2">
             <a onclick="location.href='https://www.amazon.com';">
-             <img class="mt-3 card-img-top" id="86616672-e050-4924-9d37-e708b2ee1537" src="amazon-logo.png" width="128"/>
+             <img class="mt-3 card-img-top" id="2da6a11a-abac-4271-a60f-95d7d8dc1e24" src="amazon-logo.png" width="128"/>
             </a>
             <div class="card-body" onclick="location.href='https://www.amazon.com';">
              <div class="text-right mb-2">
-              <span class="text-muted" id="3cfd5b10-69aa-4614-985b-08d4ce86ab6b">
-               <small>
-                12:04:58 12/01/2021
-               </small>
-              </span>
+              <small class="text-muted" id="6f25ec83-a109-4d94-82a0-8d79119fc211">
+               12:04:58 12/01/2021
+              </small>
              </div>
-             <h5 class="card-title" id="6358abba-8213-4f61-ad7e-b6f91d1bfe0b">
+             <h5 class="card-title" id="abd3fe98-0041-47b8-97b3-7c0214a833d4">
               Amazon (NASDAQ: AMZN)
              </h5>
              Price for a single Amazon share
             </div>
             <div class="card-footer text-right">
              <div class="btn-group">
-              <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="d1e64012-df5d-4dfe-8303-8e0377bc09a6" onclick="return false;" style="cursor: pointer">
+              <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="f0255fac-1351-401d-86ce-4952e02166af" onclick="return false;" style="cursor: pointer">
               </i>
               <div class="dropdown-menu dropdown-menu-right">
-               <button class="dropdown-item btn" id="d9d1c337-c57a-4501-ad63-c2a7b81adcf8" onclick="return false;">
+               <button class="dropdown-item btn" id="ce33b862-e367-40de-bbc4-93c5d09ff55c" onclick="return false;">
                 Buy
                </button>
-               <button class="dropdown-item btn" id="36518ed0-cdb2-4a34-bd03-d387cd7313d4" onclick="return false;">
+               <button class="dropdown-item btn" id="264e73f4-6bdd-4531-a2ca-aa433d24be52" onclick="return false;">
                 Sell
                </button>
-               <button class="dropdown-item btn" id="639b44bf-720b-4080-bab9-40eb5ec9d6a5" onclick="return false;">
+               <button class="dropdown-item btn" id="62982e00-58a8-417c-9c12-fbe9d45c8ddd" onclick="return false;">
                 Transfer
                </button>
               </div>
@@ -2202,32 +2170,30 @@ Deck(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="31e7a614-be46-41be-92ec-f8b9135bef87">
-        <div class="mt-5" id="688de1eb-a477-49eb-845d-e234fe3c2d15">
-         <div class="d-flex justify-content-between" id="efbad014-6b3c-4b3a-b2bc-e91149ebc7ea">
-          <h1 id="3858f565-298b-4d7a-864e-13d68cbd0646">
+       <div class="tab-pane fade" id="438be98d-85f5-4c0e-8d7e-fc8c1a57be88">
+        <div class="mt-5" id="65aab546-86b8-4874-9d4e-b313e14c11dc">
+         <div class="d-flex justify-content-between" id="2c97458a-f2c3-498c-a7bd-22a932f62f70">
+          <h1 id="cdb14df6-41d8-4432-b283-ee0945035d27">
            Class
-           <span class="text-primary" id="521555ea-6f70-4b2c-8dce-6a025e902c1e">
+           <span class="text-primary" id="e9eedc41-dc66-4c1e-a873-c2881c9af52c">
             Deck.Card
            </span>
           </h1>
-          <div id="3e5951f5-f763-4699-bf36-9941e18b0249">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#887c959a-531f-4046-bf59-c4ef8e7e0ac4" data-bs-toggle="collapse" id="b8eb4e85-c810-4019-a90d-2d7fe6b7dbff" onclick="return false;" type="button">
+          <div id="4a7c71f7-712d-45bf-9d36-45c4ed01436e">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#6469bf25-f1d6-496a-b27c-7d76497bb6cd" data-bs-toggle="collapse" id="170f7748-71bf-4f9f-a972-78599be640ff" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="d8f61bd2-818e-4172-a384-4d14798d3d93">
+         <span class="text-muted" id="3073ebb2-d4ea-4389-b34d-0f24555c2633">
           A deck card.
          </span>
-         <pre id="80a75e7a-5fcd-4f3c-a627-40a5ef9bbf30"><code class="python">Deck.Card(title, description=None, marker=None, figure=None)</code></pre>
-         <div class="ms-3 collapse" id="887c959a-531f-4046-bf59-c4ef8e7e0ac4">
-          <h6 id="20096573-9f1a-46c8-8b21-dd373e621d97">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="96210ad8-e9ae-42d2-9ac6-91fa0f601a39"><code class="python">Deck.Card(title, description=None, marker=None, figure=None)</code></pre>
+         <div class="ms-3 collapse" id="6469bf25-f1d6-496a-b27c-7d76497bb6cd">
+          <h6 id="def62cd4-b7e1-4310-b5c5-3db095b3cff2">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="44c354f9-dcb9-4720-9388-d76774b51057">
+          <table class="table table-sm bg-light" id="1b7f4d66-062a-48e7-9401-7a6260e11d39">
            <thead>
             <tr>
              <th scope="col">
@@ -2305,13 +2271,11 @@ Deck(
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="15f6c590-d720-4618-952f-32d81a922e08">
-          <h6 id="bfebef42-1453-4abf-9219-e3153246ab0a">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="fbc6e91e-1507-46c7-84a4-0a9f01a22e3e">
+          <h6 id="d3c3fba6-dcf5-4ca4-8c05-bb23b182591f">
+           Example
           </h6>
-          <pre id="6a16dac6-dcac-4f46-9157-3ed235e0d87f"><code class="python">from bootwrap import Button, Deck, Image
+          <pre id="6624daf1-3d4b-434e-be5c-6ef7a35b6c9e"><code class="python">from bootwrap import Button, Deck, Image
 
 actions = [
     Button("Buy"),
@@ -2328,59 +2292,55 @@ Deck.Card(
     "https://www.google.com")
 </code></pre>
          </div>
-         <div class="ms-3" id="582cc7fd-5aee-470e-adcf-8add98966f6f">
-          <div class="card" id="0eeb427b-30df-44af-ad2c-b9e8527e2d9c">
+         <div class="ms-3" id="41da4c7e-f6d0-443a-bebe-ca2f3a625bc5">
+          <div class="card" id="64cf2628-3b37-4231-a416-bb285931538b">
            <a onclick="location.href='https://www.google.com';">
-            <img class="mt-3 card-img-top" id="70a88f2e-c04f-41b9-9203-e8f5556fac7a" src="google-logo.png" width="128"/>
+            <img class="mt-3 card-img-top" id="6736e432-9c13-48b8-8442-691ceb018c02" src="google-logo.png" width="128"/>
            </a>
            <div class="card-body" onclick="location.href='https://www.google.com';">
             <div class="text-right mb-2">
-             <span class="text-muted" id="f688e13c-11c7-4f11-ba5f-bec231a66277">
-              <small>
-               12:04:58 12/01/2021
-              </small>
-             </span>
+             <small class="text-muted" id="3d62e94e-365d-405e-8a59-92a0b4e34280">
+              12:04:58 12/01/2021
+             </small>
             </div>
-            <h5 class="card-title" id="b3fa3cf2-dd31-49c9-8f9c-381b9769b44a">
+            <h5 class="card-title" id="c3154e66-01a6-4d34-9a99-0424f25796cb">
              Google (NASDAQ: GOOGL)
             </h5>
             Price for a single Google share
            </div>
            <div class="card-footer text-right">
-            <button class="btn" id="e3f7b132-db63-4953-9a4c-c296cb167a84" onclick="return false;">
+            <button class="btn" id="09717b71-f293-4e9c-812a-a4785950b2a4" onclick="return false;">
              Buy
             </button>
-            <button class="btn" id="f340f923-8906-4d58-9d05-93297db4b176" onclick="return false;">
+            <button class="btn" id="6a363fc6-c2c0-420b-8a31-7590df952998" onclick="return false;">
              Sell
             </button>
-            <button class="btn" id="881df0a0-7756-4b98-a539-1a8080db3f13" onclick="return false;">
+            <button class="btn" id="67cc3576-c79e-437e-b97f-15d4147343c8" onclick="return false;">
              Transfer
             </button>
            </div>
           </div>
          </div>
-         <div class="mt-5" id="6754c46c-394a-4824-b932-5451822a5153">
-          <div class="d-flex justify-content-between" id="51d1007c-fe02-43a3-bb81-b5d5d2874aa5">
-           <h4 id="7fd0939d-59cd-4d0b-9a77-144d025a86d1">
+         <div class="mt-5" id="eea9cdc0-2da5-4ff3-b6ab-1bf684f8b4bd">
+          <div class="d-flex justify-content-between" id="be7520b0-d356-4459-8182-f63fa5f69ae3">
+           <h4 id="3cab487c-afcb-47cf-b483-d8e21f0b135e">
             Method
-            <span class="text-primary" id="b614ce18-4871-47f8-8c1f-58402bd2c909">
+            <span class="text-primary" id="c4849afb-8fd8-437e-8408-e07cb2dee50a">
              pack_actions
             </span>
            </h4>
-           <div id="b3cf756d-4415-4575-8775-738fb0719f2d">
+           <div id="8069faa0-5403-4fcd-820b-9a60855ed6d8">
            </div>
           </div>
-          <span class="text-muted" id="4fef026e-36b4-4752-8a06-135504e3d01e">
+          <span class="text-muted" id="1f3af722-0311-43db-bf3c-766bd309f08f">
            Makes item actions packed under a drop-down menu.
           </span>
-          <pre id="a4eea9a0-048a-49cb-8704-871cc6425b39"><code class="python">pack_actions()</code></pre>
-          <div class="ms-3" id="18e9fea0-2ac8-4b4f-b802-b52f2236ed2e">
-           <h6 id="db613381-6ba6-404d-8fd7-805c5701353f">
-            <strong>
-             Example
-            </strong>
+          <pre id="a80d1773-c0bd-46da-bbf2-180d45e58b3e"><code class="python">pack_actions()</code></pre>
+          <div class="ms-3" id="7a71a94d-a66d-4058-a6f1-ab2ed66c3386">
+           <h6 id="1625455d-c0fa-463a-8a47-ef9aaab392fd">
+            Example
            </h6>
-           <pre id="e6466be6-4b53-46e5-9053-c743c70743d4"><code class="python">from bootwrap import Button, Deck, Image
+           <pre id="4133b505-73bc-4f46-9a85-8bce6eb9e7fb"><code class="python">from bootwrap import Button, Deck, Image
 
 actions = [
     Button("Buy"),
@@ -2397,36 +2357,34 @@ Deck.Card(
     "https://www.google.com")
 </code></pre>
           </div>
-          <div class="ms-3" id="c8d91c9c-8db8-437f-8cc5-c24925a26a0b">
-           <div class="card" id="5d2f4e35-bcb6-43d1-a2b7-2dd4ccd8ee4b">
+          <div class="ms-3" id="874d659f-ee99-4f1d-92db-264dc59486f0">
+           <div class="card" id="5112414f-9c20-4a23-801d-afc5c20b1744">
             <a onclick="location.href='https://www.google.com';">
-             <img class="mt-3 card-img-top" id="e65a6abc-36bf-42b1-8db9-481375ca6f0e" src="google-logo.png" width="128"/>
+             <img class="mt-3 card-img-top" id="50e34f9e-3108-4ac3-92a8-b3020b2609c3" src="google-logo.png" width="128"/>
             </a>
             <div class="card-body" onclick="location.href='https://www.google.com';">
              <div class="text-right mb-2">
-              <span class="text-muted" id="2b1dc6d2-7d7a-4fa1-a9c8-6dd8768e656e">
-               <small>
-                12:04:58 12/01/2021
-               </small>
-              </span>
+              <small class="text-muted" id="64f2367a-c5f5-4970-ab5c-f58039d6b795">
+               12:04:58 12/01/2021
+              </small>
              </div>
-             <h5 class="card-title" id="0906819d-a1cd-4717-8307-537e3af1a400">
+             <h5 class="card-title" id="2f6cf635-c67c-4e3b-963f-d3ee0d91c0bd">
               Google (NASDAQ: GOOGL)
              </h5>
              Price for a single Google share
             </div>
             <div class="card-footer text-right">
              <div class="btn-group">
-              <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="339aebbf-3b97-413b-bc2c-e31671be932a" onclick="return false;" style="cursor: pointer">
+              <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="00d2f1e4-7d89-466e-8ac9-45bbec19b6b3" onclick="return false;" style="cursor: pointer">
               </i>
               <div class="dropdown-menu dropdown-menu-right">
-               <button class="dropdown-item btn" id="71a275e8-af91-4d98-a9f0-5a19b2dd7223" onclick="return false;">
+               <button class="dropdown-item btn" id="be4216fe-c0c6-42f7-8c5d-8adf303dc547" onclick="return false;">
                 Buy
                </button>
-               <button class="dropdown-item btn" id="df701593-d7e3-443a-aae6-65512f4b85f8" onclick="return false;">
+               <button class="dropdown-item btn" id="b5ffd09b-9609-4ef4-9e97-73e55f978c39" onclick="return false;">
                 Sell
                </button>
-               <button class="dropdown-item btn" id="2c560d07-4f45-4102-bb0a-5c86a20b7547" onclick="return false;">
+               <button class="dropdown-item btn" id="ddb935bd-2ae9-4bab-81ee-a111e8d64911" onclick="return false;">
                 Transfer
                </button>
               </div>
@@ -2440,59 +2398,57 @@ Deck.Card(
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="87743293-9169-46e5-8042-9ff18cb6b930">
-     <div id="7f2d5af9-7810-4d3c-86d9-f57483ec8e50">
+    <div class="tab-pane fade" id="f7989b01-74e3-44dc-9940-e61551120f41">
+     <div id="1ba742f5-9bd7-474c-9f83-ad921e086adc">
       <hr/>
-      <ul class="nav" id="d519e912-1ec7-4136-88a3-090e98f6c82a" role="tablist">
+      <ul class="nav" id="6cf13e0a-9347-43f7-b5fc-a2fc56717c6c" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#9f99208d-68a4-4f68-bfaf-efe950df4f4e" data-bs-toggle="tab" href="#9f99208d-68a4-4f68-bfaf-efe950df4f4e" id="3247b12d-30ad-469c-ae92-f44ae7889660" role="tab">
-         <span class="text-secondary" id="6ba83c0b-5072-4e87-ae36-1ddb36699ba0">
+        <a class="nav-link active" data-bs-target="#8a52f7ce-e952-4645-a0e9-3d25aa077418" data-bs-toggle="tab" href="#8a52f7ce-e952-4645-a0e9-3d25aa077418" id="44ed285b-ad47-4294-b1a8-6a88a10caf62" role="tab">
+         <span class="text-secondary" id="54b7b1da-0069-4429-91b5-068aa417448f">
           Dialog
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#ab6d06f3-5102-472a-bc70-de394c39235a" data-bs-toggle="tab" href="#ab6d06f3-5102-472a-bc70-de394c39235a" id="27149865-d595-477e-beaa-e59a272ce2d1" role="tab">
-         <span class="text-secondary" id="ec0b7bd3-6a29-494a-852f-5c3a2b16a4cb">
+        <a class="nav-link" data-bs-target="#ad2c3d44-9d58-419d-bd1d-1d4c5787c89a" data-bs-toggle="tab" href="#ad2c3d44-9d58-419d-bd1d-1d4c5787c89a" id="1656e6ec-23fb-4b2d-8387-039bdcca4b5f" role="tab">
+         <span class="text-secondary" id="2c1ff1ab-8618-43d0-9cc7-e3f260c4b7ca">
           Question Dialog
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#f8fdd4ff-f67f-4086-b740-4d851ef2c8dd" data-bs-toggle="tab" href="#f8fdd4ff-f67f-4086-b740-4d851ef2c8dd" id="ef1b2726-1102-41b1-a391-ad0cdad470f3" role="tab">
-         <span class="text-secondary" id="c93d8c3a-c2be-4cca-9633-2f11bcda61f7">
+        <a class="nav-link" data-bs-target="#f56d2246-b517-4a62-a80e-be0cd0545a79" data-bs-toggle="tab" href="#f56d2246-b517-4a62-a80e-be0cd0545a79" id="abdfaeba-4ebe-4ab2-a3ce-f3a025f73eab" role="tab">
+         <span class="text-secondary" id="28d69d48-9070-4528-b16e-a0b84a86fd9b">
           Complex Dialog
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="9f99208d-68a4-4f68-bfaf-efe950df4f4e">
-        <div class="mt-5" id="86a29ada-ddb2-40d5-87fb-a84ebc9921b3">
-         <div class="d-flex justify-content-between" id="200b742c-d5ca-418d-8bc0-2bd6632248ee">
-          <h1 id="3ad943d3-c82a-4b4d-9d36-1014c0367d07">
+       <div class="tab-pane fade active show" id="8a52f7ce-e952-4645-a0e9-3d25aa077418">
+        <div class="mt-5" id="2decbf6b-fd04-4a06-95c7-4356c717494b">
+         <div class="d-flex justify-content-between" id="0c5b2084-6c87-48a1-b265-827b203658b2">
+          <h1 id="00a005fb-0269-4c8c-af80-7d95f594aeb4">
            Class
-           <span class="text-primary" id="4e29593f-284e-48e2-bc1d-3d4d358dc2c6">
+           <span class="text-primary" id="a9ad485c-cc44-435f-937c-2e87f2acdd40">
             Dialog
            </span>
           </h1>
-          <div id="174bebb6-0da0-4846-8fc4-4704101693a1">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#57668256-52f9-469a-962e-46c82727a31c" data-bs-toggle="collapse" id="aba3fbc5-775b-4709-b549-adf0db742088" onclick="return false;" type="button">
+          <div id="95ece331-c7ea-4b26-8ac3-9037138ef5e8">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#eaa69d59-8458-421e-a50b-6d1117aad1f1" data-bs-toggle="collapse" id="8a06a198-dfbb-4d43-9ba8-495adcce9539" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="b06f9853-aced-4c57-bc7d-fc509e663a5e">
+         <span class="text-muted" id="7910e4ea-5dd6-4e89-93b4-de836251c88a">
           A dialog.
          </span>
-         <pre id="056ba987-f07b-4fe1-a75c-6f16913638e4"><code class="python">Dialog(title, content, *actions)</code></pre>
-         <div class="ms-3 collapse" id="57668256-52f9-469a-962e-46c82727a31c">
-          <h6 id="17e00a44-e28d-432f-b73d-03c9efa44ab6">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="c8126ddf-05d5-47bc-9702-38b96e1ab46e"><code class="python">Dialog(title, content, *actions)</code></pre>
+         <div class="ms-3 collapse" id="eaa69d59-8458-421e-a50b-6d1117aad1f1">
+          <h6 id="cd861428-41a9-46d5-9881-b6705148f557">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="796f1f35-641c-4ea7-ad01-2d9fb2c4a982">
+          <table class="table table-sm bg-light" id="ccf7ceca-ad53-4785-ac6b-708adcb5c54d">
            <thead>
             <tr>
              <th scope="col">
@@ -2555,13 +2511,11 @@ Deck.Card(
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="0b2f8692-663d-4249-8e83-277c70e05019">
-          <h6 id="f84f2670-564e-4f9e-ad1e-4551b9070ea2">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="24199864-ad05-41de-b33d-bfaba1c47258">
+          <h6 id="30265bdc-4f77-4a10-bea6-4c7162de38d4">
+           Example
           </h6>
-          <pre id="5bf2f410-790a-4d28-9974-b0fd4ad30ed7"><code class="python">from bootwrap import Panel, Dialog, Button
+          <pre id="d6fd4cd4-b5d7-47a1-9e84-20b8b827046b"><code class="python">from bootwrap import Panel, Dialog, Button
 
 dialog = Dialog(
     'Greeting',
@@ -2573,9 +2527,9 @@ button = Button('Say Hello').toggle(dialog)
 Panel(dialog, button)
 </code></pre>
          </div>
-         <div class="ms-3" id="25a17609-9c1e-443b-b443-c1032cd0234b">
-          <div id="860325f0-2015-46b1-843b-2c65f4896ff6">
-           <div class="modal" id="49ba8a21-75ab-4990-b5c0-7ec6ace9f18f">
+         <div class="ms-3" id="ddb288e3-46b7-4100-8f59-9d4f9ddf1d0c">
+          <div id="cf396464-812e-4546-a8e0-257558fb000d">
+           <div class="modal" id="53b00142-96cc-4acc-b853-390ed256cb5c">
             <div class="modal-dialog" role="document">
              <div class="modal-content">
               <div class="modal-header">
@@ -2589,42 +2543,42 @@ Panel(dialog, button)
                Hello World!
               </div>
               <div class="modal-footer">
-               <button class="btn" data-bs-dismiss="modal" id="74378322-b52a-41bd-8c08-b8366be09282" onclick="return false;" type="button">
+               <button class="btn" data-bs-dismiss="modal" id="b06ebe5d-c052-41a6-bf9d-d05ade6abb1d" onclick="return false;" type="button">
                 Bye
                </button>
               </div>
              </div>
             </div>
            </div>
-           <button class="btn" data-bs-target="#49ba8a21-75ab-4990-b5c0-7ec6ace9f18f" data-bs-toggle="modal" id="52cd8cf1-bcea-46a8-a8b9-ba5d4f5b4f20" onclick="return false;" type="button">
+           <button class="btn" data-bs-target="#53b00142-96cc-4acc-b853-390ed256cb5c" data-bs-toggle="modal" id="eb322275-8b72-4690-908a-42487b0d7c58" onclick="return false;" type="button">
             Say Hello
            </button>
           </div>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="ab6d06f3-5102-472a-bc70-de394c39235a">
-        <div class="mt-3" id="fd5df57c-7ba6-48e1-8a03-66aaf3fff229">
-         <div id="73bfdc87-52a9-466f-8cf1-542a4e00d738">
+       <div class="tab-pane fade" id="ad2c3d44-9d58-419d-bd1d-1d4c5787c89a">
+        <div class="mt-3" id="06e226f7-9fdd-496a-a504-9df176e4759d">
+         <div id="407da475-e5d8-4168-b3f3-15c3e2b79bd3">
           <div class="row">
            <div class="col-md">
-            <div id="3bd04cf2-1f0c-4d36-b4cd-9fd0f42cfb43">
-             <h1 id="5ae3582a-aa1a-4d27-92cc-1916461c0026">
+            <div id="0d3a9ed5-f9d6-4ab8-97f0-d526acd4f38a">
+             <h1 id="1ab1b4eb-14f0-4527-b9af-f60210027996">
               Question Dialog
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="b7b68ae2-0308-4087-b0e3-54c52b5f3520">
+            <div id="246b5794-31f8-40c1-8a19-e8a40962c50e">
             </div>
            </div>
           </div>
          </div>
-         <div id="b71cd2e9-9f51-499f-92eb-e0535150b01d">
+         <div id="7bdcb09b-3bab-46da-b2b9-324aa5765f02">
           <div class="row">
            <div class="col-md">
-            <div id="3e8a3fac-54ea-42ce-967a-f80ad6da9e7a">
-             <p id="f30b27bb-1653-4cb3-a939-c0fdd31bbaf0">
+            <div id="8f0b04ec-6e50-4df0-ba68-701e6630fdf8">
+             <p id="050887d8-fa1b-4eb5-93af-dbab55d569fe">
               An example of how
               <code>
                Dialog
@@ -2644,8 +2598,8 @@ Panel(dialog, button)
             </div>
            </div>
            <div class="col-md">
-            <div id="71e49b30-813d-4324-b2da-d19b5e6e322d">
-             <pre id="df4f0d6a-d638-4654-8339-c31c0aab7c3c"><code class="python">from bootwrap import Panel, Dialog, Button
+            <div id="013edb81-2bc6-4704-94aa-a2e6c6ce347e">
+             <pre id="45a50092-b8e0-45cb-894f-76baa7e4ef06"><code class="python">from bootwrap import Panel, Dialog, Button
 
 dialog = Dialog(
   "Delete File",
@@ -2657,8 +2611,8 @@ dialog = Dialog(
 button = Button("Delete").as_danger().toggle(dialog)   
 
 Panel(dialog, button)</code></pre>
-             <div id="4ca212b6-248c-4162-9618-58d773636dd9">
-              <div class="modal" id="8b6f585a-1371-45fa-8201-3b687b5d80fe">
+             <div id="e25462e0-6db7-4ccf-8349-ff8acb646643">
+              <div class="modal" id="17ae1510-eda8-4aac-80fa-3d0412c72ff0">
                <div class="modal-dialog" role="document">
                 <div class="modal-content">
                  <div class="modal-header">
@@ -2672,17 +2626,17 @@ Panel(dialog, button)</code></pre>
                   Are you sure that you want to delete this file?
                  </div>
                  <div class="modal-footer">
-                  <button class="btn btn-danger" data-bs-dismiss="modal" id="f94e4a18-d45d-4d95-9bf9-7740968a0158" onclick="return false;" type="button">
+                  <button class="btn btn-danger" data-bs-dismiss="modal" id="3057e30e-78b2-49a6-a07c-329dd587b661" onclick="return false;" type="button">
                    Confirm
                   </button>
-                  <button class="btn" data-bs-dismiss="modal" id="b39a7992-c71d-4d80-be2c-0de408692edf" onclick="return false;" type="button">
+                  <button class="btn" data-bs-dismiss="modal" id="71d4c371-2b9f-481b-b9cc-d9df30bdeda1" onclick="return false;" type="button">
                    Cancel
                   </button>
                  </div>
                 </div>
                </div>
               </div>
-              <button class="btn btn-danger" data-bs-target="#8b6f585a-1371-45fa-8201-3b687b5d80fe" data-bs-toggle="modal" id="f590a4e8-e259-49d3-9f51-c80dc4c99567" onclick="return false;" type="button">
+              <button class="btn btn-danger" data-bs-target="#17ae1510-eda8-4aac-80fa-3d0412c72ff0" data-bs-toggle="modal" id="26b01eb0-9741-49de-8322-195ab6b57b95" onclick="return false;" type="button">
                Delete
               </button>
              </div>
@@ -2692,28 +2646,28 @@ Panel(dialog, button)</code></pre>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="f8fdd4ff-f67f-4086-b740-4d851ef2c8dd">
-        <div class="mt-3" id="2b122d73-64a8-448c-b9fc-c05f8da8b68f">
-         <div id="cae87904-183b-4df3-acd2-3b9146cae821">
+       <div class="tab-pane fade" id="f56d2246-b517-4a62-a80e-be0cd0545a79">
+        <div class="mt-3" id="64cdc1b5-c647-4867-ad73-6a846570a250">
+         <div id="9d20362a-77a8-441a-85fd-bcafa3ba2730">
           <div class="row">
            <div class="col-md">
-            <div id="5cdbb660-ddef-4c25-b3c1-34efb254a1e8">
-             <h1 id="19ccfdc6-77de-41d5-a212-45a3b135cdcd">
+            <div id="c09faecc-234b-4351-ab33-27d9310c7e93">
+             <h1 id="b9c3b1a3-bcbb-4370-bce8-d1f43b2921a2">
               Complex Dialog
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="fb07003e-24db-48db-aa55-59f19c6e9ca4">
+            <div id="08f96dfc-5e6b-4a84-bfdc-3c375792492a">
             </div>
            </div>
           </div>
          </div>
-         <div id="cbddbb65-a8b8-4e9c-81f6-12297c2c03eb">
+         <div id="c1e91ccd-aea2-4a6a-8a88-c6d2696fede8">
           <div class="row">
            <div class="col-md">
-            <div id="711a3ee3-14cc-4904-8eb3-4b1c58cde6f2">
-             <p id="fc423891-600e-4e7a-9834-7667b96e926e">
+            <div id="94f45f7c-b730-4bfb-b258-0c02c2227c89">
+             <p id="f0a061cd-10ec-4657-9d22-b609647d205d">
               An example of how
               <code>
                Dialog
@@ -2742,8 +2696,8 @@ Panel(dialog, button)</code></pre>
             </div>
            </div>
            <div class="col-md">
-            <div id="e10ff730-8254-4359-8230-e30e35dbcd6a">
-             <pre id="1fae6e0d-43c4-43a6-b35c-b07f1724a8f5"><code class="python">from bootwrap import Panel, Form, NumericInput, Dialog, Button
+            <div id="76ef4188-8f1c-4717-a026-f6c7307da1e4">
+             <pre id="ede8e349-92fc-4aa8-95cf-ec852892844c"><code class="python">from bootwrap import Panel, Form, NumericInput, Dialog, Button
 
 dialog = Dialog(
     "Buy Company Shares",
@@ -2761,8 +2715,8 @@ dialog = Dialog(
 button = Button("Buy Shares").as_primary().toggle(dialog)   
 
 Panel(dialog, button)</code></pre>
-             <div id="74c6f3e1-0f00-4c58-9270-8d3cb51383b5">
-              <div class="modal" id="7a1bed4d-6bd6-40f1-b840-b02443e1540d">
+             <div id="1b81bdc8-9eac-4b73-b87e-f0545b01af6f">
+              <div class="modal" id="00508e6d-81b5-47c6-90b1-c5a369fcde14">
                <div class="modal-dialog" role="document">
                 <div class="modal-content">
                  <div class="modal-header">
@@ -2773,19 +2727,19 @@ Panel(dialog, button)</code></pre>
                   </button>
                  </div>
                  <div class="modal-body">
-                  <form enctype="multipart/form-data" id="293dafce-2a5c-4895-b28e-5c276f2cb14e" method="POST">
+                  <form enctype="multipart/form-data" id="79643cfb-3790-429d-9a34-3f092dbe0223" method="POST">
                    <div class="form-group row">
-                    <label class="col-sm-4 col-form-label d-flex align-items-center" for="8ff8fddd-f6bb-4025-bf00-40fc50e038b2">
+                    <label class="col-sm-4 col-form-label d-flex align-items-center" for="03da8f8b-bda4-42e4-9810-86930ea4a4a0">
                      Amount($)
                     </label>
                     <div class="col-sm-8 d-flex align-items-center">
-                     <input class="form-control" id="8ff8fddd-f6bb-4025-bf00-40fc50e038b2" name="amount" placeholder="enter an amount for buying shares" type="number"/>
+                     <input class="form-control" id="03da8f8b-bda4-42e4-9810-86930ea4a4a0" name="amount" placeholder="enter an amount for buying shares" type="number"/>
                     </div>
                    </div>
-                   <button class="float-right btn" data-bs-dismiss="modal" id="27979882-4fc4-4cee-8c7c-28698500e1c9" onclick="return false;" type="button">
+                   <button class="float-right btn" data-bs-dismiss="modal" id="0be9eb92-159e-402b-94b6-b4608438814d" onclick="return false;" type="button">
                     Cancel
                    </button>
-                   <button class="float-right me-2 btn btn-success" data-bs-dismiss="modal" id="b21ec074-3712-4af7-8635-582a55aee844" onclick="return false;" type="button">
+                   <button class="float-right me-2 btn btn-success" data-bs-dismiss="modal" id="d5b8c11d-8420-4833-a4c0-b7fa8431a59f" onclick="return false;" type="button">
                     Buy
                    </button>
                   </form>
@@ -2793,7 +2747,7 @@ Panel(dialog, button)</code></pre>
                 </div>
                </div>
               </div>
-              <button class="btn btn-primary" data-bs-target="#7a1bed4d-6bd6-40f1-b840-b02443e1540d" data-bs-toggle="modal" id="f044563e-939f-4d83-81d5-631192bbe3a2" onclick="return false;" type="button">
+              <button class="btn btn-primary" data-bs-target="#00508e6d-81b5-47c6-90b1-c5a369fcde14" data-bs-toggle="modal" id="9c02e349-8b0b-4930-9202-aab520cb6268" onclick="return false;" type="button">
                Buy Shares
               </button>
              </div>
@@ -2806,101 +2760,99 @@ Panel(dialog, button)</code></pre>
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="b9bf6367-0d86-4009-986a-c38db014776c">
-     <div id="adc2169c-512e-46ff-be6c-3e4cda9edd90">
+    <div class="tab-pane fade" id="beca1969-af72-4461-b882-565aef1afe2a">
+     <div id="43dfd70f-7d78-41f6-9441-a75238bc29d8">
       <hr/>
-      <ul class="nav" id="324f9ba2-22f1-4383-8dbf-c6aa58c140a3" role="tablist">
+      <ul class="nav" id="2b1c3b32-797b-489e-9592-ae8e7021a6d2" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#9debb9c6-6d88-433b-aae3-422786956de4" data-bs-toggle="tab" href="#9debb9c6-6d88-433b-aae3-422786956de4" id="7708bcbf-1b50-4d42-87fb-1fbd96d96b92" role="tab">
-         <span class="text-secondary" id="c19fb1da-7f98-45d2-a40d-3a6405ac40bf">
+        <a class="nav-link active" data-bs-target="#cdba1693-f7e0-4d36-8ca8-19c16dadb7c4" data-bs-toggle="tab" href="#cdba1693-f7e0-4d36-8ca8-19c16dadb7c4" id="895efbdc-441b-4b17-8ca7-aa6d5fa1b900" role="tab">
+         <span class="text-secondary" id="00974824-ba2d-4cd7-a21f-325e7e43615d">
           Form
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#ab47f249-d8d6-41c4-a193-052c7880fb45" data-bs-toggle="tab" href="#ab47f249-d8d6-41c4-a193-052c7880fb45" id="436ff80b-15ed-457a-b436-4868d87c19d3" role="tab">
-         <span class="text-secondary" id="19790db2-5afa-411a-a13c-dbedd106556b">
+        <a class="nav-link" data-bs-target="#3fcb9447-b649-498f-b8c1-8b3ca2632eb7" data-bs-toggle="tab" href="#3fcb9447-b649-498f-b8c1-8b3ca2632eb7" id="a1308320-9efe-4283-b40f-702147988208" role="tab">
+         <span class="text-secondary" id="2627a2af-f12f-4126-a0ce-91ae2ac12045">
           CheckboxInput
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#123fcf2d-dd4c-438b-8dff-cd2dd580629d" data-bs-toggle="tab" href="#123fcf2d-dd4c-438b-8dff-cd2dd580629d" id="6169829a-fb1d-4024-847e-301cf2174558" role="tab">
-         <span class="text-secondary" id="922405c4-e32d-4582-8736-1626858f6d45">
+        <a class="nav-link" data-bs-target="#d8b67869-7473-40ac-9063-f4814b534570" data-bs-toggle="tab" href="#d8b67869-7473-40ac-9063-f4814b534570" id="0e88b94b-85cd-4896-b682-0ae1f0ea65b5" role="tab">
+         <span class="text-secondary" id="87699354-8207-4c27-8d8d-1dcd69a9a328">
           TextInput
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#bfceab63-40f1-4ecd-8949-0ff127a398ca" data-bs-toggle="tab" href="#bfceab63-40f1-4ecd-8949-0ff127a398ca" id="3ae25a00-e0bb-415a-98e9-7eaeab90e301" role="tab">
-         <span class="text-secondary" id="372957cf-5a07-4020-bfb9-c7c4dd006eca">
+        <a class="nav-link" data-bs-target="#e4be5864-8f11-4004-a008-abd76b6eab2a" data-bs-toggle="tab" href="#e4be5864-8f11-4004-a008-abd76b6eab2a" id="485c9a8c-462b-4c78-b73a-7137ccfb3136" role="tab">
+         <span class="text-secondary" id="2d0bbef3-90e5-4b69-bd91-264debcb0c8a">
           NumericInput
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#5d869292-0bf0-463f-86a8-5264a5b4433f" data-bs-toggle="tab" href="#5d869292-0bf0-463f-86a8-5264a5b4433f" id="f1dcbc38-9929-4545-9848-5400cebfa183" role="tab">
-         <span class="text-secondary" id="828559b5-116c-46f2-97de-1e3a76f70215">
+        <a class="nav-link" data-bs-target="#8401add8-cf0e-4cd4-b2fc-afd4ee2e48df" data-bs-toggle="tab" href="#8401add8-cf0e-4cd4-b2fc-afd4ee2e48df" id="2d91afc4-c4d7-4163-b28e-817e8abdcb39" role="tab">
+         <span class="text-secondary" id="540c245d-3636-40f4-9475-0449b15eb643">
           SelectInput
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#427f4877-f108-4f8f-9a2b-466f9037f2a0" data-bs-toggle="tab" href="#427f4877-f108-4f8f-9a2b-466f9037f2a0" id="e74f6047-74b9-4886-9c45-7b5e06710385" role="tab">
-         <span class="text-secondary" id="1ca184f7-a74c-43f1-a582-62fffd5219b7">
+        <a class="nav-link" data-bs-target="#e10964cd-9112-4662-ac42-91dfcea64e3e" data-bs-toggle="tab" href="#e10964cd-9112-4662-ac42-91dfcea64e3e" id="c801469a-8379-434b-a650-5d60440352d0" role="tab">
+         <span class="text-secondary" id="94235ba4-7f3b-46f3-a0cc-25010eb612cc">
           SelectInput.Option
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#fb83c5e9-b366-4ae6-8f36-bd4b01a02d05" data-bs-toggle="tab" href="#fb83c5e9-b366-4ae6-8f36-bd4b01a02d05" id="659a2791-d3e0-4594-8391-1307b1ed03a0" role="tab">
-         <span class="text-secondary" id="aaae5c6f-bb04-4ca8-9883-9690abf3d378">
+        <a class="nav-link" data-bs-target="#bb4c64ea-e55b-4a83-a39b-98f0f88db5c7" data-bs-toggle="tab" href="#bb4c64ea-e55b-4a83-a39b-98f0f88db5c7" id="13cec1b1-5bd4-4a90-b963-5ddd5133cdb4" role="tab">
+         <span class="text-secondary" id="b729f16a-79cb-4eaf-9e2b-6ba9f34f80ea">
           HiddenInput
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#300d1e09-eb1e-4b87-aa0b-c65c2942af56" data-bs-toggle="tab" href="#300d1e09-eb1e-4b87-aa0b-c65c2942af56" id="8d171ab4-7321-4f06-80fa-660d117e0ed9" role="tab">
-         <span class="text-secondary" id="de20f893-8f36-45f8-8a7b-a60f3ceb1d52">
+        <a class="nav-link" data-bs-target="#f5ac1312-9b0c-4d38-9b52-c4f6243ac39a" data-bs-toggle="tab" href="#f5ac1312-9b0c-4d38-9b52-c4f6243ac39a" id="da733519-ca18-4c71-81ce-20b92e40e384" role="tab">
+         <span class="text-secondary" id="8e1fbaca-9358-42b4-82e3-e187eee828dc">
           FileInput
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#23fee003-79da-4833-8c07-7a3e2e77cbf7" data-bs-toggle="tab" href="#23fee003-79da-4833-8c07-7a3e2e77cbf7" id="cc92d116-b152-49e4-bb6a-14d4a872cc60" role="tab">
-         <span class="text-secondary" id="68fcc96a-9b2d-465f-87f2-f4bfb06de0b9">
+        <a class="nav-link" data-bs-target="#90907e3e-d810-43cd-ab00-918aaff8df0f" data-bs-toggle="tab" href="#90907e3e-d810-43cd-ab00-918aaff8df0f" id="0af53356-eb78-4ca1-b916-19e292e8df50" role="tab">
+         <span class="text-secondary" id="70123554-b9dc-4a15-8baf-0666950d37a5">
           InputGroup
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="9debb9c6-6d88-433b-aae3-422786956de4">
-        <div class="mt-5" id="a299b9b4-c9b6-4a22-8ef0-bff28bcf2a6b">
-         <div class="d-flex justify-content-between" id="07fe704c-7caa-49d5-aad9-69efeeaac86a">
-          <h1 id="021b78fe-9af4-459e-841f-9127cb3a18c5">
+       <div class="tab-pane fade active show" id="cdba1693-f7e0-4d36-8ca8-19c16dadb7c4">
+        <div class="mt-5" id="74e89223-0e50-44ac-b32d-f738ac74ccdc">
+         <div class="d-flex justify-content-between" id="911b5223-31f2-43c1-be81-72ceec75b857">
+          <h1 id="02170cae-01c5-4b97-a4f5-beb8460ec468">
            Class
-           <span class="text-primary" id="e0253123-2970-4e9d-9509-7dd1010f98d3">
+           <span class="text-primary" id="aec13e18-1e09-4d2f-9c72-d56324ada991">
             Form
            </span>
           </h1>
-          <div id="ea9faa1e-8ce7-424a-a754-8d784d105d86">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#73c198ad-c0fb-4ba9-a77b-4eaff20b599c" data-bs-toggle="collapse" id="5e953b4c-7dd1-4ffa-93c2-e23731ed33ac" onclick="return false;" type="button">
+          <div id="fb92ed85-0547-45ef-8a70-29eac93aad5e">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#80194039-f530-4df3-a8af-9a6fff891614" data-bs-toggle="collapse" id="86b14f92-e90c-44d2-b072-d55a6f296de8" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="ba712f6f-43ae-4ec3-a4e0-d8d84371d83e">
+         <span class="text-muted" id="f9f0a47b-746a-445f-8de4-a6393a86e129">
           A web component for a form.
          </span>
-         <pre id="c7f69c3d-ec09-477d-842a-5fcd754ed24d"><code class="python">Form(*components)</code></pre>
-         <div class="ms-3 collapse" id="73c198ad-c0fb-4ba9-a77b-4eaff20b599c">
-          <h6 id="c1c083c8-efe9-45a5-a3de-d4eedc0b3ea5">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="c5d85ee3-250b-401f-bdcd-c8e247333dcd"><code class="python">Form(*components)</code></pre>
+         <div class="ms-3 collapse" id="80194039-f530-4df3-a8af-9a6fff891614">
+          <h6 id="333b7920-547a-4f30-87d6-d32711436c65">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="506f0711-7faf-47c6-ba64-d434ec03ebfd">
+          <table class="table table-sm bg-light" id="72ca1780-fad8-4307-a4b0-25a78b1a004f">
            <thead>
             <tr>
              <th scope="col">
@@ -2938,7 +2890,7 @@ Panel(dialog, button)</code></pre>
            </tbody>
           </table>
          </div>
-         <p id="3a171ae3-5061-4221-a458-09898d438abc">
+         <p id="d167c837-8da6-42e6-8567-2d11e48a18b3">
           Use the
           <code>
            on_submit(href)
@@ -2946,13 +2898,11 @@ Panel(dialog, button)</code></pre>
           function to specify URL where entered
     information should to be sent for processing.
          </p>
-         <div class="ms-3" id="a9c2bcdd-f59d-4a71-82ed-d7e1a863466a">
-          <h6 id="e96e187f-fa25-4709-8c61-a5477517e15b">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="33640736-cee1-4c94-9587-485ce4b829e2">
+          <h6 id="4fcb1fca-56f0-4b28-abef-36cd1ac97a90">
+           Example
           </h6>
-          <pre id="8edcd3f5-a1dd-416b-84de-5a285ed9aad4"><code class="python">from bootwrap import Form
+          <pre id="f3991be9-c756-4ce7-9605-e4435c9264b6"><code class="python">from bootwrap import Form
 
 Form(
     # here should be an enumeration  of
@@ -2961,34 +2911,32 @@ Form(
 ).on_submit('go/to/this/url')
 </code></pre>
          </div>
-         <div class="mt-5" id="b50920cc-87c3-4ca2-9f67-99bab645b11d">
-          <div class="d-flex justify-content-between" id="21e49741-154f-4b22-91ad-83714573c47e">
-           <h4 id="05f31064-018d-4303-a213-58467cbd95a7">
+         <div class="mt-5" id="23372bd5-002b-4135-8953-106f68c764d2">
+          <div class="d-flex justify-content-between" id="1094b7cb-a249-4899-ad5d-c9e8dc59c9fb">
+           <h4 id="138ba571-58ee-4997-8e20-6ffa3ab1ee77">
             Method
-            <span class="text-primary" id="9ad16e42-7de0-4748-91b9-7558b686961d">
+            <span class="text-primary" id="a434461d-efef-4685-b465-9804595c28de">
              on_submit
             </span>
            </h4>
-           <div id="0d291e61-37d5-4143-9a37-892cf9ee7c44">
-            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#db1f76d4-dc86-48ce-b73e-dfaf911a66af" data-bs-toggle="collapse" id="6c945253-683c-4512-9478-160209c9d338" onclick="return false;" type="button">
+           <div id="4f85ea8c-10a1-43f1-aa6b-c34ad5bd56d7">
+            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#54b8b8ac-3b8d-4238-87bb-4fe8ad704990" data-bs-toggle="collapse" id="3baa3cb2-a04d-4842-862a-b057dda0e06e" onclick="return false;" type="button">
              Argument
             </button>
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#e7599b95-35cb-4214-be69-600e9eb8be84" data-bs-toggle="collapse" id="e94a4a86-9fb1-4345-bdc5-63ec2135937f" onclick="return false;" type="button">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#0ab5a2e2-6a4d-42d2-b2d5-1682a68eac49" data-bs-toggle="collapse" id="4cdace5c-9893-48b9-9806-66bf05e3b791" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="6035125d-244d-4cdd-85ac-1d7ff91c746b">
+          <span class="text-muted" id="328d91e1-61e8-4f4e-aef0-ff0de3d3624a">
            Sets the submit URL, for the POST request.
           </span>
-          <pre id="32dfd227-90d0-4c78-8e34-2c12bf024e7e"><code class="python">on_submit(href)</code></pre>
-          <div class="ms-3 collapse" id="db1f76d4-dc86-48ce-b73e-dfaf911a66af">
-           <h6 id="bde63c5b-7ad2-4f94-a778-6fa7f7d3ebfa">
-            <strong>
-             Arguments
-            </strong>
+          <pre id="e4010ac9-c731-4046-8806-1dbcafd91d1f"><code class="python">on_submit(href)</code></pre>
+          <div class="ms-3 collapse" id="54b8b8ac-3b8d-4238-87bb-4fe8ad704990">
+           <h6 id="c95dd9dc-4cdc-45b5-8b6e-19cbb18f5aeb">
+            Arguments
            </h6>
-           <table class="table table-sm bg-light" id="7102a093-5dc5-427d-93e9-0cfca5492ddf">
+           <table class="table table-sm bg-light" id="bdb8db34-1b84-43b7-94fb-e6b68e42661e">
             <thead>
              <tr>
               <th scope="col">
@@ -3021,13 +2969,11 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3 collapse" id="e7599b95-35cb-4214-be69-600e9eb8be84">
-           <h6 id="7f55cd9b-7485-4cd1-b52c-be003249c8c5">
-            <strong>
-             Returns
-            </strong>
+          <div class="ms-3 collapse" id="0ab5a2e2-6a4d-42d2-b2d5-1682a68eac49">
+           <h6 id="135213ec-655c-4832-a695-99ff843e58bd">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="e016a3a7-c90c-4d5c-b8ce-9914dd301df5">
+           <table class="table table-sm bg-light" id="8dc91561-dced-4d95-9bec-dbf8458b83e1">
             <thead>
              <tr>
               <th scope="col">
@@ -3060,13 +3006,11 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="e842c859-4e7e-42e6-9f31-8577f66b593e">
-           <h6 id="ce81015b-eed4-4be1-b3a4-857077839a03">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="f0e37cc1-e202-4f92-8004-da48fcd5df43">
+           <h6 id="1a69aea6-8301-4c22-b2cc-1c7cd535a8d9">
+            Example
            </h6>
-           <pre id="83ce11bf-4266-4c8a-9975-609106600b6c"><code class="python">from bootwrap import Form
+           <pre id="76abc1c8-d0df-407b-8e6d-3bb1edbe8f00"><code class="python">from bootwrap import Form
 
 Form(...).on_submit('go/to/this/url')
 </code></pre>
@@ -3074,32 +3018,30 @@ Form(...).on_submit('go/to/this/url')
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="ab47f249-d8d6-41c4-a193-052c7880fb45">
-        <div class="mt-5" id="787cbb51-377b-4a90-b0d3-f0a6dfdbf82b">
-         <div class="d-flex justify-content-between" id="43ec8c18-0fec-4dd4-9d54-347fa8644ffb">
-          <h1 id="1fdf3539-9fc3-4ea0-b881-0ed4f42c8a16">
+       <div class="tab-pane fade" id="3fcb9447-b649-498f-b8c1-8b3ca2632eb7">
+        <div class="mt-5" id="36645871-748f-42dc-b9b5-2f49235efbea">
+         <div class="d-flex justify-content-between" id="5c0c91c9-de92-410b-bcd0-399d0acfdcd9">
+          <h1 id="a40fefb5-8bbc-4c6c-a9cc-3ab712b4e375">
            Class
-           <span class="text-primary" id="82044062-7877-4b4e-ba89-705962ea72b2">
+           <span class="text-primary" id="c6876ec3-0863-4a49-841d-76d90c3b3bf3">
             CheckboxInput
            </span>
           </h1>
-          <div id="4d3ff567-3b59-4cf5-8463-5f2a6812b84a">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#b0e642c7-c3b1-4cbf-bb3a-5d8ee2bb4213" data-bs-toggle="collapse" id="07e0c20c-fd1a-4514-8ee3-7e0e5ae405ac" onclick="return false;" type="button">
+          <div id="7b75b23c-030a-4587-993f-aa2f636a688a">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#f1306fa1-e5d7-4623-949b-ad95132516f8" data-bs-toggle="collapse" id="ee39ac9a-b285-4bce-9c89-206238c3f59c" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="171bd97e-71bc-40a8-9eec-f56fb3975184">
+         <span class="text-muted" id="715e8897-818e-471c-8ca9-3a79f1c7f3d7">
           A checkbox input.
          </span>
-         <pre id="df6f164f-c2b9-4d90-aef7-f62e7fdad9da"><code class="python">CheckboxInput(label, name, checked=False)</code></pre>
-         <div class="ms-3 collapse" id="b0e642c7-c3b1-4cbf-bb3a-5d8ee2bb4213">
-          <h6 id="43e8623f-3733-487c-b0f0-8316e18fe938">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="4bac88b4-0b9e-4b05-9aab-c07ba6375eef"><code class="python">CheckboxInput(label, name, checked=False)</code></pre>
+         <div class="ms-3 collapse" id="f1306fa1-e5d7-4623-949b-ad95132516f8">
+          <h6 id="9e7f87c1-61c3-4a57-9039-50840f1b09f0">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="4bbd89bd-3842-4486-9fd3-fe39b9d82def">
+          <table class="table table-sm bg-light" id="b62a7803-49df-48e6-b57c-17de05873edb">
            <thead>
             <tr>
              <th scope="col">
@@ -3162,7 +3104,7 @@ Form(...).on_submit('go/to/this/url')
            </tbody>
           </table>
          </div>
-         <p id="86a65cee-60cf-4c69-a6ff-55c9dc70f9d4">
+         <p id="7640a8c7-3687-46f8-8f16-f2665d5a5047">
           Use the
           <code>
            as_disabled()
@@ -3174,13 +3116,11 @@ Form(...).on_submit('go/to/this/url')
           </code>
           component.
          </p>
-         <div class="ms-3" id="9d11757e-1444-41a6-8c82-173f696cbb81">
-          <h6 id="b05eae34-05e9-447d-8a83-14e2d15c6cc1">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="3ef3f94b-fa9c-4ae3-a9c2-e395a57f0dcb">
+          <h6 id="167071b8-37b8-4e4a-a037-919394c841d1">
+           Example
           </h6>
-          <pre id="5a93f7b2-024f-4ab9-bb3c-fd5244c855a8"><code class="python">from bootwrap import Form, CheckboxInput
+          <pre id="3a778f83-c883-4ce3-8399-015cf764d37b"><code class="python">from bootwrap import Form, CheckboxInput
 
 Form(
     CheckboxInput('One', 'opt1'),
@@ -3190,59 +3130,57 @@ Form(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="f389bcf6-a581-4549-9638-ab5a6596ea04">
-          <form enctype="multipart/form-data" id="c4d4f384-a415-4e9d-bb41-63d619356aa1" method="POST">
+         <div class="ms-3" id="786e7e5d-6e58-4447-ab4f-8283c6967682">
+          <form enctype="multipart/form-data" id="301e55f1-ebb8-4e3d-9eb4-96693b35f9da" method="POST">
            <div class="form-check">
-            <input autocomplete="off" class="form-check-input" id="b7766874-c049-4f62-8ac5-78ac6fc3fcc9" name="opt1" type="checkbox"/>
-            <label class="form-check-label" for="b7766874-c049-4f62-8ac5-78ac6fc3fcc9">
+            <input autocomplete="off" class="form-check-input" id="7690761d-22be-47d2-9ee6-86ac60db9ded" name="opt1" type="checkbox"/>
+            <label class="form-check-label" for="7690761d-22be-47d2-9ee6-86ac60db9ded">
              One
             </label>
            </div>
            <div class="form-check">
-            <input autocomplete="off" checked="" class="form-check-input" id="6d02d078-2f45-4567-ada0-c8ef37edc3c0" name="opt2" type="checkbox"/>
-            <label class="form-check-label" for="6d02d078-2f45-4567-ada0-c8ef37edc3c0">
+            <input autocomplete="off" checked="" class="form-check-input" id="7b19fffb-8c2b-4ec4-ae4e-da4a9c822c16" name="opt2" type="checkbox"/>
+            <label class="form-check-label" for="7b19fffb-8c2b-4ec4-ae4e-da4a9c822c16">
              Two
             </label>
            </div>
            <div class="form-check">
-            <input autocomplete="off" class="form-check-input" disabled="" id="f5f96cd3-8eaf-4b4b-9924-df952c037195" name="opt3" type="checkbox"/>
-            <label class="form-check-label" for="f5f96cd3-8eaf-4b4b-9924-df952c037195">
+            <input autocomplete="off" class="form-check-input" disabled="" id="71aad4e6-dca9-4eb5-9ff1-9482a81a38a8" name="opt3" type="checkbox"/>
+            <label class="form-check-label" for="71aad4e6-dca9-4eb5-9ff1-9482a81a38a8">
              Three
             </label>
            </div>
            <div class="form-check">
-            <input autocomplete="off" checked="" class="form-check-input" disabled="" id="92c92422-3f51-45d0-b791-52bc9f155be1" name="opt4" type="checkbox"/>
-            <label class="form-check-label" for="92c92422-3f51-45d0-b791-52bc9f155be1">
+            <input autocomplete="off" checked="" class="form-check-input" disabled="" id="af3ffa0a-f4a8-4489-92d5-1bd156429d01" name="opt4" type="checkbox"/>
+            <label class="form-check-label" for="af3ffa0a-f4a8-4489-92d5-1bd156429d01">
              Four
             </label>
            </div>
           </form>
          </div>
-         <div class="mt-5" id="44fe283d-2936-4dbe-b216-0fa2cb384c6f">
-          <div class="d-flex justify-content-between" id="b57ac956-8c43-4d3d-aa99-6cc00e42ffbf">
-           <h4 id="40fc9479-67f3-4da5-af4b-f9fc33ac1f8a">
+         <div class="mt-5" id="e6c82aca-53a7-4fb6-91ec-60130fa07dfd">
+          <div class="d-flex justify-content-between" id="35ce490b-a3fb-4b23-aba7-b207ce66fb9d">
+           <h4 id="1bde7f1a-af27-468c-a658-f823f1b0ad15">
             Method
-            <span class="text-primary" id="234d8c77-188e-4ece-b63a-b98c1defebbe">
+            <span class="text-primary" id="f0263c04-6108-475a-b67b-41412002ff00">
              as_button
             </span>
            </h4>
-           <div id="13111b7b-60dd-45c9-b848-9c11c80e32cc">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#e05a7229-2cda-4d0f-8242-09bece1737e7" data-bs-toggle="collapse" id="ab32fab6-aec3-4954-9ef5-06988584d392" onclick="return false;" type="button">
+           <div id="43207a22-7483-489d-a8e4-18bba17b716c">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#de3e32b1-8585-4fad-9a7a-d78a29fe5a4e" data-bs-toggle="collapse" id="bb938de9-e63e-4a4f-b859-a8ab92d10838" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="bbb0f095-c85c-464f-a3a3-c66dfa096267">
+          <span class="text-muted" id="5610c271-aefe-44c3-8720-5e394001d6ec">
            Sets the "button"-style to the check box.
           </span>
-          <pre id="b1f1bee5-997e-4c6b-96e7-f4b9aa8816ac"><code class="python">as_button()</code></pre>
-          <div class="ms-3 collapse" id="e05a7229-2cda-4d0f-8242-09bece1737e7">
-           <h6 id="ba51143d-368a-4089-974b-40f01bb712c7">
-            <strong>
-             Returns
-            </strong>
+          <pre id="6312a148-4366-4a76-930b-0086b72b5ba2"><code class="python">as_button()</code></pre>
+          <div class="ms-3 collapse" id="de3e32b1-8585-4fad-9a7a-d78a29fe5a4e">
+           <h6 id="b2488647-cd2f-4f5a-859a-6c7c0d49c826">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="2bbd52a5-dbe7-451a-a311-9deb2e2458ff">
+           <table class="table table-sm bg-light" id="20aad33c-72a6-44ec-89d1-4fd5a2cb2f29">
             <thead>
              <tr>
               <th scope="col">
@@ -3275,13 +3213,11 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="8178b9ba-e4d8-4a86-a4c3-7b08f19c6e57">
-           <h6 id="f01eb4d1-a0d4-402f-ac7b-766568e6c130">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="82a8a667-1cb0-4fe8-8b71-3e0b033963ac">
+           <h6 id="f4fbbfe5-6ef5-4e4d-8ad0-f954de28be3a">
+            Example
            </h6>
-           <pre id="00cb20de-7342-4768-acc5-663f9568007f"><code class="python">from bootwrap import Form, CheckboxInput
+           <pre id="5d675055-212a-49b0-ae0e-e1630b32e9ee"><code class="python">from bootwrap import Form, CheckboxInput
 
 Form(
     CheckboxInput('One', 'opt1').as_button().as_primary().as_outline(),
@@ -3291,52 +3227,50 @@ Form(
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="d2a942e5-8bcb-4318-a3a6-2410fecf0a94">
-           <form enctype="multipart/form-data" id="0e90bda7-47d8-4741-b345-37da833796e3" method="POST">
-            <input autocomplete="off" class="btn-check" id="8d9b3594-1f3f-4911-896f-33a984f5703b" name="opt1" type="checkbox"/>
-            <label class="btn btn-outline-primary" for="8d9b3594-1f3f-4911-896f-33a984f5703b">
+          <div class="ms-3" id="6fe0b22e-f818-4b4b-960e-443ec2261326">
+           <form enctype="multipart/form-data" id="089a8edb-f389-44d5-a1f4-9e787d856aa3" method="POST">
+            <input autocomplete="off" class="btn-check" id="19b4ba47-85b2-46e0-b064-681f6c65b4c1" name="opt1" type="checkbox"/>
+            <label class="btn btn-outline-primary" for="19b4ba47-85b2-46e0-b064-681f6c65b4c1">
              One
             </label>
-            <input autocomplete="off" checked="" class="btn-check" id="1b95a79f-62d7-4fe4-8b45-48703a2c202f" name="opt2" type="checkbox"/>
-            <label class="btn" for="1b95a79f-62d7-4fe4-8b45-48703a2c202f">
+            <input autocomplete="off" checked="" class="btn-check" id="cf32797b-ae3a-4ecf-9946-c6b2bee0273f" name="opt2" type="checkbox"/>
+            <label class="btn" for="cf32797b-ae3a-4ecf-9946-c6b2bee0273f">
              Two
             </label>
-            <input autocomplete="off" class="btn-check" disabled="" id="c1f3d3c2-a740-488e-a9a9-bee91f16b270" name="opt3" type="checkbox"/>
-            <label class="btn" for="c1f3d3c2-a740-488e-a9a9-bee91f16b270">
+            <input autocomplete="off" class="btn-check" disabled="" id="97c14346-29b7-42e0-843b-a4cd5312cf7d" name="opt3" type="checkbox"/>
+            <label class="btn" for="97c14346-29b7-42e0-843b-a4cd5312cf7d">
              Three
             </label>
-            <input autocomplete="off" checked="" class="btn-check" disabled="" id="75011f75-4a9b-4955-b394-d79f3e42b33d" name="opt4" type="checkbox"/>
-            <label class="btn" for="75011f75-4a9b-4955-b394-d79f3e42b33d">
+            <input autocomplete="off" checked="" class="btn-check" disabled="" id="a4d13ae2-836e-4b99-a911-c0cf4d4e89f6" name="opt4" type="checkbox"/>
+            <label class="btn" for="a4d13ae2-836e-4b99-a911-c0cf4d4e89f6">
              Four
             </label>
            </form>
           </div>
          </div>
-         <div class="mt-5" id="8206c09c-332e-4499-adc6-a000d644e634">
-          <div class="d-flex justify-content-between" id="676507cd-04d7-4714-bd15-0965e68ab8c8">
-           <h4 id="e6a2e5d7-1dc7-48b0-bd40-419211983d76">
+         <div class="mt-5" id="e62fe92c-2fe0-47a1-883f-6ea12032c06b">
+          <div class="d-flex justify-content-between" id="f3c3a9dd-e87d-42d5-82ca-494d8d6b19c2">
+           <h4 id="92fff7ab-ebe5-4280-9141-74c1a0c66dbb">
             Method
-            <span class="text-primary" id="bfeb1882-9c14-412f-86bd-d7c2e47790ab">
+            <span class="text-primary" id="83c01e39-6db0-4775-8f01-fa7506ef7de5">
              as_radio
             </span>
            </h4>
-           <div id="d0f775d6-78ee-4943-8890-a324321131a6">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#7bae33fa-389f-4e24-be30-e626c17ce859" data-bs-toggle="collapse" id="276d5c1e-5f21-4b2a-8ab8-e80d58f12a58" onclick="return false;" type="button">
+           <div id="9f45b311-c65b-4ef2-a534-64dbda63d89b">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#9c0efeb8-c19d-4ae3-9103-533cc0fe784d" data-bs-toggle="collapse" id="452e1778-7c8e-4867-835e-5aeeb5146103" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="2c5fec96-57ea-44e1-9fff-3cb174e6b3ff">
+          <span class="text-muted" id="26d0c88f-23fd-4a41-af9a-b679ed3ab53a">
            Makes a chack box as radio button.
           </span>
-          <pre id="aa08fdf4-9039-47ca-8570-b0dc21cb346d"><code class="python">as_radio(value)</code></pre>
-          <div class="ms-3 collapse" id="7bae33fa-389f-4e24-be30-e626c17ce859">
-           <h6 id="071eeb7d-1be6-4327-bc59-4ca6579ebc78">
-            <strong>
-             Returns
-            </strong>
+          <pre id="a0cdbad1-6d81-444e-8963-6fe965495712"><code class="python">as_radio(value)</code></pre>
+          <div class="ms-3 collapse" id="9c0efeb8-c19d-4ae3-9103-533cc0fe784d">
+           <h6 id="ef26263e-0b5b-4fd7-a5f0-4375ebfd0a4c">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="f181692e-3cc7-4c61-817d-6d3b5eee767f">
+           <table class="table table-sm bg-light" id="00f5cea7-9bbd-4759-8cbd-b495749e7ace">
             <thead>
              <tr>
               <th scope="col">
@@ -3369,13 +3303,11 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="e6dd4ad1-3499-4d63-912c-b56b033cd196">
-           <h6 id="b5330595-3279-4f3d-9134-63e419f24e9d">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="92cd9de5-2510-4edc-bd31-f332fbede8b9">
+           <h6 id="88e8f329-90db-49d7-be43-15708241027c">
+            Example
            </h6>
-           <pre id="d93680ce-8905-44d2-809a-541caddd8615"><code class="python">from bootwrap import Form, CheckboxInput
+           <pre id="4d3ce641-5ee3-43b1-87d3-228e9389cef2"><code class="python">from bootwrap import Form, CheckboxInput
 
 Form(
     CheckboxInput('One', 'opt').as_radio(1),
@@ -3385,60 +3317,58 @@ Form(
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="b5636a28-b2b7-4888-b582-e3a482ac58af">
-           <form enctype="multipart/form-data" id="8b0fadeb-fbc8-4cb3-837b-333b1d8f6ec4" method="POST">
+          <div class="ms-3" id="09d2a297-fc94-4676-84cc-84d97df7e534">
+           <form enctype="multipart/form-data" id="798636d1-f9fe-4e94-a318-a15e691794b2" method="POST">
             <div class="form-check">
-             <input autocomplete="off" class="form-check-input" id="657dc962-4684-4ff4-84e6-6c352d83bc2b" name="opt" type="radio" value="1"/>
-             <label class="form-check-label" for="657dc962-4684-4ff4-84e6-6c352d83bc2b">
+             <input autocomplete="off" class="form-check-input" id="fcd7216d-823b-4840-a6b5-866937069645" name="opt" type="radio" value="1"/>
+             <label class="form-check-label" for="fcd7216d-823b-4840-a6b5-866937069645">
               One
              </label>
             </div>
             <div class="form-check">
-             <input autocomplete="off" checked="" class="form-check-input" id="823c0300-9e7f-45cd-8545-b450310e91ff" name="opt" type="radio" value="2"/>
-             <label class="form-check-label" for="823c0300-9e7f-45cd-8545-b450310e91ff">
+             <input autocomplete="off" checked="" class="form-check-input" id="2f2244ec-91aa-4c83-b5d5-1cd3b58ee694" name="opt" type="radio" value="2"/>
+             <label class="form-check-label" for="2f2244ec-91aa-4c83-b5d5-1cd3b58ee694">
               Two
              </label>
             </div>
             <div class="form-check">
-             <input autocomplete="off" class="form-check-input" disabled="" id="42a9dedf-fc77-4a23-ad69-777d04d02fcc" name="opt" type="radio" value="3"/>
-             <label class="form-check-label" for="42a9dedf-fc77-4a23-ad69-777d04d02fcc">
+             <input autocomplete="off" class="form-check-input" disabled="" id="0128e193-c7f4-4706-b001-a33e88382689" name="opt" type="radio" value="3"/>
+             <label class="form-check-label" for="0128e193-c7f4-4706-b001-a33e88382689">
               Three
              </label>
             </div>
             <div class="form-check">
-             <input autocomplete="off" checked="" class="form-check-input" disabled="" id="477f1816-f5c9-4ab2-af0b-bdd9aabfe041" name="opt" type="radio" value="4"/>
-             <label class="form-check-label" for="477f1816-f5c9-4ab2-af0b-bdd9aabfe041">
+             <input autocomplete="off" checked="" class="form-check-input" disabled="" id="79c4e95e-b020-44e9-8ca9-050234c16fe9" name="opt" type="radio" value="4"/>
+             <label class="form-check-label" for="79c4e95e-b020-44e9-8ca9-050234c16fe9">
               Four
              </label>
             </div>
            </form>
           </div>
          </div>
-         <div class="mt-5" id="9d4d1651-a72e-4be1-9b76-c2e787186172">
-          <div class="d-flex justify-content-between" id="d7667569-7fcf-465a-8004-89bcea119838">
-           <h4 id="aeabace0-8a02-45ab-8567-9d39cfbf5f32">
+         <div class="mt-5" id="60912b8f-e8a3-4e92-9478-00dc4aa47a09">
+          <div class="d-flex justify-content-between" id="d7e830fe-7298-4b2d-87a2-d04151129d5e">
+           <h4 id="364a7fd4-1b4b-4ff2-ba54-74fd4f68dd6e">
             Method
-            <span class="text-primary" id="db36040f-940f-4b79-8fe5-e99ac8915cca">
+            <span class="text-primary" id="7d29b306-f2dd-45e3-ae33-da1419b51c0d">
              as_switch
             </span>
            </h4>
-           <div id="7b8c80fc-fea6-429b-b05c-5ffda9d3889d">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#65564869-9925-4e86-9747-a05f1bcc9f49" data-bs-toggle="collapse" id="82a1c03b-e6bf-46b5-b691-c173ba3ffd51" onclick="return false;" type="button">
+           <div id="23b71820-2f08-435c-bf84-6f9b63c7fde9">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#66e02474-dfc5-42fe-8f79-918d3a14a732" data-bs-toggle="collapse" id="3da315ac-6a6c-45f3-b84a-79595b40d582" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="0cd56f34-62ab-4af2-8876-f2dacceffaaf">
+          <span class="text-muted" id="3e3def5b-a607-4c89-b8f6-0c8b4275fe66">
            Sets the "switch"-style to the check box.
           </span>
-          <pre id="3da0b38a-2c74-49e3-96f1-9be962bd40c2"><code class="python">as_switch()</code></pre>
-          <div class="ms-3 collapse" id="65564869-9925-4e86-9747-a05f1bcc9f49">
-           <h6 id="80b61f05-bdda-4623-ab62-3073f80c905a">
-            <strong>
-             Returns
-            </strong>
+          <pre id="fd7084cc-f08d-480b-abbf-1e7ec2b13eaa"><code class="python">as_switch()</code></pre>
+          <div class="ms-3 collapse" id="66e02474-dfc5-42fe-8f79-918d3a14a732">
+           <h6 id="9cc22f80-aaa6-4bad-88bb-a22e1d056af8">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="4d88a451-e163-4264-9528-37b35611e20f">
+           <table class="table table-sm bg-light" id="d883c25d-02cd-4a3a-ac3b-78130bcf3c52">
             <thead>
              <tr>
               <th scope="col">
@@ -3471,13 +3401,11 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="1b0fc4c6-31ab-41c5-83c1-54acd92094db">
-           <h6 id="ac52b908-b27e-493a-9644-4469374db14e">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="50cef081-92d4-4c1a-b90c-179ead0f9ab0">
+           <h6 id="d4cd277e-062c-487d-8dbe-6f04b5ef8061">
+            Example
            </h6>
-           <pre id="d923ad5d-0419-427d-84af-02e324848c24"><code class="python">from bootwrap import Form, CheckboxInput
+           <pre id="12fb93e9-70cf-4733-b4e2-fa6d6de985ae"><code class="python">from bootwrap import Form, CheckboxInput
 
 Form(
     CheckboxInput('One', 'opt1').as_switch(),
@@ -3487,60 +3415,58 @@ Form(
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="2650c456-55a3-4d0c-8555-ebe4c2a16037">
-           <form enctype="multipart/form-data" id="2b51ee9b-7d2f-49db-a31a-52209a540481" method="POST">
+          <div class="ms-3" id="0b9f3f2a-7084-4bbe-b2e4-ef8554e43835">
+           <form enctype="multipart/form-data" id="00b68608-3fd9-4373-8d9f-2ddecc526ff6" method="POST">
             <div class="form-check form-switch">
-             <input autocomplete="off" class="form-check-input" id="7bcd1960-8f54-435a-87e4-ffa608276a61" name="opt1" type="checkbox"/>
-             <label class="form-check-label" for="7bcd1960-8f54-435a-87e4-ffa608276a61">
+             <input autocomplete="off" class="form-check-input" id="a9f86ce4-2fd8-46d5-aae0-3fda6a913b9c" name="opt1" type="checkbox"/>
+             <label class="form-check-label" for="a9f86ce4-2fd8-46d5-aae0-3fda6a913b9c">
               One
              </label>
             </div>
             <div class="form-check form-switch">
-             <input autocomplete="off" checked="" class="form-check-input" id="1d20e08c-992b-4934-9af1-e99746f3e876" name="opt2" type="checkbox"/>
-             <label class="form-check-label" for="1d20e08c-992b-4934-9af1-e99746f3e876">
+             <input autocomplete="off" checked="" class="form-check-input" id="8bb2c929-e8d9-46a4-967b-facaf3a7050e" name="opt2" type="checkbox"/>
+             <label class="form-check-label" for="8bb2c929-e8d9-46a4-967b-facaf3a7050e">
               Two
              </label>
             </div>
             <div class="form-check form-switch">
-             <input autocomplete="off" class="form-check-input" disabled="" id="db16c31c-a9ad-4a91-95e1-54162e9dc861" name="opt3" type="checkbox"/>
-             <label class="form-check-label" for="db16c31c-a9ad-4a91-95e1-54162e9dc861">
+             <input autocomplete="off" class="form-check-input" disabled="" id="e8e2054e-ed81-4d21-a18d-a9cd0bdb441f" name="opt3" type="checkbox"/>
+             <label class="form-check-label" for="e8e2054e-ed81-4d21-a18d-a9cd0bdb441f">
               Three
              </label>
             </div>
             <div class="form-check form-switch">
-             <input autocomplete="off" checked="" class="form-check-input" disabled="" id="38222ec9-bb85-42c4-a2a1-d5394fa985fd" name="opt4" type="checkbox"/>
-             <label class="form-check-label" for="38222ec9-bb85-42c4-a2a1-d5394fa985fd">
+             <input autocomplete="off" checked="" class="form-check-input" disabled="" id="76eaa82b-26be-4ef0-a9d6-53fdea5ccb37" name="opt4" type="checkbox"/>
+             <label class="form-check-label" for="76eaa82b-26be-4ef0-a9d6-53fdea5ccb37">
               Four
              </label>
             </div>
            </form>
           </div>
          </div>
-         <div class="mt-5" id="6e605dd7-e504-40b1-af23-4c7d3a974b24">
-          <div class="d-flex justify-content-between" id="e2e9ff7d-48c9-4705-9c9b-ebc11fcd071e">
-           <h4 id="8bff6ee3-7109-49f7-9aa0-2c8af3a59854">
+         <div class="mt-5" id="39351345-ac3f-4041-a98f-a09bc0bbd09f">
+          <div class="d-flex justify-content-between" id="9d7bc492-5f7f-4bb9-8e06-360c0081e65b">
+           <h4 id="5bf3059a-b080-452d-920e-6bd31ece3962">
             Method
-            <span class="text-primary" id="78780c77-595d-4939-984d-414c80b31740">
+            <span class="text-primary" id="5a0b4e6d-858b-49fc-b5af-da09d20711c5">
              inline
             </span>
            </h4>
-           <div id="bcec5a8d-813d-47a5-ab67-74e6f2c0e98a">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#966167b3-bcd0-4d27-94bb-c702c4d7f73d" data-bs-toggle="collapse" id="cd9d3f52-504f-400e-9769-1e32ad98734c" onclick="return false;" type="button">
+           <div id="ad874a84-aa8d-4356-81e4-2b1425795bcc">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#96906248-8541-4b98-8c07-d375158df01d" data-bs-toggle="collapse" id="b5c4e32b-55a7-4887-a662-d6abfe60ba15" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="730ac61f-f7e8-4a2e-859b-bb4dc0cad8e0">
+          <span class="text-muted" id="204f724b-84d1-414e-b77d-672d6ee21edd">
            Sets the check box in line.
           </span>
-          <pre id="02e9ad9c-ddba-480d-a6b9-702968927510"><code class="python">inline()</code></pre>
-          <div class="ms-3 collapse" id="966167b3-bcd0-4d27-94bb-c702c4d7f73d">
-           <h6 id="8254fe61-7acf-42a4-98b1-4ff5e83da6d1">
-            <strong>
-             Returns
-            </strong>
+          <pre id="452ad81e-9e6c-4bb4-92fc-b1299cea3aeb"><code class="python">inline()</code></pre>
+          <div class="ms-3 collapse" id="96906248-8541-4b98-8c07-d375158df01d">
+           <h6 id="0314a2c3-7874-4731-8100-1d30da418744">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="9be7da33-0006-4d3c-b293-d72fa201ded1">
+           <table class="table table-sm bg-light" id="0f0caac1-c2a9-49fc-94a8-f9c46ce1c25a">
             <thead>
              <tr>
               <th scope="col">
@@ -3573,13 +3499,11 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="1dbaa8b4-27d3-420e-8ea1-63488ef6451c">
-           <h6 id="bc2d01eb-0737-4756-b0db-067d7f379747">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="201bac5c-5739-45aa-a226-9c61c649a730">
+           <h6 id="c32b30f6-b989-4c26-a434-f22b5bcd53a8">
+            Example
            </h6>
-           <pre id="7338d2ac-e110-4bba-b7c2-47d54f38cd5f"><code class="python">from bootwrap import Form, CheckboxInput
+           <pre id="4d0ae4db-264d-436d-be8f-3bf67b788a3a"><code class="python">from bootwrap import Form, CheckboxInput
 
 Form(
     CheckboxInput('One', 'opt1').inline(),
@@ -3589,29 +3513,29 @@ Form(
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="5d267d98-361c-4616-9a26-0ec45c1fcee9">
-           <form enctype="multipart/form-data" id="b5f97a94-c4a2-4ec9-bd82-84a44e32a043" method="POST">
+          <div class="ms-3" id="802049a9-490c-4a73-ad88-620c8f8bba29">
+           <form enctype="multipart/form-data" id="cf2a55df-ed0e-43a3-876a-02c2a9a66391" method="POST">
             <div class="form-check form-check-inline">
-             <input autocomplete="off" class="form-check-input" id="469c2797-0753-4f39-88f6-b3bde5b35bdd" name="opt1" type="checkbox"/>
-             <label class="form-check-label" for="469c2797-0753-4f39-88f6-b3bde5b35bdd">
+             <input autocomplete="off" class="form-check-input" id="7072a150-a1b7-43d1-82ed-7046c6b45169" name="opt1" type="checkbox"/>
+             <label class="form-check-label" for="7072a150-a1b7-43d1-82ed-7046c6b45169">
               One
              </label>
             </div>
             <div class="form-check form-check-inline">
-             <input autocomplete="off" checked="" class="form-check-input" id="19f06394-c359-4734-8b1e-fb15edbddabd" name="opt2" type="checkbox"/>
-             <label class="form-check-label" for="19f06394-c359-4734-8b1e-fb15edbddabd">
+             <input autocomplete="off" checked="" class="form-check-input" id="584f652f-c096-4b62-a05c-3ababaf6c97d" name="opt2" type="checkbox"/>
+             <label class="form-check-label" for="584f652f-c096-4b62-a05c-3ababaf6c97d">
               Two
              </label>
             </div>
             <div class="form-check form-check-inline">
-             <input autocomplete="off" class="form-check-input" disabled="" id="af496a67-2f1e-4e4a-9b59-f51c0d519ec9" name="opt3" type="checkbox"/>
-             <label class="form-check-label" for="af496a67-2f1e-4e4a-9b59-f51c0d519ec9">
+             <input autocomplete="off" class="form-check-input" disabled="" id="e6722400-ac6d-43c5-93c0-41a731dbb998" name="opt3" type="checkbox"/>
+             <label class="form-check-label" for="e6722400-ac6d-43c5-93c0-41a731dbb998">
               Three
              </label>
             </div>
             <div class="form-check form-check-inline">
-             <input autocomplete="off" checked="" class="form-check-input" disabled="" id="bd847ca3-0367-48fa-9401-191b03fba7b1" name="opt4" type="checkbox"/>
-             <label class="form-check-label" for="bd847ca3-0367-48fa-9401-191b03fba7b1">
+             <input autocomplete="off" checked="" class="form-check-input" disabled="" id="bacbdd29-bfa3-4a03-a61a-f40673a6e822" name="opt4" type="checkbox"/>
+             <label class="form-check-label" for="bacbdd29-bfa3-4a03-a61a-f40673a6e822">
               Four
              </label>
             </div>
@@ -3620,32 +3544,30 @@ Form(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="123fcf2d-dd4c-438b-8dff-cd2dd580629d">
-        <div class="mt-5" id="3f688bfc-0704-4c53-84e5-e66c3ca6ac60">
-         <div class="d-flex justify-content-between" id="6c6b5720-d7ba-4af0-8c24-1dd2e5092b2c">
-          <h1 id="423592d1-5e55-434b-8111-deef6edc96e4">
+       <div class="tab-pane fade" id="d8b67869-7473-40ac-9063-f4814b534570">
+        <div class="mt-5" id="b30e8473-8953-4093-b248-72d05c8747a0">
+         <div class="d-flex justify-content-between" id="461e08a2-822d-4e75-bc9f-52fe95ade4ab">
+          <h1 id="a03b8775-78e4-4d65-a5f5-f50cad0492f2">
            Class
-           <span class="text-primary" id="1c34cfee-6198-40d3-bcd3-b4f5327603da">
+           <span class="text-primary" id="bf0b7113-7d09-4034-b4ca-d0b786ddf9a6">
             TextInput
            </span>
           </h1>
-          <div id="3da7679d-ccc3-4101-bf37-55a14b78f8f0">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#44de511c-6b2f-4059-b297-e0cd0c3951a5" data-bs-toggle="collapse" id="59eede88-d42f-4659-8c26-5c22bb5c87c7" onclick="return false;" type="button">
+          <div id="0da81654-11d1-4865-9886-cdd8cba22852">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#8bd28181-c815-4a62-bea2-493577d13e33" data-bs-toggle="collapse" id="6e255030-6715-4ecb-a332-62bab61ee643" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="d3b46915-2776-4c96-b241-bb83d1c816f0">
+         <span class="text-muted" id="d5170577-dffc-4619-9771-6d9ec8da5133">
           A text input.
          </span>
-         <pre id="04aba055-d89c-44e9-8c0e-818deec09587"><code class="python">TextInput(label, name, value=None, placeholder=None)</code></pre>
-         <div class="ms-3 collapse" id="44de511c-6b2f-4059-b297-e0cd0c3951a5">
-          <h6 id="157f23b8-4b0a-4777-b8ae-766da6fc6b5d">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="5e89bcb9-8bc5-4c20-ac0d-0abdef97f26a"><code class="python">TextInput(label, name, value=None, placeholder=None)</code></pre>
+         <div class="ms-3 collapse" id="8bd28181-c815-4a62-bea2-493577d13e33">
+          <h6 id="6a429744-1433-438f-8d89-359114441211">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="d143f6cc-ba18-430b-8f29-29ee9e58b0c5">
+          <table class="table table-sm bg-light" id="8bed2ede-b2c1-42fd-b29a-9fc55b0644ed">
            <thead>
             <tr>
              <th scope="col">
@@ -3723,7 +3645,7 @@ Form(
            </tbody>
           </table>
          </div>
-         <p id="5717afc5-887d-41dd-af71-ff4cbc18a0da">
+         <p id="d199f9f5-3efe-425d-a3f3-3d343ec026af">
           Use the
           <code>
            as_disabled()
@@ -3735,13 +3657,11 @@ Form(
           </code>
           component.
          </p>
-         <div class="ms-3" id="443567dc-87d8-40f6-977a-c2442379615d">
-          <h6 id="cd7dab82-cef0-440d-9ec1-70be9e09e02f">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="6d02172f-8b9d-4aee-a831-676c73a43141">
+          <h6 id="e604b5ff-b265-48d9-87c8-986984093176">
+           Example
           </h6>
-          <pre id="c8b16722-fd28-4335-a2c9-29c15af9ed86"><code class="python">from bootwrap import Form, TextInput
+          <pre id="591f16d2-0b44-4426-8cbc-0db06f028fe9"><code class="python">from bootwrap import Form, TextInput
 
 Form(
     TextInput('Text1', 'text'),
@@ -3751,67 +3671,65 @@ Form(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="bd630ef6-d74c-42e9-a145-5c2bb9acbbbf">
-          <form enctype="multipart/form-data" id="2c44c00f-089c-47d7-9b12-7d7b7031708b" method="POST">
+         <div class="ms-3" id="07d3fd50-ae10-49fb-9385-e7974d4c7168">
+          <form enctype="multipart/form-data" id="3b6aa3e1-bc37-4ed5-978f-d2d7f37bc8e1" method="POST">
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="3b867c82-2e21-41d6-886b-d2541a4406ac">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="e0029e54-df4a-4faa-a6ba-719d1db4540e">
              Text1
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <input class="form-control" id="3b867c82-2e21-41d6-886b-d2541a4406ac" name="text" type="text"/>
+             <input class="form-control" id="e0029e54-df4a-4faa-a6ba-719d1db4540e" name="text" type="text"/>
             </div>
            </div>
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="25237249-7c68-4024-aa7b-7fc2d4efe7c4">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="f8fcc362-3e43-44c5-8454-eb40c82c7777">
              Text2
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <input class="form-control" id="25237249-7c68-4024-aa7b-7fc2d4efe7c4" name="text" placeholder="type here" type="text"/>
+             <input class="form-control" id="f8fcc362-3e43-44c5-8454-eb40c82c7777" name="text" placeholder="type here" type="text"/>
             </div>
            </div>
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="e41de2b0-922f-4aed-8cb5-da8727f1b6b1">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="1c0208ae-c435-4688-a6fe-a9e713c390e2">
              Text3
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <input class="form-control" id="e41de2b0-922f-4aed-8cb5-da8727f1b6b1" name="text" type="text" value="Hello World!"/>
+             <input class="form-control" id="1c0208ae-c435-4688-a6fe-a9e713c390e2" name="text" type="text" value="Hello World!"/>
             </div>
            </div>
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="8787c299-556b-4809-939d-dbe7aafe7536">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="c5464a85-43d4-444d-9db2-081c6eadf1e6">
              Text4
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <input class="form-control" disabled="" id="8787c299-556b-4809-939d-dbe7aafe7536" name="text" type="text"/>
+             <input class="form-control" disabled="" id="c5464a85-43d4-444d-9db2-081c6eadf1e6" name="text" type="text"/>
             </div>
            </div>
           </form>
          </div>
-         <div class="mt-5" id="fcaeb9ff-4614-4b17-8e00-6b719e3dbd5e">
-          <div class="d-flex justify-content-between" id="2b1723a6-76d3-4a80-b7d1-87aa0b154c2f">
-           <h4 id="ba16c7e5-5e27-4500-9a7a-971b5b439af4">
+         <div class="mt-5" id="0ae96ae3-0666-4ec0-9c15-e1b6c3462bc8">
+          <div class="d-flex justify-content-between" id="41f2336a-c7b8-40cc-bba6-cdb40bccc33e">
+           <h4 id="002fd606-b135-49a5-8491-baddc9acc966">
             Method
-            <span class="text-primary" id="c5195465-5dd5-44ba-ad9d-27d57b30cde5">
+            <span class="text-primary" id="bcda7ed1-65da-43d0-bdce-b13b5622c9f4">
              for_email
             </span>
            </h4>
-           <div id="79f6c2e3-4156-4221-a93e-20d7c9eaec0c">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#5703edab-ba83-4368-bbc3-1c0594b2e415" data-bs-toggle="collapse" id="48b8f64f-644d-4db5-ac1e-a752195f7dd4" onclick="return false;" type="button">
+           <div id="6c0a5a02-9986-41d8-9a07-35fe105eba3a">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#90ea3993-8bc9-496b-9226-717ab399c2eb" data-bs-toggle="collapse" id="cf1a8090-679f-458b-8f78-7af69c406ac0" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="ccd87925-2b60-4772-aa11-7817deca1254">
+          <span class="text-muted" id="20f3642d-b4fc-42cd-a90a-4371fefdf23d">
            Configuring input for entering email.
           </span>
-          <pre id="5eb41a5b-1098-463b-a00d-1b282144491d"><code class="python">for_email()</code></pre>
-          <div class="ms-3 collapse" id="5703edab-ba83-4368-bbc3-1c0594b2e415">
-           <h6 id="50d511ba-cc15-4da3-bfd4-34ec1b4af27f">
-            <strong>
-             Returns
-            </strong>
+          <pre id="f9b50629-4fea-4a3b-b94e-089e193b3da0"><code class="python">for_email()</code></pre>
+          <div class="ms-3 collapse" id="90ea3993-8bc9-496b-9226-717ab399c2eb">
+           <h6 id="df6b8588-e9a0-43f7-bf2f-506b1aa07d10">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="5a348d08-b9ab-40ad-a41d-ba70c96a4087">
+           <table class="table table-sm bg-light" id="b51e5382-c3a8-4914-b853-a4ba67ce46e2">
             <thead>
              <tr>
               <th scope="col">
@@ -3844,57 +3762,53 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="1c0732d2-c09a-4d99-a47e-9218ab02e05b">
-           <h6 id="c563f4f9-2bc8-425d-aa60-a0dd481df44e">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="5ddc02a3-1d2a-46ca-8f47-2d1bbf1e90f6">
+           <h6 id="2ea4e8fa-42f3-4c02-8640-1c3c0a22b1f0">
+            Example
            </h6>
-           <pre id="c8bdcd5e-0e61-42ff-bd4a-1e8eef817877"><code class="python">from bootwrap import Form, TextInput
+           <pre id="919f68d9-506d-45c6-8e6d-946e245a4110"><code class="python">from bootwrap import Form, TextInput
 
 Form(
     TextInput('Email', 'email', 'my@email.com').for_email()
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="e4656b62-62dc-4b54-9e4a-c4188f36916c">
-           <form enctype="multipart/form-data" id="af0975e6-6d70-4015-b73e-314457b561a1" method="POST">
+          <div class="ms-3" id="273da6f9-9e8c-4626-8530-06b2eff5ab6e">
+           <form enctype="multipart/form-data" id="1cc1af43-7b06-4258-a5f3-92f1d6b559de" method="POST">
             <div class="form-group row">
-             <label class="col-sm-4 col-form-label d-flex align-items-center" for="d1c083e8-4da8-4b65-a35b-8c3296f1e1ee">
+             <label class="col-sm-4 col-form-label d-flex align-items-center" for="828c3d7e-ef2a-443d-a23d-4b1b3d927c83">
               Email
              </label>
              <div class="col-sm-8 d-flex align-items-center">
-              <input class="form-control" id="d1c083e8-4da8-4b65-a35b-8c3296f1e1ee" name="email" type="email" value="my@email.com"/>
+              <input class="form-control" id="828c3d7e-ef2a-443d-a23d-4b1b3d927c83" name="email" type="email" value="my@email.com"/>
              </div>
             </div>
            </form>
           </div>
          </div>
-         <div class="mt-5" id="d7503287-5bdb-4ca6-8067-79cbf8a0798b">
-          <div class="d-flex justify-content-between" id="cda70480-8a04-4280-8043-a52dce2850fd">
-           <h4 id="fecf1eb5-e62d-4279-b27d-702833b75742">
+         <div class="mt-5" id="51078aa3-b89f-4fb5-9289-7e0dcc3374a8">
+          <div class="d-flex justify-content-between" id="ba956d95-e9b4-400f-a6f2-fb949781dfca">
+           <h4 id="14d439ff-9796-4283-8796-08c8adfebf9e">
             Method
-            <span class="text-primary" id="0df901b8-a284-4e65-96d8-c6b072fb87df">
+            <span class="text-primary" id="2398482c-ebf4-4338-86ab-e34ee08ca51a">
              for_password
             </span>
            </h4>
-           <div id="44613c46-93c2-4ff9-96c6-45948a18e04e">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#bb2d1d4b-d849-4b17-b6a9-d00c54afc40f" data-bs-toggle="collapse" id="dcce8865-f375-45c2-867f-e354ffce0134" onclick="return false;" type="button">
+           <div id="69cba6dd-8c61-4e24-87c6-236a929d902e">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#b3353078-628c-4808-82b8-f972b43ffae9" data-bs-toggle="collapse" id="037ef1e7-ec12-4663-8b23-324021f3d2f3" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="8b996e64-b38e-499d-8ff2-6f0c327b2e56">
+          <span class="text-muted" id="f7756db8-0c50-47ac-8703-276853aaac32">
            Configuring input for entering password.
           </span>
-          <pre id="b013a6bd-f8a9-4aa0-8d6f-7b9115cc64d8"><code class="python">for_password()</code></pre>
-          <div class="ms-3 collapse" id="bb2d1d4b-d849-4b17-b6a9-d00c54afc40f">
-           <h6 id="28166f3c-d087-4bb2-bb5e-061d2dcdf1ba">
-            <strong>
-             Returns
-            </strong>
+          <pre id="c52be631-8639-4943-bdb4-4a9aa22c2bfb"><code class="python">for_password()</code></pre>
+          <div class="ms-3 collapse" id="b3353078-628c-4808-82b8-f972b43ffae9">
+           <h6 id="6ca754be-29bd-477b-8d9e-d8ebf66f1a5b">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="cf5035a2-00bc-4650-b879-c4376895e1f2">
+           <table class="table table-sm bg-light" id="948f4a10-f347-45e1-9394-656d0c9e8880">
             <thead>
              <tr>
               <th scope="col">
@@ -3927,60 +3841,56 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="59b0cf2d-cb5a-4408-b325-f7c2585a08cc">
-           <h6 id="5a5a8363-6444-4a69-86c0-b82bb358dc33">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="50fb7434-6311-4bb8-811d-63604ee7486f">
+           <h6 id="05fea330-6859-458b-9311-c738627864a4">
+            Example
            </h6>
-           <pre id="384d01c1-d1a4-45b9-b505-f327568dc4d1"><code class="python">from bootwrap import Form, TextInput
+           <pre id="d8a071e4-9d67-43d9-afae-25cd36e4e75c"><code class="python">from bootwrap import Form, TextInput
 
 Form(
     TextInput('Password', 'password', '********').for_password()
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="27cb2867-a99a-439f-98f2-8bb5839b9cf6">
-           <form enctype="multipart/form-data" id="fa061bb1-8807-4a51-bb0d-1b4ede8cad3f" method="POST">
+          <div class="ms-3" id="6c346b7d-5485-4d16-9196-c6d82f076a90">
+           <form enctype="multipart/form-data" id="a72b9a87-c79e-4305-a75e-45a5acbbf8b0" method="POST">
             <div class="form-group row">
-             <label class="col-sm-4 col-form-label d-flex align-items-center" for="e3de5e43-8ba0-4764-8968-202175762022">
+             <label class="col-sm-4 col-form-label d-flex align-items-center" for="a8c3f931-be75-43ce-8dc0-adae28b1bfe4">
               Password
              </label>
              <div class="col-sm-8 d-flex align-items-center">
-              <input class="form-control" id="e3de5e43-8ba0-4764-8968-202175762022" name="password" type="password" value="********"/>
+              <input class="form-control" id="a8c3f931-be75-43ce-8dc0-adae28b1bfe4" name="password" type="password" value="********"/>
              </div>
             </div>
            </form>
           </div>
          </div>
-         <div class="mt-5" id="8a8068b1-2caa-4a0a-b9f2-241a28a8a894">
-          <div class="d-flex justify-content-between" id="d4e80f8a-1c54-4fd0-9090-c44c828d7c3b">
-           <h4 id="6eec6619-c83e-4bf8-956f-9c0812078759">
+         <div class="mt-5" id="6b064fa9-a394-4f24-85b4-89edcc4c7286">
+          <div class="d-flex justify-content-between" id="ddbcf7d8-3ab7-4cd5-be06-0f900a9469cf">
+           <h4 id="f40f3621-8dc8-405e-ad4b-e3575a930da6">
             Method
-            <span class="text-primary" id="3db0e445-0c3e-4c89-b1ce-c2679ffaa9ae">
+            <span class="text-primary" id="f272c2b4-593a-48d0-8a00-b0c422994490">
              with_multirows
             </span>
            </h4>
-           <div id="10305328-7608-40ac-ae99-00a1a2f97210">
-            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#c97ef713-0dd6-43f8-8ec0-2fd46e0871a3" data-bs-toggle="collapse" id="052564c8-d259-4d6d-94d9-8c1d9002fb37" onclick="return false;" type="button">
+           <div id="7393dd3a-31cb-465e-940c-3a27edab9f96">
+            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#b1a9e551-0268-43f6-af34-74beb33c3725" data-bs-toggle="collapse" id="e8e2cbbb-5b79-4280-9c58-a51dfd2c5b94" onclick="return false;" type="button">
              Argument
             </button>
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#7d2ec9f2-5762-46ca-b290-35149390374f" data-bs-toggle="collapse" id="c42adaa1-1d79-4be3-bf14-c042210a5e4d" onclick="return false;" type="button">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#4498cc97-7f50-4f1b-b3db-32c83a497ab3" data-bs-toggle="collapse" id="5285758f-4055-4203-98f4-6fd21cfd5da3" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="88cccda8-672e-40e6-9c03-a1cdb0dfa052">
+          <span class="text-muted" id="96aefc3f-4089-43a9-bd72-d584b457edb2">
            Sets the number of rows.
           </span>
-          <pre id="1669f772-80bf-4138-ad6a-0f5484a6e147"><code class="python">with_multirows(n)</code></pre>
-          <div class="ms-3 collapse" id="c97ef713-0dd6-43f8-8ec0-2fd46e0871a3">
-           <h6 id="7b9fd4af-ab62-4674-81c7-8604d9bbf4fa">
-            <strong>
-             Arguments
-            </strong>
+          <pre id="796d5b9c-ca8a-449a-a6d1-ab4810cac9fd"><code class="python">with_multirows(n)</code></pre>
+          <div class="ms-3 collapse" id="b1a9e551-0268-43f6-af34-74beb33c3725">
+           <h6 id="a84d43b5-4fc4-496d-b328-b835f7e91f8d">
+            Arguments
            </h6>
-           <table class="table table-sm bg-light" id="5c4f2f07-a81d-4a15-be9a-45b70d327813">
+           <table class="table table-sm bg-light" id="1c1b314c-9276-4d72-a278-5279713cf6c0">
             <thead>
              <tr>
               <th scope="col">
@@ -4013,13 +3923,11 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3 collapse" id="7d2ec9f2-5762-46ca-b290-35149390374f">
-           <h6 id="0f4459e3-bc0e-42b9-854f-bbfb26faf801">
-            <strong>
-             Returns
-            </strong>
+          <div class="ms-3 collapse" id="4498cc97-7f50-4f1b-b3db-32c83a497ab3">
+           <h6 id="6dd6b18b-3312-4ebc-bf2c-fb80ef404b24">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="53c4906e-fe93-47ce-8b29-f6f38fc8c562">
+           <table class="table table-sm bg-light" id="cc46340d-c92a-4f02-a85b-2d7313f2b422">
             <thead>
              <tr>
               <th scope="col">
@@ -4052,27 +3960,25 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="618f4cbb-0360-4048-aded-68ea997f2951">
-           <h6 id="0cb2cc0e-60d7-426e-ac59-92704c3f33d9">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="e872bb57-05a1-4549-8158-db223e48ec13">
+           <h6 id="6028fa4b-2015-4f97-a5dd-41ecfeedfc3f">
+            Example
            </h6>
-           <pre id="8ecbdc66-8e5d-438e-a18b-a1f423ebab62"><code class="python">from bootwrap import Form, TextInput
+           <pre id="5bcb23d7-173c-43c6-a906-935ac344b46e"><code class="python">from bootwrap import Form, TextInput
 
 Form(
     TextInput('Text', 'text').with_multirows(3)
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="55e1b4b8-1076-4392-926f-3957e454e5d3">
-           <form enctype="multipart/form-data" id="d3525aa1-89f5-4a57-9121-7f78244df901" method="POST">
+          <div class="ms-3" id="f424f897-411a-426f-b474-ba0c72e058ca">
+           <form enctype="multipart/form-data" id="3c0605be-5988-4843-8acc-c617699f7a6b" method="POST">
             <div class="form-group row">
-             <label class="col-sm-4 col-form-label d-flex align-items-center" for="4ca7de61-e834-47c6-9cd7-ed699c671038">
+             <label class="col-sm-4 col-form-label d-flex align-items-center" for="0142c3a9-386f-47a4-86c3-f34677f8aa1e">
               Text
              </label>
              <div class="col-sm-8 d-flex align-items-center">
-              <textarea class="form-control" id="4ca7de61-e834-47c6-9cd7-ed699c671038" name="text" rows="3">
+              <textarea class="form-control" id="0142c3a9-386f-47a4-86c3-f34677f8aa1e" name="text" rows="3">
                     
                 </textarea>
              </div>
@@ -4082,32 +3988,30 @@ Form(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="bfceab63-40f1-4ecd-8949-0ff127a398ca">
-        <div class="mt-5" id="5c38cc4d-2814-46ea-9081-d914bd0d3761">
-         <div class="d-flex justify-content-between" id="191324e9-bb92-4b4e-a061-08daf8f730c8">
-          <h1 id="92da11ab-ff75-49b7-a5ed-b2c7980fbbc1">
+       <div class="tab-pane fade" id="e4be5864-8f11-4004-a008-abd76b6eab2a">
+        <div class="mt-5" id="93538824-170c-46a9-83ee-dd3118bf7eae">
+         <div class="d-flex justify-content-between" id="88a56be3-918e-4023-8443-5b06599081a0">
+          <h1 id="39be7e19-1bbd-4100-bce9-b495c569e317">
            Class
-           <span class="text-primary" id="0fe258fa-7297-4b1f-9cf0-727632fc72a1">
+           <span class="text-primary" id="8ab5d316-a280-4684-bd45-0ee05b89cc42">
             NumericInput
            </span>
           </h1>
-          <div id="595803ff-be50-4b9d-b34e-7f6ca12d8712">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#5febf730-f568-471a-bca4-38c821c15be2" data-bs-toggle="collapse" id="9edc7a8c-10df-4ef1-99a1-cca9df5eb083" onclick="return false;" type="button">
+          <div id="2a9a46b6-3aeb-4751-be22-7156ef25d4c2">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#fdaed65f-d1fe-4e23-88ba-7fccc32c5196" data-bs-toggle="collapse" id="80777196-3aa7-45e1-87d9-3a428a0bfa38" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="a035bc45-ce97-4b2d-bcaf-baedb78c5d9e">
+         <span class="text-muted" id="7d133d7c-52df-42ed-8c5a-1f98e065782e">
           A numeric input.
          </span>
-         <pre id="0a8f93d2-d2b2-4739-9416-86cf9815318c"><code class="python">NumericInput(label, name, value=None, placeholder=None)</code></pre>
-         <div class="ms-3 collapse" id="5febf730-f568-471a-bca4-38c821c15be2">
-          <h6 id="e5c05823-500d-4ef7-96bb-b743da07582e">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="0f3a5105-9d5e-421d-a017-29f7d7764650"><code class="python">NumericInput(label, name, value=None, placeholder=None)</code></pre>
+         <div class="ms-3 collapse" id="fdaed65f-d1fe-4e23-88ba-7fccc32c5196">
+          <h6 id="894a4481-e948-466f-98f3-5d30f7feebc0">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="45c2c8c4-3e61-4fa2-8b96-9e3b89fedaca">
+          <table class="table table-sm bg-light" id="877ece52-32e1-48a3-bc72-d2d74777be5e">
            <thead>
             <tr>
              <th scope="col">
@@ -4185,7 +4089,7 @@ Form(
            </tbody>
           </table>
          </div>
-         <p id="b7f89702-e417-431f-8eae-b13ca41f6035">
+         <p id="f52a7945-e0d7-455b-863c-c0624ff17e16">
           Use the
           <code>
            as_disabled()
@@ -4197,13 +4101,11 @@ Form(
           </code>
           component.
          </p>
-         <div class="ms-3" id="6d5cd739-be0d-4c92-980c-f40eb34da784">
-          <h6 id="57f6f3b1-adf7-40e3-97d7-45839dc53cec">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="3cad042f-8f93-446e-ac0c-fa7ac6084728">
+          <h6 id="a2bc9f47-959e-4dad-8b25-a80e3b1a4e88">
+           Example
           </h6>
-          <pre id="6d404919-aa49-4305-8258-1199674f8d60"><code class="python">from bootwrap import Form, NumericInput
+          <pre id="864836bd-67d1-47ea-9a43-70fd6a0bb533"><code class="python">from bootwrap import Form, NumericInput
 
 Form(
     NumericInput('Number1', 'number'),
@@ -4213,70 +4115,68 @@ Form(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="0d899bb7-37f7-4d13-ac05-06bc60996864">
-          <form enctype="multipart/form-data" id="68861014-3f53-4dc3-9a63-11de0cf522e3" method="POST">
+         <div class="ms-3" id="215b67ff-08a2-44a1-9cb7-1fd625ba7bb6">
+          <form enctype="multipart/form-data" id="3e6665d8-973a-4f7d-b712-6a2767d2c0a4" method="POST">
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="326f0d69-5f20-4071-9a2a-1d278a696579">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="a0384439-bd1c-4b8e-9ced-1e80a191b62f">
              Number1
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <input class="form-control" id="326f0d69-5f20-4071-9a2a-1d278a696579" name="number" type="number"/>
+             <input class="form-control" id="a0384439-bd1c-4b8e-9ced-1e80a191b62f" name="number" type="number"/>
             </div>
            </div>
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="2793468b-e016-416d-be36-a5e1fa5318a0">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="8a6a5958-5716-401d-9ba4-a618490024ff">
              Number2
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <input class="form-control" id="2793468b-e016-416d-be36-a5e1fa5318a0" name="number" placeholder="type here" type="number"/>
+             <input class="form-control" id="8a6a5958-5716-401d-9ba4-a618490024ff" name="number" placeholder="type here" type="number"/>
             </div>
            </div>
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="663da1bd-5e52-4c94-bc45-23bfa1208af0">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="25e877af-4103-4100-83e4-47dd62eaf136">
              Number3
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <input class="form-control" id="663da1bd-5e52-4c94-bc45-23bfa1208af0" name="number" type="number" value="123"/>
+             <input class="form-control" id="25e877af-4103-4100-83e4-47dd62eaf136" name="number" type="number" value="123"/>
             </div>
            </div>
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="03412ab5-58ea-4f98-a5dc-955599f0861f">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="5459e550-f863-4ca2-ade0-ba2451c1e63a">
              Number4
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <input class="form-control" disabled="" id="03412ab5-58ea-4f98-a5dc-955599f0861f" name="number" type="number"/>
+             <input class="form-control" disabled="" id="5459e550-f863-4ca2-ade0-ba2451c1e63a" name="number" type="number"/>
             </div>
            </div>
           </form>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="5d869292-0bf0-463f-86a8-5264a5b4433f">
-        <div class="mt-5" id="6e01f052-d3de-4365-b2a5-6037ae831969">
-         <div class="d-flex justify-content-between" id="5b0b0e2a-7401-46ef-a858-cfa5fdf9d4ec">
-          <h1 id="dd1914a6-45cf-4f7e-b0b3-c2804cc77864">
+       <div class="tab-pane fade" id="8401add8-cf0e-4cd4-b2fc-afd4ee2e48df">
+        <div class="mt-5" id="d9a6663e-597b-40a2-a92d-cc7cf54dc59d">
+         <div class="d-flex justify-content-between" id="f57abd48-6337-4db8-9b90-05f422a3ca5b">
+          <h1 id="8bb3b464-b6b9-48d8-a81b-b35971650f95">
            Class
-           <span class="text-primary" id="c009e135-f460-4da8-9e59-945cd03ad015">
+           <span class="text-primary" id="3e9ca9af-286d-4957-aba5-1da1fbcb5dc8">
             SelectInput
            </span>
           </h1>
-          <div id="99db26e2-de09-4974-a12e-3d812c61f137">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#16404660-9770-4239-a3eb-aba468948a93" data-bs-toggle="collapse" id="e580b09d-a341-430e-b766-32b3450103e4" onclick="return false;" type="button">
+          <div id="31b746e2-3c41-442d-b752-2537f272cdcb">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#dcac5508-6526-49fb-8d2f-543a946e523b" data-bs-toggle="collapse" id="575faa91-0e3b-434f-80e5-1b0596870ee7" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="442107b3-ebc7-408f-b48e-0e18f3a01a05">
+         <span class="text-muted" id="4a02884d-d060-490b-ac4c-5271098c2b12">
           A select input.
          </span>
-         <pre id="2e420336-2039-4c9e-848f-dc1ab350f939"><code class="python">SelectInput(label, name, value=None, options=None)</code></pre>
-         <div class="ms-3 collapse" id="16404660-9770-4239-a3eb-aba468948a93">
-          <h6 id="d127834e-d3bc-4efe-8012-296c781c142d">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="cfae1eca-9af0-4b65-9d2c-cdc0269b30cd"><code class="python">SelectInput(label, name, value=None, options=None)</code></pre>
+         <div class="ms-3 collapse" id="dcac5508-6526-49fb-8d2f-543a946e523b">
+          <h6 id="4d49e758-9980-4493-96eb-1b7f66e2f7aa">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="8fd9d59f-6e63-4100-a742-fdb24b3f6976">
+          <table class="table table-sm bg-light" id="395d95e6-c210-4565-98aa-d32a50b1037a">
            <thead>
             <tr>
              <th scope="col">
@@ -4354,7 +4254,7 @@ Form(
            </tbody>
           </table>
          </div>
-         <p id="82a25f27-9922-49fa-896e-b33e70223262">
+         <p id="7cdecad0-f968-4736-82ed-0d94ba9ac548">
           Use the
           <code>
            as_disabled()
@@ -4366,13 +4266,11 @@ Form(
           </code>
           component.
          </p>
-         <div class="ms-3" id="725695d9-ff49-4b10-8ef3-47e39aeeb70a">
-          <h6 id="b76f1689-4fcd-419c-b8d8-769e675cedae">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="b407ccea-0b9c-48cb-bf98-7fd91ac0bc7e">
+          <h6 id="ae138696-f3d0-4c84-9c34-a37269738996">
+           Example
           </h6>
-          <pre id="4d2c5c8b-9942-4624-bb56-f12d9bca0598"><code class="python">from bootwrap import Form, SelectInput
+          <pre id="e3ca7eff-0b7f-4910-8abd-53ccfcb73bbc"><code class="python">from bootwrap import Form, SelectInput
 
 options = [
     SelectInput.Option('One', 1),
@@ -4386,39 +4284,39 @@ Form(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="d34a8b7b-79c1-49f0-882f-376ace0c8c0d">
-          <form enctype="multipart/form-data" id="9488ac40-3bc9-408a-9a28-7a9e0138fa05" method="POST">
+         <div class="ms-3" id="7c70c52e-a728-4222-b15a-81c571154cfc">
+          <form enctype="multipart/form-data" id="7ab2fd4a-320a-441a-b566-627fe6efb494" method="POST">
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="979082b8-bc55-4210-8f3c-7caa2aa852fc">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="678fc1bb-36f9-4513-9678-086a012b62c5">
              Selector1
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <select autocomplete="off" class="form-control" id="979082b8-bc55-4210-8f3c-7caa2aa852fc" name="choice">
-              <option id="988b1a07-7fdd-43e6-8440-873fd3b5ecd0" value="1">
+             <select autocomplete="off" class="form-control" id="678fc1bb-36f9-4513-9678-086a012b62c5" name="choice">
+              <option id="35c27239-b1df-4a1c-894c-c201d99014b0" value="1">
                One
               </option>
-              <option id="db0f306c-65df-4908-8520-0b58086e9f82" selected="" value="2">
+              <option id="14040ad8-fbb2-494b-99c9-919f1028cfc1" selected="" value="2">
                Two
               </option>
-              <option disabled="" id="57f4e622-5a9d-4e25-bd14-8b130595527a" value="3">
+              <option disabled="" id="f0b0be9d-f4b1-4696-9dd4-20ffcdbb8507" value="3">
                Three
               </option>
              </select>
             </div>
            </div>
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="e1ad6b45-7441-4733-8d7f-47404218b6fa">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="0e7b00f0-9928-4944-88d5-62eaeaec68ab">
              Selector2
             </label>
             <div class="col-sm-8 d-flex align-items-center">
-             <select autocomplete="off" class="form-control" disabled="" id="e1ad6b45-7441-4733-8d7f-47404218b6fa" name="choice">
-              <option id="988b1a07-7fdd-43e6-8440-873fd3b5ecd0" value="1">
+             <select autocomplete="off" class="form-control" disabled="" id="0e7b00f0-9928-4944-88d5-62eaeaec68ab" name="choice">
+              <option id="35c27239-b1df-4a1c-894c-c201d99014b0" value="1">
                One
               </option>
-              <option id="db0f306c-65df-4908-8520-0b58086e9f82" selected="" value="2">
+              <option id="14040ad8-fbb2-494b-99c9-919f1028cfc1" selected="" value="2">
                Two
               </option>
-              <option disabled="" id="57f4e622-5a9d-4e25-bd14-8b130595527a" value="3">
+              <option disabled="" id="f0b0be9d-f4b1-4696-9dd4-20ffcdbb8507" value="3">
                Three
               </option>
              </select>
@@ -4426,31 +4324,29 @@ Form(
            </div>
           </form>
          </div>
-         <div class="mt-5" id="5e5f0dbf-97e0-4497-af81-a09fbc0785a5">
-          <div class="d-flex justify-content-between" id="db73ca8f-277a-426c-9a0b-995531a1609e">
-           <h4 id="d4d2a857-4596-430a-9895-639e66c1bbaa">
+         <div class="mt-5" id="2761562c-2774-4efe-b682-7d4f9a49c3db">
+          <div class="d-flex justify-content-between" id="96c12fe2-8fe9-4f72-9ee6-b189d8e2d282">
+           <h4 id="71f78047-e08b-48c7-8f58-d42c613ca7f4">
             Method
-            <span class="text-primary" id="fa8f5ee9-4637-4585-8ff4-2396963018e9">
+            <span class="text-primary" id="12c01db1-f283-4f2f-92f3-139d7b74675f">
              as_radio
             </span>
            </h4>
-           <div id="da203bd6-8206-4f3c-8c92-2b29819ef38c">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#100312bf-0016-410d-a9c2-e98eb1b29af0" data-bs-toggle="collapse" id="3fcf44de-cd96-4fe9-a83d-a7fbc6672f56" onclick="return false;" type="button">
+           <div id="e52fed44-6553-4f00-a5f0-4aada5877298">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#c08a443b-649e-4d2f-b4a1-2932bcade0c9" data-bs-toggle="collapse" id="a760e716-1280-4ae6-b538-863ec395287f" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="2c71277a-e3a8-427f-a0b4-5a1af75896d6">
+          <span class="text-muted" id="ce5cbe3d-8d58-4f2b-a19e-73b4d217b663">
            Makes selection in a form of radio buttons.
           </span>
-          <pre id="1f9790ff-48ad-4b9d-bc9c-064ae51f3c78"><code class="python">as_radio()</code></pre>
-          <div class="ms-3 collapse" id="100312bf-0016-410d-a9c2-e98eb1b29af0">
-           <h6 id="ba34d1a9-4bad-4dad-a3f5-1f04885254b1">
-            <strong>
-             Returns
-            </strong>
+          <pre id="73883357-92ff-40dc-a6eb-d1c92f601bea"><code class="python">as_radio()</code></pre>
+          <div class="ms-3 collapse" id="c08a443b-649e-4d2f-b4a1-2932bcade0c9">
+           <h6 id="eb17adcd-5cba-427a-a630-b3d36955fb04">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="c8306736-c1b8-4a31-af68-4f163a7931f5">
+           <table class="table table-sm bg-light" id="85136f6c-e331-40ec-920f-b8ea805917dd">
             <thead>
              <tr>
               <th scope="col">
@@ -4483,13 +4379,11 @@ Form(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="7a0fd4b3-c3cb-4b51-a0ac-f78cdd56b577">
-           <h6 id="a020c723-a0cc-4dc9-9576-489237e2f4da">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="16dffbe6-2f81-4676-913d-17bf4a364816">
+           <h6 id="d98046c9-af50-400f-98ea-8e8d74283bbe">
+            Example
            </h6>
-           <pre id="c055d50d-2518-428f-a100-6afd7453b8c6"><code class="python">from bootwrap import Form, SelectInput
+           <pre id="b5c1d733-0104-4da9-a493-61fd54dded70"><code class="python">from bootwrap import Form, SelectInput
 
 options = [
     SelectInput.Option('One', 1),
@@ -4502,28 +4396,28 @@ Form(
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="c4dffc07-bc45-41ee-b3f0-9ccbaa531102">
-           <form enctype="multipart/form-data" id="a139eb62-81a0-4f3f-a928-94b41086dbdc" method="POST">
+          <div class="ms-3" id="4d80e059-2d43-455c-90ac-3e3f0d640c57">
+           <form enctype="multipart/form-data" id="1effa42c-00ed-4f54-88dc-72303854c4c1" method="POST">
             <div class="form-group row">
-             <label class="col-sm-4 col-form-label d-flex align-items-center" for="4c617f6d-7081-4b39-9a68-60f55ed50eb7">
+             <label class="col-sm-4 col-form-label d-flex align-items-center" for="f2b70d98-1490-42d8-adab-bf76333ee853">
               Selector
              </label>
              <div class="col-sm-8 d-flex align-items-center">
               <div class="form-check me-3">
-               <input autocomplete="off" class="form-check-input" id="ed761975-28ec-48f1-b063-ffb23fe085f9" name="choice" type="radio" value="1"/>
-               <label class="form-check-label me-1" for="ed761975-28ec-48f1-b063-ffb23fe085f9">
+               <input autocomplete="off" class="form-check-input" id="93b10266-5f07-467c-9613-e5377d3d5d83" name="choice" type="radio" value="1"/>
+               <label class="form-check-label me-1" for="93b10266-5f07-467c-9613-e5377d3d5d83">
                 One
                </label>
               </div>
               <div class="form-check me-3">
-               <input autocomplete="off" checked="" class="form-check-input" id="ad0f2f04-a123-492a-b657-cbb1c778dcda" name="choice" type="radio" value="2"/>
-               <label class="form-check-label me-1" for="ad0f2f04-a123-492a-b657-cbb1c778dcda">
+               <input autocomplete="off" checked="" class="form-check-input" id="21dca68c-2933-4668-bd48-0122b34050dc" name="choice" type="radio" value="2"/>
+               <label class="form-check-label me-1" for="21dca68c-2933-4668-bd48-0122b34050dc">
                 Two
                </label>
               </div>
               <div class="form-check me-3">
-               <input autocomplete="off" class="form-check-input" disabled="" id="1492d611-ca0d-42aa-a1b0-d63d938a0f45" name="choice" type="radio" value="3"/>
-               <label class="form-check-label me-1" for="1492d611-ca0d-42aa-a1b0-d63d938a0f45">
+               <input autocomplete="off" class="form-check-input" disabled="" id="be3b2728-15d5-462b-8bec-41e973852c8c" name="choice" type="radio" value="3"/>
+               <label class="form-check-label me-1" for="be3b2728-15d5-462b-8bec-41e973852c8c">
                 Three
                </label>
               </div>
@@ -4534,36 +4428,34 @@ Form(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="427f4877-f108-4f8f-9a2b-466f9037f2a0">
-        <div class="mt-5" id="114a995d-0f58-49d4-b4b8-0561d8f59e10">
-         <div class="d-flex justify-content-between" id="073b453c-eca5-4e4b-b99d-f87de735df73">
-          <h1 id="c8a1bee4-c8f4-45e8-9541-0f4a745ea097">
+       <div class="tab-pane fade" id="e10964cd-9112-4662-ac42-91dfcea64e3e">
+        <div class="mt-5" id="7c54348c-0fdf-407a-add9-45229d08d8ae">
+         <div class="d-flex justify-content-between" id="afb3503b-f787-40ba-be92-10c4ae10f937">
+          <h1 id="90fc24c0-10a3-480e-9dfa-77768405f973">
            Class
-           <span class="text-primary" id="9416c5f1-f727-4e49-8541-1bb69c7bea23">
+           <span class="text-primary" id="9ac6df6e-32e1-44a2-8f41-9be002c439b6">
             SelectInput.Option
            </span>
           </h1>
-          <div id="4667995a-5f35-47a4-bedb-7c7363df1234">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#2b0b189b-0afe-46a1-a00a-790ccd4cf2e6" data-bs-toggle="collapse" id="efc9b1ae-5eed-44e5-a002-eb17213a61fe" onclick="return false;" type="button">
+          <div id="32d0a530-5e88-44d3-bae6-de4f1ca84483">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#bbfd26f8-e174-4d02-9e7a-f62a86b55693" data-bs-toggle="collapse" id="685ae3fc-5a6c-45b1-a5ec-5e10c878ce7b" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="428609cc-2684-425a-989d-d49fcf9bfdf0">
+         <span class="text-muted" id="c8612afc-a95d-4aa6-9f43-3ebe3d4a0e86">
           An option used by
           <code>
            SelectInput
           </code>
           .
          </span>
-         <pre id="74b7f734-92e5-4975-8ea9-71934b569ef3"><code class="python">SelectInput.Option(name, value, disabled=False)</code></pre>
-         <div class="ms-3 collapse" id="2b0b189b-0afe-46a1-a00a-790ccd4cf2e6">
-          <h6 id="833a986f-a631-44fd-9967-ec7e8dabac81">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="e10dc958-cc18-4908-bd7f-4b7bcd7b63e3"><code class="python">SelectInput.Option(name, value, disabled=False)</code></pre>
+         <div class="ms-3 collapse" id="bbfd26f8-e174-4d02-9e7a-f62a86b55693">
+          <h6 id="8da41d4d-094c-473c-bc19-61950be30c63">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="a0f4083e-d63a-40fe-8b9c-0f6e5144301b">
+          <table class="table table-sm bg-light" id="36d2bbaa-255e-466d-a979-05059c398651">
            <thead>
             <tr>
              <th scope="col">
@@ -4630,67 +4522,65 @@ Form(
            </tbody>
           </table>
          </div>
-         <div class="mt-5" id="a2ff268f-f16a-4d64-b43a-66d6913ffecd">
-          <h4 id="7776b569-96c5-46f9-ab22-90c501e075ca">
+         <div class="mt-5" id="2d077c8a-fe77-4789-8474-451108b43a7d">
+          <h4 id="477b5bc1-f1aa-4549-b88d-32316b6818f1">
            Property
-           <span class="text-primary" id="97a88dea-c603-494e-a2a5-0206364857da">
+           <span class="text-primary" id="aa15f95a-a9b4-4cd5-9c10-0a12d9714984">
             disabled
            </span>
           </h4>
-          <span class="text-muted" id="f3dc779c-a6a1-4e28-bfd1-c1fd301400be">
+          <span class="text-muted" id="62c40ae2-261c-49a8-84db-5b31253052f6">
            None
           </span>
          </div>
-         <div class="mt-5" id="09ca6ed5-bd05-4976-8aec-fe202048b39a">
-          <h4 id="aa56d1f5-6819-4a99-b70e-28d1125b727b">
+         <div class="mt-5" id="ab94bddd-2f83-4d1b-a397-e1f91d445826">
+          <h4 id="0759ec6e-c861-4107-ad4c-18dc81da50d3">
            Property
-           <span class="text-primary" id="c09efb21-21bb-40ba-b9c6-3171caa8ffe8">
+           <span class="text-primary" id="cc64b926-83b7-40e1-8ee2-a23552453237">
             name
            </span>
           </h4>
-          <span class="text-muted" id="2060ea16-5f6e-42e1-80e0-6fee325ce8b1">
+          <span class="text-muted" id="6ccac5ce-9301-4cb8-8e6a-d5d7caeaef60">
            None
           </span>
          </div>
-         <div class="mt-5" id="ea689c51-f3fb-4431-9f95-9e359bd268ca">
-          <h4 id="a154c7b0-fbcc-46f6-b42e-08829fae4c90">
+         <div class="mt-5" id="7ebeec11-d56c-470f-a937-abeffbe96423">
+          <h4 id="57b28bba-ac8b-4009-b329-17bb2e70b6c7">
            Property
-           <span class="text-primary" id="54a15b76-379c-4475-ab21-a377a12621e4">
+           <span class="text-primary" id="dbf0e94b-fbe8-4c93-b33d-c389377fc738">
             value
            </span>
           </h4>
-          <span class="text-muted" id="6d264bc6-99c4-4a57-a2e5-5ba36548359c">
+          <span class="text-muted" id="e1cadea5-7dc7-4b7d-bc56-b807e17f7f40">
            None
           </span>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="fb83c5e9-b366-4ae6-8f36-bd4b01a02d05">
-        <div class="mt-5" id="f83d1c39-6f7a-47b1-9897-45e47241a0d8">
-         <div class="d-flex justify-content-between" id="36e6f2c4-42de-46ca-97f2-45fd314bb5a3">
-          <h1 id="4b4b8aef-4522-46ba-838e-8cc8170789f5">
+       <div class="tab-pane fade" id="bb4c64ea-e55b-4a83-a39b-98f0f88db5c7">
+        <div class="mt-5" id="65b8be5c-99d6-47a4-ba35-028bb0b830ec">
+         <div class="d-flex justify-content-between" id="6aff8ae2-62d3-4e85-81ac-16a02f01d69d">
+          <h1 id="c4a48e0a-1055-437e-9728-1ae489d33aa5">
            Class
-           <span class="text-primary" id="f113f118-9e53-4618-a7b0-70af17a6d3ea">
+           <span class="text-primary" id="5ad30832-5eb6-4c98-991b-ddbff4e07dcb">
             HiddenInput
            </span>
           </h1>
-          <div id="44506015-a974-48b0-8c98-7fffee5b6fd0">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#b04e874f-2d04-49f0-85bb-89fb7d101cee" data-bs-toggle="collapse" id="49d855da-5494-4a5f-9b56-cfc1a63601d0" onclick="return false;" type="button">
+          <div id="6be91896-0e83-4a42-8a1b-e449d778cf09">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#27ef6f5a-a05a-458d-9e81-9de5c90f9beb" data-bs-toggle="collapse" id="7824504c-8296-40e9-8a99-a43c4e26d6d7" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="477452f8-1e10-449a-891f-eba243fd53ea">
+         <span class="text-muted" id="58289105-4415-4f55-8c7f-3d0e275bcb55">
           A hidden input.
          </span>
-         <pre id="c362c554-d3ad-4867-a3f2-25f43c689d83"><code class="python">HiddenInput(name, value=None)</code></pre>
-         <div class="ms-3 collapse" id="b04e874f-2d04-49f0-85bb-89fb7d101cee">
-          <h6 id="0a47e087-93c2-4bf4-9b2d-209eebf5bdd4">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="58e177fa-7cfd-4e67-92f0-51480eeba089"><code class="python">HiddenInput(name, value=None)</code></pre>
+         <div class="ms-3 collapse" id="27ef6f5a-a05a-458d-9e81-9de5c90f9beb">
+          <h6 id="844dc416-37a4-4a49-bc76-4bd07080176b">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="e6f045c5-be56-4212-820b-3e7e70f646f1">
+          <table class="table table-sm bg-light" id="6d862196-f45c-4c3e-9064-8e76006e76d2">
            <thead>
             <tr>
              <th scope="col">
@@ -4738,13 +4628,11 @@ Form(
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="c93fdfcc-34d6-46f2-ad97-3ac97758aba8">
-          <h6 id="b90c83bf-e3ae-410d-a404-792aea9cd3ea">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="d5034316-d1eb-4542-95a1-4822846f6b2d">
+          <h6 id="d8f7c32d-3247-4da8-9416-33d35363ebc8">
+           Example
           </h6>
-          <pre id="58a54b83-624c-4a4e-a364-1ab3bd567d1e"><code class="python">from bootwrap import Form, SelectInput
+          <pre id="a3df3146-c0d4-419e-9823-426546593b13"><code class="python">from bootwrap import Form, SelectInput
 
 Form(
     HiddenInput('token', '123')
@@ -4753,32 +4641,30 @@ Form(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="300d1e09-eb1e-4b87-aa0b-c65c2942af56">
-        <div class="mt-5" id="e546aa10-0f56-4769-bc4c-392c4c801bd7">
-         <div class="d-flex justify-content-between" id="d8a180d8-37fe-4b0e-bb67-cb2d187bbaea">
-          <h1 id="cfe8b730-3a41-4457-b111-2ebe53bc3f56">
+       <div class="tab-pane fade" id="f5ac1312-9b0c-4d38-9b52-c4f6243ac39a">
+        <div class="mt-5" id="46e95d27-793f-4641-9da8-4598e39f14a5">
+         <div class="d-flex justify-content-between" id="d8de0c76-602e-4d82-857b-008c5c3a66b3">
+          <h1 id="3b0f05bc-be40-4c56-babc-974620c1c9ee">
            Class
-           <span class="text-primary" id="9a7b7712-5347-4b94-b39b-810cdc38f22f">
+           <span class="text-primary" id="2b9ce31d-ab3c-4f9d-ad80-f94c7b634f5a">
             FileInput
            </span>
           </h1>
-          <div id="254b915d-128b-463b-af89-e596abcb6901">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#c0da2dde-470d-42a7-b0fb-979d5c433b55" data-bs-toggle="collapse" id="5e906832-59d3-4e4c-bb8c-52dfe368a47f" onclick="return false;" type="button">
+          <div id="aeb4c86e-56ef-464d-913b-c19e649b0656">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#7a04e269-6d39-4161-a039-daacf4956816" data-bs-toggle="collapse" id="1e9219b2-501e-4679-9906-5e900034c05c" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="233c9b84-eba2-4d81-b50f-5abecdf3c187">
+         <span class="text-muted" id="91f63b09-3a97-41ee-9a03-60ea14d28ba3">
           A file input.
          </span>
-         <pre id="38899280-7a77-4424-9971-17330d64d062"><code class="python">FileInput(label, name)</code></pre>
-         <div class="ms-3 collapse" id="c0da2dde-470d-42a7-b0fb-979d5c433b55">
-          <h6 id="2ddaebc6-69c1-4cac-a7da-f876499b7554">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="2d0bc18e-a12b-4eb8-9ddc-2f340acbdf1a"><code class="python">FileInput(label, name)</code></pre>
+         <div class="ms-3 collapse" id="7a04e269-6d39-4161-a039-daacf4956816">
+          <h6 id="ade8f28b-afd0-404c-b754-a42a0d3f95ea">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="ce4c511e-f781-4ff8-a471-24dc869f2a70">
+          <table class="table table-sm bg-light" id="d913e452-a60f-4ceb-9b70-37e62b014e29">
            <thead>
             <tr>
              <th scope="col">
@@ -4826,7 +4712,7 @@ Form(
            </tbody>
           </table>
          </div>
-         <p id="486ae513-2eb6-4b71-bfa9-ac0c85a5231e">
+         <p id="4254c111-5a8c-48d4-b442-1fc8c6b0092d">
           Use the
           <code>
            as_disabled()
@@ -4838,13 +4724,11 @@ Form(
           </code>
           component.
          </p>
-         <div class="ms-3" id="5f9e589b-8657-400c-9973-e41ccb17ab9c">
-          <h6 id="24ddd418-3ad8-43c0-a054-c3376ed2a799">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="dc849016-997c-4d08-a60c-46d328be57b8">
+          <h6 id="6b1cb628-dbec-43cb-982a-7f0b598c90ac">
+           Example
           </h6>
-          <pre id="7e26f257-a1bd-41a2-ae8e-50ce089a9cfe"><code class="python">from bootwrap import Form, FileInput
+          <pre id="39fcb086-0268-4b54-a0e0-31d174f15460"><code class="python">from bootwrap import Form, FileInput
 
 Form(
     FileInput('File', 'file'),
@@ -4852,10 +4736,10 @@ Form(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="6a94d681-d359-439d-b40f-235a02e775b3">
-          <form enctype="multipart/form-data" id="57aca15f-fd9e-4703-9ce1-37091b29ab45" method="POST">
+         <div class="ms-3" id="87a4b6c2-b335-4910-be57-7b2c5b843d7c">
+          <form enctype="multipart/form-data" id="df425d33-5368-4729-aea7-aa76e1891d80" method="POST">
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="830425d6-ec65-4c9d-afa0-45f1992a2902">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="181fca47-ddec-4567-9156-f18c28d8f07a">
              File
             </label>
             <div class="col-sm-8 d-flex align-items-center">
@@ -4866,13 +4750,13 @@ Form(
                <span class="btn btn-secondary" onclick="$(this).parent().find('input[type=file]').click();">
                 Browse
                </span>
-               <input id="830425d6-ec65-4c9d-afa0-45f1992a2902" name="file" onchange="$(this).parent().parent().find('.form-control').htms($(this).val().split(/[\|/]/).pop());" style="display: none;" type="file"/>
+               <input id="181fca47-ddec-4567-9156-f18c28d8f07a" name="file" onchange="$(this).parent().parent().find('.form-control').htms($(this).val().split(/[\|/]/).pop());" style="display: none;" type="file"/>
               </div>
              </div>
             </div>
            </div>
            <div class="form-group row">
-            <label class="col-sm-4 col-form-label d-flex align-items-center" for="0bd71b3c-09e2-4a7b-9308-f610e55be280">
+            <label class="col-sm-4 col-form-label d-flex align-items-center" for="6032222d-0d03-4ad1-b139-462e503f7213">
              File
             </label>
             <div class="col-sm-8 d-flex align-items-center">
@@ -4883,7 +4767,7 @@ Form(
                <span class="btn btn-secondary disabled" onclick="$(this).parent().find('input[type=file]').click();">
                 Browse
                </span>
-               <input disabled="" id="0bd71b3c-09e2-4a7b-9308-f610e55be280" name="file" onchange="$(this).parent().parent().find('.form-control').htms($(this).val().split(/[\|/]/).pop());" style="display: none;" type="file"/>
+               <input disabled="" id="6032222d-0d03-4ad1-b139-462e503f7213" name="file" onchange="$(this).parent().parent().find('.form-control').htms($(this).val().split(/[\|/]/).pop());" style="display: none;" type="file"/>
               </div>
              </div>
             </div>
@@ -4892,32 +4776,30 @@ Form(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="23fee003-79da-4833-8c07-7a3e2e77cbf7">
-        <div class="mt-5" id="27c544eb-7873-4e81-b69a-6cb7feec52b3">
-         <div class="d-flex justify-content-between" id="cbd24f81-8f14-4ae8-91f0-8073ea1bb5f6">
-          <h1 id="c33680f7-bc1d-436f-86e8-1dc585640b06">
+       <div class="tab-pane fade" id="90907e3e-d810-43cd-ab00-918aaff8df0f">
+        <div class="mt-5" id="0e4cf541-1956-4e1f-b53f-4a29451e9de8">
+         <div class="d-flex justify-content-between" id="f8da4b01-13ae-4bd0-8e5a-12335cd697ed">
+          <h1 id="2443ce77-2fc7-4956-aa04-3d775a014cb5">
            Class
-           <span class="text-primary" id="7e111a08-bfdf-42e1-8e6d-bc2168efe6ba">
+           <span class="text-primary" id="a6de3228-4b24-4745-9fd2-b9ed03d6579a">
             InputGroup
            </span>
           </h1>
-          <div id="00d4664f-67da-494c-bcc7-9ae8b169e491">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#e3d6d0ab-1e2a-4d36-af01-fb1c30b5ce20" data-bs-toggle="collapse" id="8ef2697e-70fc-4d70-9da3-94b89b9c58fc" onclick="return false;" type="button">
+          <div id="26eabefd-800b-4231-a6a7-7fdcb535797c">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#94feea0a-37a7-48ec-ac3a-ed44cb1420c3" data-bs-toggle="collapse" id="6f1c4038-fe3e-49c4-9607-c10b13947fe4" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="75d53f52-5a0d-48d3-b636-62f659a3afbe">
+         <span class="text-muted" id="c735a384-a3e8-46d0-8886-012aa4d86f7d">
           A web component for an input group.
          </span>
-         <pre id="0fbde827-9f34-46cf-bdca-6bdb74678d59"><code class="python">InputGroup(*inputs)</code></pre>
-         <div class="ms-3 collapse" id="e3d6d0ab-1e2a-4d36-af01-fb1c30b5ce20">
-          <h6 id="4f87a50e-4c2d-4eab-a0d1-03e773944fc4">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="8606990d-fb69-4a8d-a50e-24f5c294ab68"><code class="python">InputGroup(*inputs)</code></pre>
+         <div class="ms-3 collapse" id="94feea0a-37a7-48ec-ac3a-ed44cb1420c3">
+          <h6 id="64251f3c-28be-432c-97a4-b03d12698d42">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="95ea2b47-68c7-4e43-a5c8-759a7bf84db4">
+          <table class="table table-sm bg-light" id="e87ac4bf-8bed-41f2-a903-12864ad3c3eb">
            <thead>
             <tr>
              <th scope="col">
@@ -4954,16 +4836,14 @@ Form(
            </tbody>
           </table>
          </div>
-         <p id="dfb13756-bad9-4427-abe0-f892c525f1e7">
+         <p id="64d82c92-9bdd-48e4-96c5-2c42e750eb09">
           Grous together a series of input components
          </p>
-         <div class="ms-3" id="73914071-fa6a-479e-afc5-da825c6125c9">
-          <h6 id="f3a225c4-7f3d-4fe9-95f5-cd8054e42e5c">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="062a47ea-0d74-4587-9960-29e35c1a2338">
+          <h6 id="32fdebb1-2c01-4ed3-8e33-ff574c763525">
+           Example
           </h6>
-          <pre id="815a46b8-114f-4ec4-93e7-23041100b3ea"><code class="python">from bootwrap import Text, TextInput, NumericInput, InputGroup, Form
+          <pre id="2a7d687e-e60d-4e2b-8d52-4a7021896d76"><code class="python">from bootwrap import Text, TextInput, NumericInput, InputGroup, Form
 
 at = Text("@")
 username = TextInput(None, 'username', placeholder='type username')
@@ -4990,35 +4870,35 @@ ig4 = InputGroup(login, at, password).mb(2)
 Form(ig1,ig2,ig3,ig4)
 </code></pre>
          </div>
-         <div class="ms-3" id="8344fe4e-7840-48a0-8741-fa0ed60156d5">
-          <form enctype="multipart/form-data" id="39864269-72ad-4f4e-a360-ae279c973c35" method="POST">
-           <div class="mb-2 input-group" id="c0be2a6a-6c30-4cf6-bfa5-d8e64a4c26c9" role="group">
-            <span class="input-group-text" id="21ac3948-8616-453d-ad6c-3085320e974c">
+         <div class="ms-3" id="1cdf40cb-722d-483a-8262-24692271eed3">
+          <form enctype="multipart/form-data" id="da2f5b76-151c-4062-afdd-bc105ff2652f" method="POST">
+           <div class="mb-2 input-group" id="d62868f2-4717-4aeb-a5bc-65e9944b320b" role="group">
+            <span class="input-group-text" id="2e83ced2-df7b-4b9a-b64f-b2847ff973d5">
              @
             </span>
-            <input class="form-control" id="14175884-534a-4b1a-a4d6-e1a836e2c30d" name="username" placeholder="type username" type="text"/>
+            <input class="form-control" id="2c32d8e0-a291-42c4-9aa7-23c685b47369" name="username" placeholder="type username" type="text"/>
            </div>
-           <div class="mb-2 input-group" id="2fdd2da1-7974-4515-8f28-f9293caea045" role="group">
-            <input class="form-control" id="4f146d64-29d5-4f63-a850-dbde28e0193f" name="recipient" placeholder="Recipient username" type="text"/>
-            <span class="input-group-text" id="1145a8de-aca4-4f27-9326-9dae21155555">
+           <div class="mb-2 input-group" id="ac0bb919-290a-477e-9c53-668080bf2c87" role="group">
+            <input class="form-control" id="573af42f-c4f3-4d9a-a545-9be5bc75165e" name="recipient" placeholder="Recipient username" type="text"/>
+            <span class="input-group-text" id="8c9ec800-cdc3-42d0-9ad6-e64ab8f8c47c">
              @example.com
             </span>
            </div>
-           <div class="mb-2 input-group" id="9ecab3ad-6b5d-4e45-af1d-afc5aaacd77a" role="group">
-            <span class="input-group-text" id="a8369a42-f833-4d1d-a259-f1b36afbed28">
+           <div class="mb-2 input-group" id="1eeaf6be-30cd-41da-a669-e4de6bc11041" role="group">
+            <span class="input-group-text" id="67302209-d5ef-4680-86e5-db0fd6f18476">
              $
             </span>
-            <input class="form-control" id="27165df5-cb67-4ca0-8f64-1877256fa742" name="amount" placeholder="Amount (to the nearest dollar)" type="number"/>
-            <span class="input-group-text" id="7271e675-7248-4039-ba45-9d0f0b6f366d">
+            <input class="form-control" id="c1623178-6fac-43ac-ab0a-079097667661" name="amount" placeholder="Amount (to the nearest dollar)" type="number"/>
+            <span class="input-group-text" id="f657f6f7-d273-4282-83a5-f2ae86e8f2cf">
              .00
             </span>
            </div>
-           <div class="mb-2 input-group" id="5a4cc5ea-8c59-4700-b6e1-7d30f7788d67" role="group">
-            <input class="form-control" id="8c607d18-e27e-406f-b57b-34a8350cc2cb" name="login" placeholder="Login" type="text"/>
-            <span class="input-group-text" id="22114109-fe6d-4f37-8e5b-5d5a1f4d0480">
+           <div class="mb-2 input-group" id="1fbf6b63-3a36-409c-8b5a-28bdbcbc26ba" role="group">
+            <input class="form-control" id="a28767ac-786c-4f49-989b-16ed8f143fb9" name="login" placeholder="Login" type="text"/>
+            <span class="input-group-text" id="123e5773-a47c-4f9f-9a67-a91813975cee">
              @
             </span>
-            <input class="form-control" id="a3a1c971-ce37-4459-9395-bb7b324e7670" name="password" placeholder="Password" type="password"/>
+            <input class="form-control" id="01cd7171-669d-446a-85f0-044e8ac50718" name="password" placeholder="Password" type="password"/>
            </div>
           </form>
          </div>
@@ -5027,52 +4907,50 @@ Form(ig1,ig2,ig3,ig4)
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="136f2f06-df0c-4f0d-a2fb-1870e8432585">
-     <div id="c049477a-fe57-44a4-81b0-eff50a7f488f">
+    <div class="tab-pane fade" id="c3a30185-a08c-4434-a0c6-4f3c8d4d3189">
+     <div id="4f40ad0a-00ea-48d5-b873-59e218cee327">
       <hr/>
-      <ul class="nav" id="69dbada8-a3b1-4262-8376-5ad358111d7d" role="tablist">
+      <ul class="nav" id="3c02c01e-a4cc-4bb3-aacc-e853faec4b99" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#82f4a605-9745-40ca-99fb-dea2f4ae10da" data-bs-toggle="tab" href="#82f4a605-9745-40ca-99fb-dea2f4ae10da" id="16517622-eba9-4ef0-9936-c57d5a99577e" role="tab">
-         <span class="text-secondary" id="2630cdeb-eb80-474c-abf1-db3fa15877d9">
+        <a class="nav-link active" data-bs-target="#db8a98ea-be42-4e7a-b049-1d6002edb378" data-bs-toggle="tab" href="#db8a98ea-be42-4e7a-b049-1d6002edb378" id="2edec9f9-ef10-467c-a948-e798b5e3f475" role="tab">
+         <span class="text-secondary" id="2478686e-4a7f-4ba1-ae13-fe389cd27fd5">
           Icon
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#8328c67b-7f57-4cb4-a305-89724af93460" data-bs-toggle="tab" href="#8328c67b-7f57-4cb4-a305-89724af93460" id="e3563829-e351-46e3-ad5e-88dc97fefc17" role="tab">
-         <span class="text-secondary" id="028dbc94-130e-4abe-af5d-5c0e1bacef18">
+        <a class="nav-link" data-bs-target="#68fafb27-292f-49b1-afde-198b0c9ac6f1" data-bs-toggle="tab" href="#68fafb27-292f-49b1-afde-198b0c9ac6f1" id="4d4d3f99-069d-4bc2-a00b-03ed1234d0e4" role="tab">
+         <span class="text-secondary" id="0b6e9529-e0ff-498f-abdd-93ff46f369c1">
           Spinner
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="82f4a605-9745-40ca-99fb-dea2f4ae10da">
-        <div class="mt-5" id="1e3a500f-fef1-4f0e-8ae0-5a80a60374ea">
-         <div class="d-flex justify-content-between" id="a65cfad7-a893-4543-80ab-07c7b2194164">
-          <h1 id="e0593536-e536-44e8-9447-4351f763d7b3">
+       <div class="tab-pane fade active show" id="db8a98ea-be42-4e7a-b049-1d6002edb378">
+        <div class="mt-5" id="1b1fa65b-b5cb-4d75-a459-74ccaa000d6a">
+         <div class="d-flex justify-content-between" id="31d1e7a5-2e17-4f1f-acf6-8ac74aec022c">
+          <h1 id="4ffe38ef-08d4-4cd4-8731-1bac28cdd629">
            Class
-           <span class="text-primary" id="c4b0af12-7221-421d-9752-f19e0799bf38">
+           <span class="text-primary" id="795c10b2-af3a-4ced-b1ee-dcc192a4fe8e">
             Icon
            </span>
           </h1>
-          <div id="13718148-25e5-41ed-89e0-0b213a16a06a">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#d6ddc42f-efe5-4ed1-b882-ed17d3c53d20" data-bs-toggle="collapse" id="f5726d92-8915-4f06-9c46-e0ba82beb624" onclick="return false;" type="button">
+          <div id="d72ef527-560b-45ef-bc9a-573c854cf89b">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#04fa4ef4-12f5-43fa-b520-bf71cc14c815" data-bs-toggle="collapse" id="c1c8533a-82fb-41bb-b76f-b3ea24502b0a" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="4833bba4-fb31-4f6c-8f34-2ceb946fb1d1">
+         <span class="text-muted" id="4a0b30d3-7a88-482a-b027-545760bc2277">
           An icon.
          </span>
-         <pre id="f216699b-a917-450d-a24d-973e9e5b37e9"><code class="python">Icon(name)</code></pre>
-         <div class="ms-3 collapse" id="d6ddc42f-efe5-4ed1-b882-ed17d3c53d20">
-          <h6 id="08fe5b5b-e5f3-4175-9012-ec4259f689ed">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="41298c63-e899-453d-98df-af0c5d699137"><code class="python">Icon(name)</code></pre>
+         <div class="ms-3 collapse" id="04fa4ef4-12f5-43fa-b520-bf71cc14c815">
+          <h6 id="4a4c958e-3e25-4437-9cfe-fe60bca5153e">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="49f98f90-8e3d-4998-89a3-5f704e51abe8">
+          <table class="table table-sm bg-light" id="77da6d6b-7fe3-4f0f-b625-539977209eab">
            <thead>
             <tr>
              <th scope="col">
@@ -5105,13 +4983,11 @@ Form(ig1,ig2,ig3,ig4)
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="8e2ed5b5-daec-46ca-89d2-8bd84c633527">
-          <h6 id="9598902c-cc40-4617-8b06-1f462beae4bb">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="f93735ae-8312-4e51-aa2c-67a83e8a2d74">
+          <h6 id="b81308ac-c033-4c0a-919c-75b56cb4a58d">
+           Example
           </h6>
-          <pre id="720e5cfe-2411-417c-b26d-36f58d01dbca"><code class="python">from bootwrap import Icon, Panel
+          <pre id="e5bcd680-e543-439c-86b0-5bc04b4ca472"><code class="python">from bootwrap import Icon, Panel
 
 Panel(
     Icon("fas fa-folder"),
@@ -5126,53 +5002,51 @@ Panel(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="34c9e781-7185-451d-a33b-d619a919e09e">
-          <div id="186aad0c-67b4-4336-8003-eef975af972a">
-           <i class="fas fa-folder" id="a9732dfc-ab03-4382-8bc4-a7fb6f7dccec">
+         <div class="ms-3" id="6cf51a25-d681-41bd-9bac-74f2cc80c2d4">
+          <div id="b76b4276-7a3a-47b1-ac94-ea29f3e0b414">
+           <i class="fas fa-folder" id="d23a5850-4b9c-460d-95de-011e76365073">
            </i>
-           <i class="fas fa-folder text-primary" id="548166e9-a4a2-4606-bfc3-6c3a233d189c">
+           <i class="fas fa-folder text-primary" id="b85d3d22-2483-4539-a05b-41bd9e50a240">
            </i>
-           <i class="fas fa-folder text-secondary" id="5e130b56-c14d-4d42-a8c1-79da89a30ccc">
+           <i class="fas fa-folder text-secondary" id="7996b90d-de1b-420c-bf97-3734d14fd3ff">
            </i>
-           <i class="fas fa-folder text-success" id="3943c33c-40a4-4b3e-8f64-e1028cdfb146">
+           <i class="fas fa-folder text-success" id="5df28846-b97a-4889-95ca-744abe0afd0a">
            </i>
-           <i class="fas fa-folder text-warning" id="89b2a70d-2a45-4f0b-abcc-bd3b2272ae96">
+           <i class="fas fa-folder text-warning" id="bf428223-3207-426e-846a-f8d25c91c436">
            </i>
-           <i class="fas fa-folder text-danger" id="e7e8cd31-aec0-435a-96eb-535762cb2d77">
+           <i class="fas fa-folder text-danger" id="8c67176b-a4e9-4058-9032-af735339d2ca">
            </i>
-           <i class="fas fa-folder text-info" id="1777efdb-bb04-43a1-99a0-b6f9d5fb6981">
+           <i class="fas fa-folder text-info" id="ba73308b-6eca-49a3-919a-9b384407e6ef">
            </i>
-           <i class="fas fa-folder text-light" id="a731d06a-4d6b-4930-96fe-95f27a4561a1">
+           <i class="fas fa-folder text-light" id="a29b325b-2f03-4d9a-a019-73598506ce28">
            </i>
-           <i class="fas fa-folder text-dark" id="92c36c00-2fa0-4d8a-9a4f-d50a40fc1b9a">
+           <i class="fas fa-folder text-dark" id="19840c3a-485b-479a-8115-3f7eef38fa88">
            </i>
           </div>
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="8328c67b-7f57-4cb4-a305-89724af93460">
-        <div class="mt-5" id="a6d9e810-7c98-4296-a10b-c8992fa24c79">
-         <div class="d-flex justify-content-between" id="19bc06aa-9d09-4937-9dc9-c10204017806">
-          <h1 id="33b1e666-16a5-4ad3-b683-3710f17ebfa9">
+       <div class="tab-pane fade" id="68fafb27-292f-49b1-afde-198b0c9ac6f1">
+        <div class="mt-5" id="f7f8397c-a904-4f2c-90d1-cc6eee7a58ee">
+         <div class="d-flex justify-content-between" id="6c6a1be7-f284-4ac5-93d5-5ca25f031c78">
+          <h1 id="eb794a97-8e6f-4a59-88e2-5e040b9793d8">
            Class
-           <span class="text-primary" id="22190da5-0c46-47ed-ab6f-d6459b94ca30">
+           <span class="text-primary" id="71466de4-3954-4069-9f82-95765a2c77d3">
             Spinner
            </span>
           </h1>
-          <div id="77fd3864-c1c6-4999-8e35-cc81e87ce555">
+          <div id="9287e065-dbb3-48a1-93f0-8c022c6ec877">
           </div>
          </div>
-         <span class="text-muted" id="782c0d2e-6f3f-46da-bfc5-e939062b63c4">
+         <span class="text-muted" id="e18da2b9-c44a-409b-aea8-a76f80b1e4e5">
           A spinner icon.
          </span>
-         <pre id="c2ec2bcc-3c63-458d-a065-bda75c32471e"><code class="python">Spinner()</code></pre>
-         <div class="ms-3" id="b04b4676-ae24-4a05-9b4e-602593db3c0d">
-          <h6 id="ebf157b1-8db3-48fc-9623-e51a351b109f">
-           <strong>
-            Example
-           </strong>
+         <pre id="a7c7825e-2a89-44fe-a7eb-e391ea033d6b"><code class="python">Spinner()</code></pre>
+         <div class="ms-3" id="c5da7b9b-8438-40dc-ab9c-657a7724ff8b">
+          <h6 id="38a2f82e-25c2-4c1c-a62c-77b7cc0fe919">
+           Example
           </h6>
-          <pre id="2399e0dc-0b51-46ea-a97c-1ade6030bf0a"><code class="python">from bootwrap import Spinner, Panel
+          <pre id="05868995-d669-4185-a063-eaa2109d2ec5"><code class="python">from bootwrap import Spinner, Panel
 
 Panel(
     Spinner(),
@@ -5187,9 +5061,9 @@ Panel(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="3e168a7e-20dc-42e6-9b38-0b088c5e0a5d">
-          <div id="9b8e41d4-264b-4b7c-978b-2b284a44b247">
-           <span class="spinner" id="3a0982d9-cda0-4a99-a749-c86ba2bac336">
+         <div class="ms-3" id="d88fe7d9-7a1b-4e33-8dce-690730718ed7">
+          <div id="7e42f02a-1d29-4da5-88b9-a4c367e74cee">
+           <span class="spinner" id="11c62cbc-5d02-4039-a1aa-2131f6122cf8">
            </span>
            <style>
             @keyframes spinner-border {
@@ -5208,7 +5082,7 @@ Panel(
                     animation: spinner-border .75s linear infinite;
                 }
            </style>
-           <span class="spinner text-primary" id="1a4b28ad-a686-45e9-a8cf-103b5e16c8f6">
+           <span class="spinner text-primary" id="6c7d67c1-2b09-4fe8-a66a-eb6694715cfa">
            </span>
            <style>
             @keyframes spinner-border {
@@ -5227,7 +5101,7 @@ Panel(
                     animation: spinner-border .75s linear infinite;
                 }
            </style>
-           <span class="spinner text-secondary" id="04ca9957-4470-41dc-b82a-2a8b2a46476f">
+           <span class="spinner text-secondary" id="f817e9da-7969-4184-86b7-ea6947261e6f">
            </span>
            <style>
             @keyframes spinner-border {
@@ -5246,7 +5120,7 @@ Panel(
                     animation: spinner-border .75s linear infinite;
                 }
            </style>
-           <span class="spinner text-success" id="e0c61167-5ba6-4bd5-9a8c-d19fa36fd426">
+           <span class="spinner text-success" id="d7b6ff20-d06b-4cf1-b517-ec3c868463e6">
            </span>
            <style>
             @keyframes spinner-border {
@@ -5265,7 +5139,7 @@ Panel(
                     animation: spinner-border .75s linear infinite;
                 }
            </style>
-           <span class="spinner text-warning" id="039caba7-8e0e-4105-b5aa-8c02d69849d8">
+           <span class="spinner text-warning" id="cbfa2df4-1ada-4eac-bbf6-7122d48e7a05">
            </span>
            <style>
             @keyframes spinner-border {
@@ -5284,7 +5158,7 @@ Panel(
                     animation: spinner-border .75s linear infinite;
                 }
            </style>
-           <span class="spinner text-danger" id="5094b2f3-427e-47d1-ba71-34b9ee01ad5c">
+           <span class="spinner text-danger" id="ff0179dc-6ca1-4537-a9ae-6bf8fd21c630">
            </span>
            <style>
             @keyframes spinner-border {
@@ -5303,7 +5177,7 @@ Panel(
                     animation: spinner-border .75s linear infinite;
                 }
            </style>
-           <span class="spinner text-info" id="13eea0d0-52ad-478c-8863-6f0542572d55">
+           <span class="spinner text-info" id="0e79a12c-cbf1-4e98-b5ce-d2aa607588b0">
            </span>
            <style>
             @keyframes spinner-border {
@@ -5322,7 +5196,7 @@ Panel(
                     animation: spinner-border .75s linear infinite;
                 }
            </style>
-           <span class="spinner text-light" id="80d763de-2b33-47c8-a860-b3bdd3637cc3">
+           <span class="spinner text-light" id="8a7aecab-2065-42b2-a2db-65aef3ebf191">
            </span>
            <style>
             @keyframes spinner-border {
@@ -5341,7 +5215,7 @@ Panel(
                     animation: spinner-border .75s linear infinite;
                 }
            </style>
-           <span class="spinner text-dark" id="ce0a8685-4fde-4a9d-abd6-ac75eecf3a96">
+           <span class="spinner text-dark" id="0ad8b4b0-14ee-4178-ae5e-88262d021789">
            </span>
            <style>
             @keyframes spinner-border {
@@ -5367,32 +5241,30 @@ Panel(
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="6ff1b5b1-54e0-451e-b285-485f21e18c32">
-     <div class="mt-5" id="dcc736e8-5fa7-4015-9da3-9696dab79469">
-      <div class="d-flex justify-content-between" id="1153bef8-46de-497a-9a09-65949bfc8636">
-       <h1 id="bedd23e1-0736-44ea-8d12-be577cd866d3">
+    <div class="tab-pane fade" id="d5143d00-3578-4a6b-9d5d-fe0f1d29e729">
+     <div class="mt-5" id="e344d643-4233-43dc-9965-75009450df15">
+      <div class="d-flex justify-content-between" id="dbcd9a04-9a32-4207-abb4-8991a43d209c">
+       <h1 id="0d6e5444-d3f5-4794-84e9-096943add1ce">
         Class
-        <span class="text-primary" id="71e60ec9-61e7-4f47-8555-e5b2d2ed7d6f">
+        <span class="text-primary" id="3996120c-1e32-4a98-b1b0-370c4aa5323b">
          Image
         </span>
        </h1>
-       <div id="ca46287a-453b-45e0-8b98-e8aa967f6541">
-        <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#edc7fabe-3030-4c04-b595-f97b17f35203" data-bs-toggle="collapse" id="23f38a1c-d03d-4717-a1e4-83641b6dfd05" onclick="return false;" type="button">
+       <div id="deecd652-9151-4a77-9482-2d7cef1eb022">
+        <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#d230829c-9f39-468e-b465-9ea116678e36" data-bs-toggle="collapse" id="d928f767-c688-4979-8afb-a51bf0e75247" onclick="return false;" type="button">
          Argument
         </button>
        </div>
       </div>
-      <span class="text-muted" id="ac1c2d36-cd7a-418c-8d9e-614fd10dd5e4">
+      <span class="text-muted" id="cb9ce891-2312-416b-abbf-abd43b5d4a0e">
        A web component for an image.
       </span>
-      <pre id="2b194272-f12a-4a1d-85fb-c194ef803108"><code class="python">Image(src, width=None, height=None, alt=None)</code></pre>
-      <div class="ms-3 collapse" id="edc7fabe-3030-4c04-b595-f97b17f35203">
-       <h6 id="17bf4ed4-7565-46e2-a087-62fe1d69f760">
-        <strong>
-         Arguments
-        </strong>
+      <pre id="84066386-b7e0-49a3-9c77-9ca5573c579a"><code class="python">Image(src, width=None, height=None, alt=None)</code></pre>
+      <div class="ms-3 collapse" id="d230829c-9f39-468e-b465-9ea116678e36">
+       <h6 id="92c27ee6-d464-44c1-a287-3b3cc5c63c1b">
+        Arguments
        </h6>
-       <table class="table table-sm bg-light" id="f21e9736-6c16-437e-93f4-2aacf5829a6d">
+       <table class="table table-sm bg-light" id="e27a0b2b-a053-4ad4-ae2e-76a6fa659071">
         <thead>
          <tr>
           <th scope="col">
@@ -5470,68 +5342,64 @@ Panel(
         </tbody>
        </table>
       </div>
-      <div class="ms-3" id="f9409025-c184-430d-98f7-0b91c55ae1f9">
-       <h6 id="d7852a96-6738-4e38-8580-2e79096c247d">
-        <strong>
-         Example
-        </strong>
+      <div class="ms-3" id="89ef54ad-3d3a-4923-9655-b979e63fadde">
+       <h6 id="29fb53f7-5aa1-4bc5-a020-2c16f9fa64f9">
+        Example
        </h6>
-       <pre id="130c7f18-5c8c-4cc5-85f9-b11cc9f816c3"><code class="python">from bootwrap import Image
+       <pre id="3725543a-bbdd-45a9-9ff5-960e300d0de1"><code class="python">from bootwrap import Image
 
 Image("logo.png")
 </code></pre>
       </div>
-      <div class="ms-3" id="7788eb34-48f2-4c0c-88cc-0732d0c57f7f">
-       <img id="f18cb93b-f00d-46dc-bdd2-a6302f286542" src="logo.png"/>
+      <div class="ms-3" id="5241747b-e2f8-448b-b217-73d0f7601a12">
+       <img id="bc8d20fb-a1b4-4f6d-b85e-39100b402087" src="logo.png"/>
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="817f368e-8a6d-45b1-86c2-c41073535413">
-     <div id="abab6aa9-0972-4fd3-8b3a-0bff44bc7858">
+    <div class="tab-pane fade" id="aa1277d2-c29c-44d7-95e2-87d954fe9c34">
+     <div id="eac7ba41-85a8-41a0-8ce9-d1b94a3b0537">
       <hr/>
-      <ul class="nav" id="5f500d9c-ba0e-40f7-9b75-f2d2ce76aa0f" role="tablist">
+      <ul class="nav" id="40eec820-06f9-4fd8-a794-5422b592f9a4" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#d64130bf-2432-4496-a5ca-f1604576c8ce" data-bs-toggle="tab" href="#d64130bf-2432-4496-a5ca-f1604576c8ce" id="ac23a4d3-6431-4dac-81e0-48f91f1a1e64" role="tab">
-         <span class="text-secondary" id="adc9a25e-5c97-4f9c-aa5b-c34a15301b28">
+        <a class="nav-link active" data-bs-target="#dd544123-92c5-4692-9697-b2b26d5d3528" data-bs-toggle="tab" href="#dd544123-92c5-4692-9697-b2b26d5d3528" id="d22e6954-4fc1-42cd-abd8-1c1d2dec349f" role="tab">
+         <span class="text-secondary" id="5f96706b-ba8f-4fbe-86a1-2f9d0221d000">
           Javascript
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#edb7ef5b-c804-4179-940f-59f96f7cd2d4" data-bs-toggle="tab" href="#edb7ef5b-c804-4179-940f-59f96f7cd2d4" id="eeb446a0-a686-42e8-95c0-9129adee2b77" role="tab">
-         <span class="text-secondary" id="3cdd239f-f002-44f3-b99d-00096d1de667">
+        <a class="nav-link" data-bs-target="#ad70d34a-8fae-440a-9a74-7a06660c56de" data-bs-toggle="tab" href="#ad70d34a-8fae-440a-9a74-7a06660c56de" id="eef9eeb7-9865-4299-8f40-c5b8713cf6bb" role="tab">
+         <span class="text-secondary" id="89c1f77b-3795-4e50-bb79-b7d181e06ea3">
           jQuery
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="d64130bf-2432-4496-a5ca-f1604576c8ce">
-        <div class="mt-5" id="f0f1c42c-532b-4eda-8300-9537138cb1e3">
-         <div class="d-flex justify-content-between" id="709ab54c-f183-449e-9ed3-d572e18923ff">
-          <h1 id="172343e9-4bdb-4d1f-b53e-5073fd510f0f">
+       <div class="tab-pane fade active show" id="dd544123-92c5-4692-9697-b2b26d5d3528">
+        <div class="mt-5" id="2c6e1c60-3a71-43f1-b5a7-e6d38041288f">
+         <div class="d-flex justify-content-between" id="6f02a571-3d49-4776-a551-6771cbfe3b15">
+          <h1 id="23159e9f-9bc2-4c0e-bb78-1697e01f4096">
            Class
-           <span class="text-primary" id="e68e3cb9-1da6-4b18-b714-7a441fdc3172">
+           <span class="text-primary" id="ff4728a8-ab8e-42fb-b307-104f5f64681e">
             Javascript
            </span>
           </h1>
-          <div id="1cc7a50a-1948-411d-933a-e71f19cb765d">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#e8eb1b3f-0863-4de5-ac0a-3072e60052ca" data-bs-toggle="collapse" id="b48df2ec-54e4-462b-a0d6-f72e52e6b7a6" onclick="return false;" type="button">
+          <div id="3d18c55e-1fd5-4c6c-b765-7da0fc4f1b70">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#16258079-3563-497c-b06a-bd50002f9bb3" data-bs-toggle="collapse" id="16b5214f-df5b-4446-9153-4f697f14e2da" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="20cc664e-3f30-4b23-aaa0-622621cb4e0d">
+         <span class="text-muted" id="636687e8-1916-4325-aa6e-851c941d9fa9">
           A web component for a javascript.
          </span>
-         <pre id="a14e9b87-c0bf-4b62-946e-813536200fb7"><code class="python">Javascript(src=None, script=None, submap=None)</code></pre>
-         <div class="ms-3 collapse" id="e8eb1b3f-0863-4de5-ac0a-3072e60052ca">
-          <h6 id="abe6dd47-9422-46d3-bb48-495c817cd73d">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="c783a2a2-770c-4f5b-bf51-b0d847ce80d7"><code class="python">Javascript(src=None, script=None, submap=None)</code></pre>
+         <div class="ms-3 collapse" id="16258079-3563-497c-b06a-bd50002f9bb3">
+          <h6 id="bccab979-453e-4848-95c4-977d7af283b0">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="6ca24d50-d81a-4610-a35e-d356a8578f37">
+          <table class="table table-sm bg-light" id="6070a630-7467-4b91-bf49-33322202f0fc">
            <thead>
             <tr>
              <th scope="col">
@@ -5596,13 +5464,11 @@ Image("logo.png")
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="181bd5b2-a90a-4856-be2d-9bfab41ac2fc">
-          <h6 id="2388711c-a677-476a-abd5-b6f2a77037d5">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="8925acf4-2037-40d3-bd41-dc95499e48a7">
+          <h6 id="28bd1d38-a9d2-4fcb-ba22-a3448b10df76">
+           Example
           </h6>
-          <pre id="20ca4ed5-518d-4b63-bcaf-14c793d57236"><code class="python">from bootwrap import Page, Javascript
+          <pre id="a23e3a7d-58bb-47e5-a9c6-5e2176840c49"><code class="python">from bootwrap import Page, Javascript
 
 my_page = Page(
     ...
@@ -5615,28 +5481,28 @@ my_page = Page(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="edb7ef5b-c804-4179-940f-59f96f7cd2d4">
-        <div class="mt-3" id="bf099037-ebb3-40a6-952d-2b27e3aba724">
-         <div id="14c8a0a1-036f-4570-a225-b795ffa3c108">
+       <div class="tab-pane fade" id="ad70d34a-8fae-440a-9a74-7a06660c56de">
+        <div class="mt-3" id="629cd3ac-31af-4a65-b28a-36334f9abc1a">
+         <div id="6d5f43d2-4d03-4852-9d41-a875433427bc">
           <div class="row">
            <div class="col-md">
-            <div id="be766068-f058-46c2-9558-9444474a08b2">
-             <h1 id="201d1e91-c7f1-4138-877d-87e912564b31">
+            <div id="1c868c8c-c4a6-49a7-bbb0-f3c3ae24ee05">
+             <h1 id="d4064b88-cc39-453d-a29c-da76e26fd55d">
               jQuery
              </h1>
             </div>
            </div>
            <div class="col-md">
-            <div id="74e24960-df77-44b9-9b06-e7b9833c408d">
+            <div id="5c7b4087-35e1-480c-a174-66f7b4d3e391">
             </div>
            </div>
           </div>
          </div>
-         <div id="bbfa7168-3c71-44ad-965f-66c1ea68535c">
+         <div id="123c5c16-f23f-4ef1-8afa-c61d90e701e3">
           <div class="row">
            <div class="col-md">
-            <div id="5e6e56d6-b0c2-4f45-8d8c-d2c194823347">
-             <p id="3fcc0ce0-29b1-49ad-b5c5-d501d0951818">
+            <div id="f07a46e7-5ce0-44cb-9cdc-f22e2065d4cc">
+             <p id="82f8dc8f-b8a2-4324-ac10-5c12c5cc7870">
               Use
               <code>
                Javascript
@@ -5646,8 +5512,8 @@ my_page = Page(
             </div>
            </div>
            <div class="col-md">
-            <div id="968f4771-8ed4-4e3c-a4df-612873a64508">
-             <pre id="ee0a69d5-a678-43d1-af4f-799480c38702"><code class="python">from bootwrap import Panel, Javascript, Button, Text
+            <div id="ae3bb987-f788-4d7d-8eb3-e370d93adcdc">
+             <pre id="e13fe0c4-a848-4399-8eea-5f006c033aaa"><code class="python">from bootwrap import Panel, Javascript, Button, Text
 
 label = Text("Answer:").as_strong()
 answer = Text("unknown").me(2).ms(2)
@@ -5672,27 +5538,25 @@ action = Javascript(
 Panel(
   label, answer, btn_yes, btn_no, action
 )</code></pre>
-             <div id="3012ee2e-cf00-4bdc-b2e3-397d96abd266">
-              <span id="fcaa41d2-0e3d-4991-b2de-6a4fa5e65ab2">
-               <strong>
-                Answer:
-               </strong>
-              </span>
-              <span class="me-2 ms-2" id="1c706fad-e1d8-4a27-a5ef-286c682dc9ac">
+             <div id="2d2daa51-1f89-421e-9cd0-2ced3c8da76a">
+              <strong id="44e55603-6c9c-4d72-923e-2dd028c1dc1b">
+               Answer:
+              </strong>
+              <span class="me-2 ms-2" id="200d2d5e-351a-498f-87c5-68c7af0cd162">
                unknown
               </span>
-              <button class="btn btn-success" id="5e6f8384-1fd1-4f48-bd2d-f5ffe85849f5" onclick="return false;">
+              <button class="btn btn-success" id="3270b31f-8dd5-402d-965f-1b5d5f366ff6" onclick="return false;">
                Yes
               </button>
-              <button class="btn btn-danger" id="848e58d5-2fe2-43e4-a88c-7e624f3d6b42" onclick="return false;">
+              <button class="btn btn-danger" id="9246d15b-c91e-4952-b3f5-e63ed069ba4d" onclick="return false;">
                No
               </button>
               <script type="application/javascript">
-               $("#5e6f8384-1fd1-4f48-bd2d-f5ffe85849f5").on("click",function(){
-      $("#1c706fad-e1d8-4a27-a5ef-286c682dc9ac").text("Yes");
+               $("#3270b31f-8dd5-402d-965f-1b5d5f366ff6").on("click",function(){
+      $("#200d2d5e-351a-498f-87c5-68c7af0cd162").text("Yes");
     });
-    $("#848e58d5-2fe2-43e4-a88c-7e624f3d6b42").on("click",function(){
-      $("#1c706fad-e1d8-4a27-a5ef-286c682dc9ac").text("No");
+    $("#9246d15b-c91e-4952-b3f5-e63ed069ba4d").on("click",function(){
+      $("#200d2d5e-351a-498f-87c5-68c7af0cd162").text("No");
     });
               </script>
              </div>
@@ -5705,32 +5569,30 @@ Panel(
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="9c25c336-e248-4a2c-bfda-0c3ded5cda58">
-     <div class="mt-5" id="d8c1925f-2685-43fc-b4a7-0e01c3cd5ee1">
-      <div class="d-flex justify-content-between" id="9fc3d440-b858-4617-8011-0421b6cb62e4">
-       <h1 id="00ac4c0b-dfa2-416e-852f-95562af0e312">
+    <div class="tab-pane fade" id="1d691913-3266-467d-a9b0-b15f8d136d30">
+     <div class="mt-5" id="ec361adb-e381-400f-8b0f-93682c90050b">
+      <div class="d-flex justify-content-between" id="08390853-ef30-4294-a17b-7c8f0b9a8e55">
+       <h1 id="f19df79a-11d0-4aa9-a9c6-cae2a47e9cb1">
         Class
-        <span class="text-primary" id="0dde57d2-d423-45c1-afa0-1cce3698039d">
+        <span class="text-primary" id="ac483685-404e-4e9e-adbb-9de533dcc590">
          Link
         </span>
        </h1>
-       <div id="92138fec-91f0-4b31-ba36-765b58cc0f8e">
-        <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#b39dad3e-c498-4811-93fe-4805542c7369" data-bs-toggle="collapse" id="6cf2f388-85e8-4efe-916f-c12fd57f8cde" onclick="return false;" type="button">
+       <div id="25b38913-7cb8-46fb-ba34-b5ad714a4514">
+        <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#251351e1-82d4-4197-adf6-00a600880dfc" data-bs-toggle="collapse" id="45c83a74-689b-43a7-9bc1-2d7d85c52cc1" onclick="return false;" type="button">
          Argument
         </button>
        </div>
       </div>
-      <span class="text-muted" id="e46d6f2f-0380-4eb2-b093-08a960014685">
+      <span class="text-muted" id="514c4c79-e0e3-43c9-a16f-30963ee0880a">
        A web component for an external resource link.
       </span>
-      <pre id="9c31242c-4468-40dc-8408-9d9a7543224d"><code class="python">Link(href, rel='stylesheet', ctype='text/css')</code></pre>
-      <div class="ms-3 collapse" id="b39dad3e-c498-4811-93fe-4805542c7369">
-       <h6 id="425fb45d-36d6-482c-9b09-fef92aa7b45b">
-        <strong>
-         Arguments
-        </strong>
+      <pre id="3df01875-3954-45e7-a1c5-760713c3a0db"><code class="python">Link(href, rel='stylesheet', ctype='text/css')</code></pre>
+      <div class="ms-3 collapse" id="251351e1-82d4-4197-adf6-00a600880dfc">
+       <h6 id="6ee77a54-7540-470f-abef-e8fe086826d1">
+        Arguments
        </h6>
-       <table class="table table-sm bg-light" id="6ddcae00-b0f0-40aa-8f6d-ad4f073e8555">
+       <table class="table table-sm bg-light" id="ebc4ef3b-0f7b-4b05-9d58-059f8282301f">
         <thead>
          <tr>
           <th scope="col">
@@ -5796,17 +5658,15 @@ Panel(
         </tbody>
        </table>
       </div>
-      <p id="a841d76b-852d-411a-8674-44913cc1ccd0">
+      <p id="4afb9be6-36d6-4fdb-901a-2ab3458109dd">
        See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
     for more information.
       </p>
-      <div class="ms-3" id="2a84ac91-47fd-46cd-96c0-81aff3905e1f">
-       <h6 id="b7616d17-0593-4a6d-8c46-fe475a280307">
-        <strong>
-         Example
-        </strong>
+      <div class="ms-3" id="dd013d50-2d30-4d95-b14a-82b8edb189f5">
+       <h6 id="fad41c7b-e85d-49cd-ab86-c66a52afd3d4">
+        Example
        </h6>
-       <pre id="e1b29c1c-e9df-4d0c-8aa8-9a41e9330527"><code class="python">from bootwrap import Page, Link
+       <pre id="2b901bdd-3948-4293-9684-e3f142a491e6"><code class="python">from bootwrap import Page, Link
 
 my_page = Page(
     ...
@@ -5819,52 +5679,50 @@ my_page = Page(
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="5d7272c7-3441-4e9f-a8f5-9e032211a044">
-     <div id="3784a384-335d-48d3-be50-4a67a96aa6eb">
+    <div class="tab-pane fade" id="02f80da1-b39f-4eac-a31a-77d4144b419a">
+     <div id="65dbae9d-e408-4394-8333-bfa74f438ca7">
       <hr/>
-      <ul class="nav" id="b49a7067-9629-4dbf-9ed5-771f366db808" role="tablist">
+      <ul class="nav" id="fdda1c59-b8c5-498f-9c68-47aae1272924" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#30e891e4-901a-4a9f-b3e9-377dff961968" data-bs-toggle="tab" href="#30e891e4-901a-4a9f-b3e9-377dff961968" id="849844af-6791-4f38-ad19-139222bd266d" role="tab">
-         <span class="text-secondary" id="fe8bcdad-eacc-4c31-84c0-1645233d069b">
+        <a class="nav-link active" data-bs-target="#edaa129d-9182-49bf-ab60-15bd16321e33" data-bs-toggle="tab" href="#edaa129d-9182-49bf-ab60-15bd16321e33" id="53cd820a-aad7-44e4-abd5-b80d6cc3fa34" role="tab">
+         <span class="text-secondary" id="4f70fa51-0488-4c22-8793-0a7d30b6fee5">
           List
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#c0b0a6ed-ce63-449d-9ff8-497d53dd27e0" data-bs-toggle="tab" href="#c0b0a6ed-ce63-449d-9ff8-497d53dd27e0" id="379cd233-83f5-441d-b0af-8851ba513fde" role="tab">
-         <span class="text-secondary" id="6aeabbf9-fec3-4a38-a0f8-1ad3796f4637">
+        <a class="nav-link" data-bs-target="#d1b0f008-de8d-4a7b-8f24-b9a464d00c3e" data-bs-toggle="tab" href="#d1b0f008-de8d-4a7b-8f24-b9a464d00c3e" id="50bb8a63-bc68-4fa5-9143-8381fb911c68" role="tab">
+         <span class="text-secondary" id="0009ec13-76b2-45ca-82bc-0fff7829aba6">
           List.Item
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="30e891e4-901a-4a9f-b3e9-377dff961968">
-        <div class="mt-5" id="d59a1dd7-a8d2-4eaf-a4c9-3625ce0eb165">
-         <div class="d-flex justify-content-between" id="c6e63b74-d0fa-428a-b6c3-df6142d75c26">
-          <h1 id="966dc238-fd51-4334-ae97-036db480820f">
+       <div class="tab-pane fade active show" id="edaa129d-9182-49bf-ab60-15bd16321e33">
+        <div class="mt-5" id="4504aa48-bf40-46ab-9f12-9d825eec0524">
+         <div class="d-flex justify-content-between" id="fa5534f3-ea02-473c-bb53-01a517ab0324">
+          <h1 id="b76defd6-9698-4735-86c3-7aabb254aa57">
            Class
-           <span class="text-primary" id="fc331f30-5f25-4682-9d03-eadeaae4c91a">
+           <span class="text-primary" id="e3ffd4a1-2a68-4b10-accc-201ae1ee8bcf">
             List
            </span>
           </h1>
-          <div id="6441c700-3338-485d-b850-36f7762ae52f">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#e7f95dc8-3096-4775-9e76-3ee8c89c6747" data-bs-toggle="collapse" id="59b0c38a-70fa-47a4-a4e3-c48b502bef8d" onclick="return false;" type="button">
+          <div id="d1ad8ab8-625f-415b-97e6-55994366d3c9">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#0eb82635-ddb9-4d4d-981b-93ae63638ed3" data-bs-toggle="collapse" id="0fa8e0ef-848a-446f-bd66-ee0e1e43754c" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="d6d8813f-5458-4682-875f-235cda56c6cc">
+         <span class="text-muted" id="23a1f9ee-aeb4-4727-9a72-8d9c2c77a043">
           A web component for a list of items.
          </span>
-         <pre id="67ce5652-17d1-423e-bf21-d4eb8dc0910d"><code class="python">List(*items)</code></pre>
-         <div class="ms-3 collapse" id="e7f95dc8-3096-4775-9e76-3ee8c89c6747">
-          <h6 id="42b88ee7-7f1c-43c0-850a-9d20201c8114">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="5f47c43f-0bdd-4e59-bce1-03f9af29c4a5"><code class="python">List(*items)</code></pre>
+         <div class="ms-3 collapse" id="0eb82635-ddb9-4d4d-981b-93ae63638ed3">
+          <h6 id="744e1171-7f4c-4c7e-8084-4f2e1ce80791">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="99543cd8-b5b1-417a-98c8-1308a76f38aa">
+          <table class="table table-sm bg-light" id="73662d79-60c7-4af6-8a13-a13912b828cb">
            <thead>
             <tr>
              <th scope="col">
@@ -5905,13 +5763,11 @@ my_page = Page(
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="289c233f-2355-4d17-ab3d-43083e03072a">
-          <h6 id="d6a90631-1e51-47b4-8cc5-80aca932a62f">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="8cf9ed7c-d634-4b3b-90fd-4d42d6dfda25">
+          <h6 id="cdddf27b-69a8-4c11-bf74-16182330bedf">
+           Example
           </h6>
-          <pre id="71de3d2a-cb72-4198-80b2-205cce5a89b5"><code class="python">from bootwrap import Button, List, Image
+          <pre id="f5ed9fac-3ebb-46f7-b1c8-f6dfa0983381"><code class="python">from bootwrap import Button, List, Image
 
 actions = [
     Button("Buy").as_success(),
@@ -5944,36 +5800,34 @@ List(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="cba542c4-1344-4f6f-aec2-f2b28528faaa">
-          <div class="list-group" id="71a63843-8bd8-471a-ae29-a361fc090565">
-           <a class="list-group-item list-group-item-action flex-column align-items-start active" href="https://www.google.com" id="77fdb41c-f117-44a5-8b63-e01514af1044">
+         <div class="ms-3" id="4bddce8f-eb20-4a74-be59-f42eecd73930">
+          <div class="list-group" id="57d5a3b7-5606-4be2-9a91-48791a2501d3">
+           <a class="list-group-item list-group-item-action flex-column align-items-start active" href="https://www.google.com" id="6ea56d9a-8449-4c55-9dd4-729956f54500">
             <div class="d-flex w-100 justify-content-between">
-             <img height="32" id="cfcd89e4-6631-4609-ae55-eea563ae6b01" src="google-logo.png" width="32"/>
+             <img height="32" id="fe644f71-f99d-4118-ac74-510e7cd9ee81" src="google-logo.png" width="32"/>
              <div class="ms-2 me-2 w-100">
               <div class="d-flex w-100 justify-content-between">
-               <h5 id="ae7937a1-36a6-4953-bc89-db3d26a2f8df">
+               <h5 id="b191be8d-16d1-46b5-9b8f-313c3d3b64ac">
                 Google (NASDAQ: GOOGL)
                </h5>
-               <span id="48302c51-7a78-4681-9163-95299302b623">
-                <small>
-                 12:04:58 12/01/2021
-                </small>
-               </span>
+               <small id="a1cdd6fa-d1c1-4ada-b284-310d6635f377">
+                12:04:58 12/01/2021
+               </small>
               </div>
               Price for a single Google share
              </div>
              <div class="d-flex align-items-start">
               <div class="btn-group">
-               <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="4a8ab3ec-7299-44ba-a286-ecde3e3d95f7" onclick="return false;" style="cursor: pointer">
+               <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="55d094c5-c52c-4f74-8366-a172956427ab" onclick="return false;" style="cursor: pointer">
                </i>
                <div class="dropdown-menu dropdown-menu-right">
-                <button class="dropdown-item btn btn-success" id="c7f7ad57-9eb8-42a2-8e2c-6ee32629fbc5" onclick="return false;">
+                <button class="dropdown-item btn btn-success" id="783c7de5-e856-44fc-a216-ca5359bf0a5e" onclick="return false;">
                  Buy
                 </button>
-                <button class="dropdown-item btn" id="7d73d966-8262-481f-b0a8-64f946266be7" onclick="return false;">
+                <button class="dropdown-item btn" id="a497cef8-f232-40ee-af02-bb6b5933c4e1" onclick="return false;">
                  Sell
                 </button>
-                <button class="dropdown-item btn" id="14d3ac9c-9319-40f0-bdab-dbe42c415cd1" onclick="return false;">
+                <button class="dropdown-item btn" id="96e03e0b-da39-4c89-9751-58d40221aeb2" onclick="return false;">
                  Transfer
                 </button>
                </div>
@@ -5981,34 +5835,32 @@ List(
              </div>
             </div>
            </a>
-           <a class="list-group-item list-group-item-action flex-column align-items-start" href="https://www.linkedin.com" id="b6d28374-b13b-4308-a0dc-93e67f84e2b0">
+           <a class="list-group-item list-group-item-action flex-column align-items-start" href="https://www.linkedin.com" id="1b404316-c7aa-4e9d-a72d-1928b1c9ce35">
             <div class="d-flex w-100 justify-content-between">
-             <img height="32" id="00984c83-fd93-40be-aadd-43c551a37289" src="linkedin-logo.png" width="32"/>
+             <img height="32" id="b096d7f0-ad58-4d5e-99cf-bc38ab0b155d" src="linkedin-logo.png" width="32"/>
              <div class="ms-2 me-2 w-100">
               <div class="d-flex w-100 justify-content-between">
-               <h5 id="2dcc7ba5-aaaa-41ba-ae0d-9c6f65af3718">
+               <h5 id="b5d20250-298b-4365-a8aa-6c63d2b1791a">
                 LinkedIn (NASDAQ: LNKD)
                </h5>
-               <span id="ee298315-37c3-4ea9-b914-98dc0b4d0672">
-                <small>
-                 12:04:58 12/01/2021
-                </small>
-               </span>
+               <small id="812871fd-7878-4a67-b297-78bbe5549ee1">
+                12:04:58 12/01/2021
+               </small>
               </div>
               Price for a single LinkedIn share
              </div>
              <div class="d-flex align-items-start">
               <div class="btn-group">
-               <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="0dc37fee-12fa-401d-a94e-9dfd2c63f9db" onclick="return false;" style="cursor: pointer">
+               <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="cfa5e1a5-cef1-4a7b-93b1-9734a7e7e109" onclick="return false;" style="cursor: pointer">
                </i>
                <div class="dropdown-menu dropdown-menu-right">
-                <button class="dropdown-item btn btn-success" id="c7f7ad57-9eb8-42a2-8e2c-6ee32629fbc5" onclick="return false;">
+                <button class="dropdown-item btn btn-success" id="783c7de5-e856-44fc-a216-ca5359bf0a5e" onclick="return false;">
                  Buy
                 </button>
-                <button class="dropdown-item btn" id="7d73d966-8262-481f-b0a8-64f946266be7" onclick="return false;">
+                <button class="dropdown-item btn" id="a497cef8-f232-40ee-af02-bb6b5933c4e1" onclick="return false;">
                  Sell
                 </button>
-                <button class="dropdown-item btn" id="14d3ac9c-9319-40f0-bdab-dbe42c415cd1" onclick="return false;">
+                <button class="dropdown-item btn" id="96e03e0b-da39-4c89-9751-58d40221aeb2" onclick="return false;">
                  Transfer
                 </button>
                </div>
@@ -6016,34 +5868,32 @@ List(
              </div>
             </div>
            </a>
-           <a class="list-group-item list-group-item-action flex-column align-items-start" href="https://www.amazon.com" id="aff81f1d-ec94-4f59-8352-5ed4dbb4c627">
+           <a class="list-group-item list-group-item-action flex-column align-items-start" href="https://www.amazon.com" id="71b52953-d761-4f90-bde9-c81caae94751">
             <div class="d-flex w-100 justify-content-between">
-             <img height="32" id="526d66d0-8b24-433d-bb25-efb1fda49d0b" src="amazon-logo.png" width="32"/>
+             <img height="32" id="b01ae9bc-532f-4403-8c1b-e23fdeb633a6" src="amazon-logo.png" width="32"/>
              <div class="ms-2 me-2 w-100">
               <div class="d-flex w-100 justify-content-between">
-               <h5 id="2a70bc02-63dc-47b9-8d06-9fa40517c040">
+               <h5 id="ffbab78e-9b49-4197-a8a3-72f09681f688">
                 Amazon (NASDAQ: AMZN)
                </h5>
-               <span id="e536825c-66ff-4125-9e06-73eb1037cdd2">
-                <small>
-                 12:04:58 12/01/2021
-                </small>
-               </span>
+               <small id="d2094d77-056d-416b-947a-5aa7fa104782">
+                12:04:58 12/01/2021
+               </small>
               </div>
               Price for a single Amazon share
              </div>
              <div class="d-flex align-items-start">
               <div class="btn-group">
-               <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="190f03c9-cb32-47bb-86bb-da3a23c6cc85" onclick="return false;" style="cursor: pointer">
+               <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="727542eb-8c49-4691-b877-eebb2243aa7a" onclick="return false;" style="cursor: pointer">
                </i>
                <div class="dropdown-menu dropdown-menu-right">
-                <button class="dropdown-item btn btn-success" id="c7f7ad57-9eb8-42a2-8e2c-6ee32629fbc5" onclick="return false;">
+                <button class="dropdown-item btn btn-success" id="783c7de5-e856-44fc-a216-ca5359bf0a5e" onclick="return false;">
                  Buy
                 </button>
-                <button class="dropdown-item btn" id="7d73d966-8262-481f-b0a8-64f946266be7" onclick="return false;">
+                <button class="dropdown-item btn" id="a497cef8-f232-40ee-af02-bb6b5933c4e1" onclick="return false;">
                  Sell
                 </button>
-                <button class="dropdown-item btn" id="14d3ac9c-9319-40f0-bdab-dbe42c415cd1" onclick="return false;">
+                <button class="dropdown-item btn" id="96e03e0b-da39-4c89-9751-58d40221aeb2" onclick="return false;">
                  Transfer
                 </button>
                </div>
@@ -6055,32 +5905,30 @@ List(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="c0b0a6ed-ce63-449d-9ff8-497d53dd27e0">
-        <div class="mt-5" id="cfdaaae8-e728-4b30-a7b2-c4661f944151">
-         <div class="d-flex justify-content-between" id="66947107-17d3-4963-9de0-092143e60092">
-          <h1 id="9bfc8c6f-249d-4a50-bd3e-f201a54ec888">
+       <div class="tab-pane fade" id="d1b0f008-de8d-4a7b-8f24-b9a464d00c3e">
+        <div class="mt-5" id="170dea6c-b1eb-4a6e-8d5e-14c6bec123a5">
+         <div class="d-flex justify-content-between" id="e51ef1d0-904b-478f-a45c-62b10932c6b2">
+          <h1 id="b1426cfb-56fe-4bbe-b7de-02cee185d0dd">
            Class
-           <span class="text-primary" id="72419986-7003-4e4a-a355-9d08cd1aeaaa">
+           <span class="text-primary" id="6eec91a1-0943-4c1c-b2ef-d91efd8f7630">
             List.Item
            </span>
           </h1>
-          <div id="8388391d-ba0f-4a94-92f9-bc31b1d52def">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#b0e9f28f-24a3-4f14-af2b-eeca02b2bfe5" data-bs-toggle="collapse" id="054231b1-adb0-41ff-a885-195a8dce96b7" onclick="return false;" type="button">
+          <div id="22327c0d-5df8-49ae-8cc9-3a420416fe95">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#b0af66ab-53ce-4c52-a1f4-23acd900237b" data-bs-toggle="collapse" id="acc80e37-c0cc-42a5-8f79-131f949484a5" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="e2080558-83fd-474f-83ba-b608d02b3b6f">
+         <span class="text-muted" id="e15484d4-6a81-4fc6-ba13-00d35ff696dc">
           A list item.
          </span>
-         <pre id="522bad7b-cd3e-419a-8ef0-452a6f034c4d"><code class="python">List.Item(title, description=None, marker=None, figure=None)</code></pre>
-         <div class="ms-3 collapse" id="b0e9f28f-24a3-4f14-af2b-eeca02b2bfe5">
-          <h6 id="3d73ff11-c9ea-497a-91ab-d818beed7d56">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="624cbe1c-fecc-475e-9389-685906cf11b2"><code class="python">List.Item(title, description=None, marker=None, figure=None)</code></pre>
+         <div class="ms-3 collapse" id="b0af66ab-53ce-4c52-a1f4-23acd900237b">
+          <h6 id="11687f31-f08c-4845-8d17-b348c68dcb51">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="034d5eb4-defc-49fd-8b54-691e31f34b7b">
+          <table class="table table-sm bg-light" id="97b5c9d7-2bdc-4191-b275-0ac8833135a5">
            <thead>
             <tr>
              <th scope="col">
@@ -6158,13 +6006,11 @@ List(
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="7baaceba-0bc9-4c71-8050-1c2306c51e2f">
-          <h6 id="44bb662e-14de-40ca-a20d-06501dd8c0e3">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="d1002ba1-7e3f-4ada-be86-0d69395caa3e">
+          <h6 id="4285b0c3-d1b1-4391-8871-68b683536622">
+           Example
           </h6>
-          <pre id="63acb778-fe6c-4e0a-9736-42f8ba00d77a"><code class="python">from bootwrap import Button, List, Image
+          <pre id="5d86f7c4-9fb3-4c6c-b287-782655584648"><code class="python">from bootwrap import Button, List, Image
 
 actions = [
     Button("Buy"),
@@ -6182,32 +6028,30 @@ List(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="520014cb-f9dc-4786-9c18-c9b6a07739d9">
-          <div class="list-group" id="0766aa42-46ee-40ea-b339-9a93ee05025d">
-           <a class="list-group-item list-group-item-action flex-column align-items-start" href="https://www.google.com" id="d1322f47-28cd-4ed8-807e-36d1cd6c18f6">
+         <div class="ms-3" id="fd0b541b-8bfe-4fda-907f-9de01316c776">
+          <div class="list-group" id="c851721e-ed0e-4ab0-af77-91af4931b9ce">
+           <a class="list-group-item list-group-item-action flex-column align-items-start" href="https://www.google.com" id="a3b24d18-acbd-4dcb-ae4a-e36ea63e7a85">
             <div class="d-flex w-100 justify-content-between">
-             <img height="32" id="d50228a6-76e8-4334-8918-c60eef1ecccd" src="google-logo.png" width="32"/>
+             <img height="32" id="6957a3e0-2212-40ea-a67e-4c43eeeb84d2" src="google-logo.png" width="32"/>
              <div class="ms-2 me-2 w-100">
               <div class="d-flex w-100 justify-content-between">
-               <h5 id="7c3a319f-29f8-41fb-9f94-ab5b6a3392bc">
+               <h5 id="6caf3e45-430c-4fc5-b633-7cc9e6c10d52">
                 Google (NASDAQ: GOOGL)
                </h5>
-               <span id="4e666273-40a1-4f75-b3c0-0c5c7eaa2fd6">
-                <small>
-                 12:04:58 12/01/2021
-                </small>
-               </span>
+               <small id="c71a50cd-0dce-4334-878a-4f1f9b5ccb50">
+                12:04:58 12/01/2021
+               </small>
               </div>
               Price for a single Google share
              </div>
              <div class="d-flex align-items-start">
-              <button class="ms-1 btn" id="f388bfe0-de5e-4f23-9d1a-8afdad6f202f" onclick="return false;">
+              <button class="ms-1 btn" id="893f10c9-9ef5-40d0-8e13-5898ee309b72" onclick="return false;">
                Buy
               </button>
-              <button class="ms-1 btn" id="467fed98-ba05-47d8-b741-9e2a7c415327" onclick="return false;">
+              <button class="ms-1 btn" id="6eecad28-d145-4e19-8af3-61e5a24f3896" onclick="return false;">
                Sell
               </button>
-              <button class="ms-1 btn" id="bcee0bfc-246a-4d70-b98d-24bdf68a0073" onclick="return false;">
+              <button class="ms-1 btn" id="7a41f22b-97f0-4470-9697-5d31d9374b57" onclick="return false;">
                Transfer
               </button>
              </div>
@@ -6215,28 +6059,26 @@ List(
            </a>
           </div>
          </div>
-         <div class="mt-5" id="1eaa7a2f-2a44-4e2f-be0f-93174a640fe9">
-          <div class="d-flex justify-content-between" id="7d6c053c-5680-4346-98f3-58be132f3274">
-           <h4 id="3ddc4e50-4058-45cd-8bd1-04ecf7613e9c">
+         <div class="mt-5" id="ae952867-a132-4d8f-9f4b-d2f1bdbc15a2">
+          <div class="d-flex justify-content-between" id="08105770-fa44-4188-a685-ded951c63cdf">
+           <h4 id="1c6efc77-7a29-4edd-ba6a-ec2f31d27a52">
             Method
-            <span class="text-primary" id="d7b93176-2a07-42ea-880b-7ce756f3fce2">
+            <span class="text-primary" id="da629bf6-bd4f-48fe-ba56-5415acda6dc6">
              as_selected
             </span>
            </h4>
-           <div id="93cfbc22-b50f-402a-b1bd-c67fd1aa58fc">
+           <div id="4622dcef-6946-4cf6-8744-7c9c0ae72926">
            </div>
           </div>
-          <span class="text-muted" id="bc38945b-0753-4c95-a424-1e3e0d52caec">
+          <span class="text-muted" id="39ad3cdb-1f85-4df1-81c3-cf328b316f18">
            Makes a list item selected.
           </span>
-          <pre id="0a544aad-fbf3-491b-bf92-3d8b91dc2416"><code class="python">as_selected()</code></pre>
-          <div class="ms-3" id="64c4489c-c6cc-4cb7-aab9-27ceefe0e05f">
-           <h6 id="c3df853f-7097-4c0d-8c5f-b3a56ed7150a">
-            <strong>
-             Example
-            </strong>
+          <pre id="28e0709d-2adb-4bc5-a73a-798ebf28c8a7"><code class="python">as_selected()</code></pre>
+          <div class="ms-3" id="ec455ce6-79d0-4296-b4af-89a33c01cd9e">
+           <h6 id="9ff958ce-2bef-434b-a33b-63a6a0869486">
+            Example
            </h6>
-           <pre id="5a8cb56c-612a-4c41-862d-de216efcf980"><code class="python">from bootwrap import Button, List, Image
+           <pre id="1554a7f0-d4bb-4e7d-848b-8908ff5f5301"><code class="python">from bootwrap import Button, List, Image
 
 actions = [
     Button("Buy"),
@@ -6255,32 +6097,30 @@ List(
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="5e6bafaa-3133-4a57-9f41-8d374736802e">
-           <div class="list-group" id="aa1c8ede-fcf2-47c5-aa4b-ebf3318d8b88">
-            <a class="list-group-item list-group-item-action flex-column align-items-start active" href="https://www.google.com" id="f62b5f72-d2c2-4759-9137-9bc0431db9e7">
+          <div class="ms-3" id="5e5dc304-2972-4b56-aa79-b66a42d62af8">
+           <div class="list-group" id="1e163a07-331b-4210-bc84-63dbd526e2d1">
+            <a class="list-group-item list-group-item-action flex-column align-items-start active" href="https://www.google.com" id="9dfb0921-c94d-41fd-8ea7-cd8d46fc5567">
              <div class="d-flex w-100 justify-content-between">
-              <img height="32" id="4cceee60-454c-4959-9e0a-ac8177c7d10b" src="google-logo.png" width="32"/>
+              <img height="32" id="e2d6d455-210b-4548-a2a1-c44936f0ac88" src="google-logo.png" width="32"/>
               <div class="ms-2 me-2 w-100">
                <div class="d-flex w-100 justify-content-between">
-                <h5 id="4e6613f9-b102-48ca-a46a-8df019372794">
+                <h5 id="6b1f288c-a463-4d1f-b3dc-65248e1332f8">
                  Google (NASDAQ: GOOGL)
                 </h5>
-                <span id="3c257b44-8ca9-4723-9446-6e0f7dd7d0c7">
-                 <small>
-                  12:04:58 12/01/2021
-                 </small>
-                </span>
+                <small id="84fe5609-9399-4a10-8737-a431a529093d">
+                 12:04:58 12/01/2021
+                </small>
                </div>
                Price for a single Google share
               </div>
               <div class="d-flex align-items-start">
-               <button class="ms-1 btn" id="1709356c-dec4-4522-a09c-7627dd772ac6" onclick="return false;">
+               <button class="ms-1 btn" id="100289f1-e01a-4dff-a17a-54fc09ef14fe" onclick="return false;">
                 Buy
                </button>
-               <button class="ms-1 btn" id="8aaa97bc-41c2-4fff-ac90-b2fef7d779f9" onclick="return false;">
+               <button class="ms-1 btn" id="3078ddda-76b0-4e83-83ce-ac5fe6ceec0b" onclick="return false;">
                 Sell
                </button>
-               <button class="ms-1 btn" id="499df490-d12b-4fcc-97fd-8e024ac519a1" onclick="return false;">
+               <button class="ms-1 btn" id="ef26243c-7762-4f73-bc78-8006320a691c" onclick="return false;">
                 Transfer
                </button>
               </div>
@@ -6289,28 +6129,26 @@ List(
            </div>
           </div>
          </div>
-         <div class="mt-5" id="6b901bef-a2b7-4f05-bbcb-ddcec63fb934">
-          <div class="d-flex justify-content-between" id="800a7b1a-67d5-4e62-bcc3-c20f5af621c3">
-           <h4 id="5760fb32-0351-461f-9e11-96360cb9b7a9">
+         <div class="mt-5" id="a8986c36-1163-40ea-a09f-aa78a571e7aa">
+          <div class="d-flex justify-content-between" id="170d0440-d3ba-4c8f-b79d-7a733d506834">
+           <h4 id="55069826-71d4-45de-81d2-6227d4d2642a">
             Method
-            <span class="text-primary" id="8a7d0ea0-e6b4-4c00-9fc2-c730c5ed2686">
+            <span class="text-primary" id="320eb598-7c0b-4089-98f7-62ab8f54c65d">
              pack_actions
             </span>
            </h4>
-           <div id="05d21678-c465-43b8-9f3b-0bc3ea138ab4">
+           <div id="a8c025e7-8378-4474-9d53-46fb48bb743d">
            </div>
           </div>
-          <span class="text-muted" id="c687c5a2-9f49-4080-90ef-25d210975c4e">
+          <span class="text-muted" id="9c95e984-5030-4083-910d-0f2caeb19664">
            Makes item actions packed under a drop-down menu.
           </span>
-          <pre id="2d3c1bf6-9044-4e81-a2e8-a0d180e6b5d0"><code class="python">pack_actions()</code></pre>
-          <div class="ms-3" id="244e4f7b-5c7a-4fe8-802c-33944f01e835">
-           <h6 id="92659b58-b9bd-4b1d-9989-3fc776a0b3d4">
-            <strong>
-             Example
-            </strong>
+          <pre id="54b8ac0e-b4c6-408d-964c-96009a7406d7"><code class="python">pack_actions()</code></pre>
+          <div class="ms-3" id="42531c99-173b-487a-8128-13f7abb0cb55">
+           <h6 id="439e19c3-3a34-4c24-9a98-2f28c58784d3">
+            Example
            </h6>
-           <pre id="d4069574-e5e6-4846-a404-a6ad1e8eccd5"><code class="python">from bootwrap import Button, List, Image
+           <pre id="d6454de5-0038-47b9-a629-017ca5ea7f0b"><code class="python">from bootwrap import Button, List, Image
 
 actions = [
     Button("Buy"),
@@ -6329,36 +6167,34 @@ List(
 )
 </code></pre>
           </div>
-          <div class="ms-3" id="de653fc2-69ae-4125-a4e5-86f44337292d">
-           <div class="list-group" id="7ae8e14c-b19e-4ddf-a9e6-2bf90fef799c">
-            <a class="list-group-item list-group-item-action flex-column align-items-start" href="https://www.google.com" id="869fff99-96ab-40a1-8a7f-d892eb2f7dda">
+          <div class="ms-3" id="dcda2e12-813d-4b82-b3eb-890d4adcaad9">
+           <div class="list-group" id="fca5f5d7-f3f9-48d1-91d3-52761402e249">
+            <a class="list-group-item list-group-item-action flex-column align-items-start" href="https://www.google.com" id="08822c3c-ad63-4e90-9638-46b195ab5585">
              <div class="d-flex w-100 justify-content-between">
-              <img height="32" id="0c4c40ef-b820-4c15-97f6-33d39d5581d7" src="google-logo.png" width="32"/>
+              <img height="32" id="39f0e1ed-9882-4b59-a241-42d363f5fc2a" src="google-logo.png" width="32"/>
               <div class="ms-2 me-2 w-100">
                <div class="d-flex w-100 justify-content-between">
-                <h5 id="f0c0fd47-cd0f-4f02-b647-3fccd323d1c6">
+                <h5 id="089e7030-cf31-428a-aad3-3a61e94f8710">
                  Google (NASDAQ: GOOGL)
                 </h5>
-                <span id="cfff27c1-cd7a-4e2b-8cf5-a335b52ae2d9">
-                 <small>
-                  12:04:58 12/01/2021
-                 </small>
-                </span>
+                <small id="d32b8820-442c-47c3-afc1-7ccacce7f5b1">
+                 12:04:58 12/01/2021
+                </small>
                </div>
                Price for a single Google share
               </div>
               <div class="d-flex align-items-start">
                <div class="btn-group">
-                <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="0a9fae25-4e2b-4043-a79e-da6d8a17ec73" onclick="return false;" style="cursor: pointer">
+                <i class="btn fas fa-ellipsis-v" data-bs-toggle="dropdown" id="ce6a9cbc-e981-43c9-9a6f-0b5c03331324" onclick="return false;" style="cursor: pointer">
                 </i>
                 <div class="dropdown-menu dropdown-menu-right">
-                 <button class="dropdown-item btn" id="b2c23a1d-435b-4132-a7c6-3dcdb31db221" onclick="return false;">
+                 <button class="dropdown-item btn" id="98edf17f-fb42-4ce6-b747-b299260f9fa2" onclick="return false;">
                   Buy
                  </button>
-                 <button class="dropdown-item btn" id="20c7a528-def0-449c-8628-306a1404ffe3" onclick="return false;">
+                 <button class="dropdown-item btn" id="5875460b-9b7c-409e-ae0d-09cf1965a1d3" onclick="return false;">
                   Sell
                  </button>
-                 <button class="dropdown-item btn" id="3bb0bf68-aead-471f-81b2-0a51c70de1a9" onclick="return false;">
+                 <button class="dropdown-item btn" id="139fcb1c-a7d0-4dd2-a166-e7ffdf07a09d" onclick="return false;">
                   Transfer
                  </button>
                 </div>
@@ -6374,52 +6210,50 @@ List(
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="2f69ce0b-12f1-41ee-ab34-3e6e791bde46">
-     <div id="b260368b-00c0-4911-944a-1735edf33f30">
+    <div class="tab-pane fade" id="34c7abee-054b-4069-acf4-62a5373c1af7">
+     <div id="26f4ded2-dbbf-45f2-b603-d09105ed31c2">
       <hr/>
-      <ul class="nav" id="905ddd68-2a28-4649-a007-caa073ce6bde" role="tablist">
+      <ul class="nav" id="ecb98b26-a71d-492f-bc7d-194642575dcc" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#537b8a99-7f68-49b0-bed7-0fcbc0b64f24" data-bs-toggle="tab" href="#537b8a99-7f68-49b0-bed7-0fcbc0b64f24" id="d0bf3ef7-3589-4031-aab1-457d1b92e217" role="tab">
-         <span class="text-secondary" id="87743a9e-07c2-4c01-bb62-d8fbec5d08c8">
+        <a class="nav-link active" data-bs-target="#a63256d6-a03f-4953-93af-ea697226e032" data-bs-toggle="tab" href="#a63256d6-a03f-4953-93af-ea697226e032" id="534788e1-8572-4964-84ad-57468e921efa" role="tab">
+         <span class="text-secondary" id="e98f1c3e-fe21-4520-abd1-2264b4bc2101">
           Navigation
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#eaeabff5-b14e-4c92-b9f4-8ab2fedefa2d" data-bs-toggle="tab" href="#eaeabff5-b14e-4c92-b9f4-8ab2fedefa2d" id="8c5387c7-d929-4010-9c53-b7ea74ec884e" role="tab">
-         <span class="text-secondary" id="0c31a928-2532-44d3-9546-5cf2ffd730f1">
+        <a class="nav-link" data-bs-target="#0fab779f-fcaf-455c-8832-7651544a6c0d" data-bs-toggle="tab" href="#0fab779f-fcaf-455c-8832-7651544a6c0d" id="936aecc3-d9e9-4b5a-a9bb-5745935042bc" role="tab">
+         <span class="text-secondary" id="e5ba93b5-9052-46b9-b821-0d3f6f1040f4">
           Navigation.Item
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="537b8a99-7f68-49b0-bed7-0fcbc0b64f24">
-        <div class="mt-5" id="548d9bd5-a0f7-4115-aab1-8af9c9b015fc">
-         <div class="d-flex justify-content-between" id="635c6d26-dfd1-4165-98b3-fef6436abdf1">
-          <h1 id="79c3d764-15e0-4375-bcf2-4f94b8064533">
+       <div class="tab-pane fade active show" id="a63256d6-a03f-4953-93af-ea697226e032">
+        <div class="mt-5" id="7bd86d64-9707-4d07-885b-1690335aeaff">
+         <div class="d-flex justify-content-between" id="189d5eed-734b-40c5-8d4a-3b4a4599efd6">
+          <h1 id="94bf3094-c7fe-4f02-a5a1-c8d84c5050cc">
            Class
-           <span class="text-primary" id="d85dd182-6d6d-48e5-8a5b-96a94d6539fb">
+           <span class="text-primary" id="20d684a8-863b-4e1a-b371-c8d88a4230de">
             Navigation
            </span>
           </h1>
-          <div id="5a46def1-4a2b-4369-be9d-35752e34ba2c">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#ee0a9242-ae38-461a-b81f-57114eb9ce1a" data-bs-toggle="collapse" id="786fa9a0-0fc7-4696-976d-4b9166743de6" onclick="return false;" type="button">
+          <div id="99e48055-2c72-40f8-bd5c-838f2d85a4f1">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#cb86dc6b-0226-4857-8a6d-26af3b3e6ae2" data-bs-toggle="collapse" id="6f12140d-9a50-44b3-a20f-16e94fb2b825" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="e768fed7-19f3-45b1-8494-867f94de9d9c">
+         <span class="text-muted" id="9b174684-4931-4215-b6b8-bc7e8442efaa">
           A web component for navigation.
          </span>
-         <pre id="49634890-499f-4fdf-80a8-26f26e2499b4"><code class="python">Navigation(*items)</code></pre>
-         <div class="ms-3 collapse" id="ee0a9242-ae38-461a-b81f-57114eb9ce1a">
-          <h6 id="85c43d9e-42a2-44a9-bc8b-e339b42ce69d">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="e252d95d-19fd-4ce7-a1dd-7f3f26596e09"><code class="python">Navigation(*items)</code></pre>
+         <div class="ms-3 collapse" id="cb86dc6b-0226-4857-8a6d-26af3b3e6ae2">
+          <h6 id="fe8e8f35-d060-44f9-90df-7583255caeef">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="1e7c3dda-f08c-4948-9a9a-04c9b094002d">
+          <table class="table table-sm bg-light" id="36fec8a2-ed7d-4460-b3be-4676322cf766">
            <thead>
             <tr>
              <th scope="col">
@@ -6456,13 +6290,11 @@ List(
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="e0627696-5f87-4994-a59d-da92ed9fb358">
-          <h6 id="d9a3eee7-f020-4153-9d3f-40527a9412b3">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="ed52022c-f371-4feb-99c8-d9854cf531a8">
+          <h6 id="d79f8f6a-b76d-40b5-88fa-2540cdf948de">
+           Example
           </h6>
-          <pre id="37862177-4a98-46fe-a058-32f3ee751e22"><code class="python">from bootwrap import Navigation
+          <pre id="05a20c3b-1a63-4d4d-8d09-93d61bef2deb"><code class="python">from bootwrap import Navigation
 
 Navigation(
     Navigation.Item('Chapter 1', 'Text 1', True),
@@ -6471,61 +6303,59 @@ Navigation(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="15855420-0c17-46cd-9cdf-07973495a652">
-          <ul class="nav" id="a7b3e464-0baf-48ee-a893-18036c1361a3" role="tablist">
+         <div class="ms-3" id="490ca945-3d6a-45b6-8418-ada20d51d822">
+          <ul class="nav" id="af17d913-8598-4f4e-af6e-710728984729" role="tablist">
            <li class="nav-item">
-            <a class="nav-link active" data-bs-target="#2cfe79c2-0674-4280-8c74-bcfcd635ce24" data-bs-toggle="tab" href="#2cfe79c2-0674-4280-8c74-bcfcd635ce24" id="606555df-8630-459c-94ad-490ed83d78cd" role="tab">
+            <a class="nav-link active" data-bs-target="#db4e3472-f0bc-4db8-a9d9-34a46f63fff6" data-bs-toggle="tab" href="#db4e3472-f0bc-4db8-a9d9-34a46f63fff6" id="16602cab-7cfd-4681-b5ef-9300e52d5630" role="tab">
              Chapter 1
             </a>
            </li>
            <li class="nav-item">
-            <a class="nav-link" data-bs-target="#4f71df77-fc86-47e2-9451-147d194e8616" data-bs-toggle="tab" href="#4f71df77-fc86-47e2-9451-147d194e8616" id="04c49bd8-f206-45de-ad01-a12ba5765cf1" role="tab">
+            <a class="nav-link" data-bs-target="#a0b3f391-a7a1-4c04-8ff6-fcc0da197f30" data-bs-toggle="tab" href="#a0b3f391-a7a1-4c04-8ff6-fcc0da197f30" id="5f7e67f2-c23a-466f-abee-3ef7d00b7ed3" role="tab">
              Chapter 2
             </a>
            </li>
            <li class="nav-item">
-            <a class="nav-link" data-bs-target="#98f77315-41a8-409d-ae6b-d27960a0d546" data-bs-toggle="tab" href="#98f77315-41a8-409d-ae6b-d27960a0d546" id="6c8f9928-82e0-4232-83e9-4ed7b8f1cdd5" role="tab">
+            <a class="nav-link" data-bs-target="#b42970a3-b12f-4f0b-81de-789726ef581b" data-bs-toggle="tab" href="#b42970a3-b12f-4f0b-81de-789726ef581b" id="b77cef2b-d4d5-4b59-a8c9-6b21dfba5d51" role="tab">
              Chapter 3
             </a>
            </li>
           </ul>
           <div class="tab-content">
-           <div class="tab-pane fade active show" id="2cfe79c2-0674-4280-8c74-bcfcd635ce24">
+           <div class="tab-pane fade active show" id="db4e3472-f0bc-4db8-a9d9-34a46f63fff6">
             Text 1
            </div>
-           <div class="tab-pane fade" id="4f71df77-fc86-47e2-9451-147d194e8616">
+           <div class="tab-pane fade" id="a0b3f391-a7a1-4c04-8ff6-fcc0da197f30">
             Text 2
            </div>
-           <div class="tab-pane fade" id="98f77315-41a8-409d-ae6b-d27960a0d546">
+           <div class="tab-pane fade" id="b42970a3-b12f-4f0b-81de-789726ef581b">
             Text 3
            </div>
           </div>
          </div>
-         <div class="mt-5" id="ee05151d-fc72-4d53-ad87-a9d9605e1a2b">
-          <div class="d-flex justify-content-between" id="eca3c006-d8df-488a-9a3f-3c62999d67e2">
-           <h4 id="a79a5162-21de-4660-b58f-2abfb2e33fd7">
+         <div class="mt-5" id="a9426ac0-d6a2-4a8a-92ef-fe98c6fcdb09">
+          <div class="d-flex justify-content-between" id="51b5a118-c8e3-4587-8a51-7667d8b5c4ff">
+           <h4 id="3ac6d693-2244-48dc-91cf-9a6c2e790edf">
             Method
-            <span class="text-primary" id="3649c643-f52e-45a1-bb04-dd5be7c3d10c">
+            <span class="text-primary" id="d655819f-d7b8-465b-b084-3d1aa13c6ec9">
              as_pills
             </span>
            </h4>
-           <div id="78440b97-9f2a-4054-9037-5a6344b45cd4">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#6eda5b3c-88ac-454d-897e-7429da5b87c2" data-bs-toggle="collapse" id="adc41edc-90a9-45dc-8d76-da7520d11287" onclick="return false;" type="button">
+           <div id="906f83c3-1f39-4a0b-a887-aa308f4511cd">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#a27c2930-4508-4e6e-8f0a-655390092c89" data-bs-toggle="collapse" id="25f9e5be-4a5c-4b50-b91b-494e2d424fd9" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="78c859dd-7b39-45de-8ebf-9393869203f6">
+          <span class="text-muted" id="244ab2af-0ca3-4991-bb3e-a70253a9cda0">
            Makes the navigation controls looks like buttons.
           </span>
-          <pre id="f8331312-7f3b-4f52-bb74-d6be180b72e3"><code class="python">as_pills()</code></pre>
-          <div class="ms-3 collapse" id="6eda5b3c-88ac-454d-897e-7429da5b87c2">
-           <h6 id="2d9e6a52-fa83-4b69-a597-5cbadc862456">
-            <strong>
-             Returns
-            </strong>
+          <pre id="4798719c-b185-4e1a-abf0-fd25c207f1d2"><code class="python">as_pills()</code></pre>
+          <div class="ms-3 collapse" id="a27c2930-4508-4e6e-8f0a-655390092c89">
+           <h6 id="5aed3d3c-9eda-40d0-bd31-fdb316e3ddaa">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="8c2d16f4-f15e-4e51-8ec9-41aa8bbd1d8e">
+           <table class="table table-sm bg-light" id="3abea56f-f0d4-4839-9acb-485eabd62125">
             <thead>
              <tr>
               <th scope="col">
@@ -6558,13 +6388,11 @@ Navigation(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="3ec3a8d1-e3dd-4ce4-977a-1310c4591482">
-           <h6 id="2ca789d3-f97f-4ed0-becf-f30947e0d395">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="ffe9e5d3-fef3-47bf-9b13-cee6b7058c8b">
+           <h6 id="0134974e-a7e5-4c46-9273-849a1e26e5b2">
+            Example
            </h6>
-           <pre id="ee2d610c-b435-40d4-9507-96916efd578e"><code class="python">from bootwrap import Navigation
+           <pre id="5fdfeaf1-c23b-4f79-8f7f-d049582e43e3"><code class="python">from bootwrap import Navigation
 
 Navigation(
     Navigation.Item('Chapter 1', 'Text 1', True),
@@ -6573,62 +6401,60 @@ Navigation(
 ).as_pills()
 </code></pre>
           </div>
-          <div class="ms-3" id="6e7eb246-3c77-4067-a9b8-41a9c6aab367">
-           <ul class="nav nav-pills" id="910d4189-2394-4a86-9daf-172fc93bdc31" role="tablist">
+          <div class="ms-3" id="27b10ae2-838c-4c74-b019-beac176e238b">
+           <ul class="nav nav-pills" id="9ff1d1d4-b2fa-4fee-9cd5-bbc45bc28ce7" role="tablist">
             <li class="nav-item">
-             <a class="nav-link active" data-bs-target="#d97fbc95-3788-4e7e-98ef-84c8eb61347f" data-bs-toggle="tab" href="#d97fbc95-3788-4e7e-98ef-84c8eb61347f" id="51d9420c-ca98-45fa-8a6e-6d368ce4709a" role="tab">
+             <a class="nav-link active" data-bs-target="#cb0d0dd8-aff4-4727-856d-d35e5a1706d9" data-bs-toggle="tab" href="#cb0d0dd8-aff4-4727-856d-d35e5a1706d9" id="321be31b-50ec-44fa-9a3b-c4dc65bd240d" role="tab">
               Chapter 1
              </a>
             </li>
             <li class="nav-item">
-             <a class="nav-link" data-bs-target="#adcbfe76-ff1d-4b81-9d73-57cd22b16517" data-bs-toggle="tab" href="#adcbfe76-ff1d-4b81-9d73-57cd22b16517" id="bfed52d6-de34-4435-92e3-b69976089c26" role="tab">
+             <a class="nav-link" data-bs-target="#b62eeb4f-e3ce-4c3a-ad98-2b7cca44475c" data-bs-toggle="tab" href="#b62eeb4f-e3ce-4c3a-ad98-2b7cca44475c" id="900cc0a8-8061-4bf5-bcc4-ea257b0a5bcb" role="tab">
               Chapter 2
              </a>
             </li>
             <li class="nav-item">
-             <a class="nav-link" data-bs-target="#eadd998d-75fb-400a-b249-83822698b380" data-bs-toggle="tab" href="#eadd998d-75fb-400a-b249-83822698b380" id="b630162f-2786-4123-83b1-4a127bd5faff" role="tab">
+             <a class="nav-link" data-bs-target="#6f8c5409-1b03-44ef-849b-c6f2fb42a87f" data-bs-toggle="tab" href="#6f8c5409-1b03-44ef-849b-c6f2fb42a87f" id="975aed1e-e5a5-48df-95ad-9d5175a882c1" role="tab">
               Chapter 3
              </a>
             </li>
            </ul>
            <div class="tab-content">
-            <div class="tab-pane fade active show" id="d97fbc95-3788-4e7e-98ef-84c8eb61347f">
+            <div class="tab-pane fade active show" id="cb0d0dd8-aff4-4727-856d-d35e5a1706d9">
              Text 1
             </div>
-            <div class="tab-pane fade" id="adcbfe76-ff1d-4b81-9d73-57cd22b16517">
+            <div class="tab-pane fade" id="b62eeb4f-e3ce-4c3a-ad98-2b7cca44475c">
              Text 2
             </div>
-            <div class="tab-pane fade" id="eadd998d-75fb-400a-b249-83822698b380">
+            <div class="tab-pane fade" id="6f8c5409-1b03-44ef-849b-c6f2fb42a87f">
              Text 3
             </div>
            </div>
           </div>
          </div>
-         <div class="mt-5" id="ec2a7f51-0213-4ad9-9e2e-8b4a2fd807ba">
-          <div class="d-flex justify-content-between" id="941f20a6-b293-4331-888a-8173a7f725e3">
-           <h4 id="5e813f58-6493-49ac-b64f-0bd5da253b13">
+         <div class="mt-5" id="c7834174-a60d-4470-8408-fbbce5adb82a">
+          <div class="d-flex justify-content-between" id="4c661cf6-30b5-47bd-a8ab-e29906b7e3ab">
+           <h4 id="977f0549-8066-4b2a-a883-96676cc24956">
             Method
-            <span class="text-primary" id="e744d28a-ab02-4264-a710-0b5a56fcd7c3">
+            <span class="text-primary" id="21521cc0-d100-4fbf-b592-65274dfdd2b1">
              as_tabs
             </span>
            </h4>
-           <div id="07b315e5-5744-42df-a2e2-46baddb8cdb1">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#35054d59-e786-42e4-8899-92b9fa7403fe" data-bs-toggle="collapse" id="4e944ccd-989c-4e58-81dd-7c1c9b002dc8" onclick="return false;" type="button">
+           <div id="16e1a079-eb77-48ad-b9cb-05c866fe968c">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#1cbb9762-5a1f-4df7-86b0-3030f483f467" data-bs-toggle="collapse" id="774880a0-2435-495b-8bdf-f93d81a92e51" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="f365b5b1-e010-4a81-99d6-ff8cf3f1ca06">
+          <span class="text-muted" id="8493e17f-fc89-4b80-9564-24ad91e79286">
            Makes the navigation controls looks like buttons.
           </span>
-          <pre id="16e3e060-3beb-4277-b14d-0c41ade1834e"><code class="python">as_tabs()</code></pre>
-          <div class="ms-3 collapse" id="35054d59-e786-42e4-8899-92b9fa7403fe">
-           <h6 id="5248509a-fa50-49a8-b7e9-3ce7903a7647">
-            <strong>
-             Returns
-            </strong>
+          <pre id="2193b9a2-67a4-460c-8556-1fc274f28bc4"><code class="python">as_tabs()</code></pre>
+          <div class="ms-3 collapse" id="1cbb9762-5a1f-4df7-86b0-3030f483f467">
+           <h6 id="3ebe95fa-2840-45cb-8c98-6830b1c2da8c">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="6711a37a-91d9-4a5c-aadf-5ad3760a0d17">
+           <table class="table table-sm bg-light" id="cef87cd4-a1f3-41b5-aeba-048edd02e3db">
             <thead>
              <tr>
               <th scope="col">
@@ -6661,13 +6487,11 @@ Navigation(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="a25a52cc-2244-4445-81c9-50509ee2e76d">
-           <h6 id="354022c5-116d-45d5-a502-bc30b92b2f6f">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="8a2b9ad8-1634-4001-888f-f66be6b4026a">
+           <h6 id="3f7d226c-5af6-4377-ad07-db59ef6995f0">
+            Example
            </h6>
-           <pre id="9bea41fd-9b4b-40b1-900b-3acb66b98c2f"><code class="python">from bootwrap import Navigation
+           <pre id="4e3262f2-2862-48bf-a09a-9d8d6803ea8c"><code class="python">from bootwrap import Navigation
 
 Navigation(
     Navigation.Item('Chapter 1', 'Text 1', True),
@@ -6676,62 +6500,60 @@ Navigation(
 ).as_tabs()
 </code></pre>
           </div>
-          <div class="ms-3" id="e839f895-7538-49d3-bdbc-c1e4038d5adb">
-           <ul class="nav nav-tabs" id="b733857a-bef2-4512-88d0-c3135f5db45c" role="tablist">
+          <div class="ms-3" id="56cd3d1b-7f51-4a78-8e51-a3fb1a5aff87">
+           <ul class="nav nav-tabs" id="75cbd34f-2721-47e3-bb5c-d12f4dac7b04" role="tablist">
             <li class="nav-item">
-             <a class="nav-link active" data-bs-target="#7ba309f8-1d74-4bc9-8d72-30204cff6331" data-bs-toggle="tab" href="#7ba309f8-1d74-4bc9-8d72-30204cff6331" id="fca87938-f7b6-49b1-ae33-ab7523ed78db" role="tab">
+             <a class="nav-link active" data-bs-target="#c6276e56-6761-4543-949f-1b5ac1c5c6ea" data-bs-toggle="tab" href="#c6276e56-6761-4543-949f-1b5ac1c5c6ea" id="e8a966f6-b9f9-44f4-ad43-7f50a8da9f58" role="tab">
               Chapter 1
              </a>
             </li>
             <li class="nav-item">
-             <a class="nav-link" data-bs-target="#b9937a07-8334-43e9-bc77-94635bebcc05" data-bs-toggle="tab" href="#b9937a07-8334-43e9-bc77-94635bebcc05" id="e8a94b19-dd4d-4fd6-a3bb-1c94c84d5ce5" role="tab">
+             <a class="nav-link" data-bs-target="#5bee474d-e5ec-4393-a9be-e35ca1f71f5a" data-bs-toggle="tab" href="#5bee474d-e5ec-4393-a9be-e35ca1f71f5a" id="3e47fd13-99da-4be8-bb8e-7854844c8c36" role="tab">
               Chapter 2
              </a>
             </li>
             <li class="nav-item">
-             <a class="nav-link" data-bs-target="#4cf4b8a3-cc1f-4116-af15-c754e35e19bc" data-bs-toggle="tab" href="#4cf4b8a3-cc1f-4116-af15-c754e35e19bc" id="44260d34-b056-4494-ab23-de4ccc5802a2" role="tab">
+             <a class="nav-link" data-bs-target="#9fbeca92-07b6-4ad6-ae4f-a8f948528a2e" data-bs-toggle="tab" href="#9fbeca92-07b6-4ad6-ae4f-a8f948528a2e" id="3d970e65-098b-4e82-82ce-7713af29ca12" role="tab">
               Chapter 3
              </a>
             </li>
            </ul>
            <div class="tab-content">
-            <div class="tab-pane fade active show" id="7ba309f8-1d74-4bc9-8d72-30204cff6331">
+            <div class="tab-pane fade active show" id="c6276e56-6761-4543-949f-1b5ac1c5c6ea">
              Text 1
             </div>
-            <div class="tab-pane fade" id="b9937a07-8334-43e9-bc77-94635bebcc05">
+            <div class="tab-pane fade" id="5bee474d-e5ec-4393-a9be-e35ca1f71f5a">
              Text 2
             </div>
-            <div class="tab-pane fade" id="4cf4b8a3-cc1f-4116-af15-c754e35e19bc">
+            <div class="tab-pane fade" id="9fbeca92-07b6-4ad6-ae4f-a8f948528a2e">
              Text 3
             </div>
            </div>
           </div>
          </div>
-         <div class="mt-5" id="0275bebd-c2c3-44d7-883c-a4775e66003a">
-          <div class="d-flex justify-content-between" id="92970d7b-47e6-4897-8c6e-770b991419e1">
-           <h4 id="3ade254d-7a32-4178-8158-16ea93998f6e">
+         <div class="mt-5" id="32c0c783-a974-4d04-b7c8-f5bcaacb4a7a">
+          <div class="d-flex justify-content-between" id="0c5a5f74-e129-42fa-92de-77a27e91a758">
+           <h4 id="ba7271a6-b25e-4487-863d-71193e6d27f2">
             Method
-            <span class="text-primary" id="528a3c78-027a-45dd-a60a-bd62cd76e676">
+            <span class="text-primary" id="33a617e6-1322-4531-85ee-c69067f8acbc">
              as_vertical
             </span>
            </h4>
-           <div id="3c4f522e-1076-4118-8ad6-34337faf0561">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#9cef9967-3585-4e7e-ae91-5f1e428fc27c" data-bs-toggle="collapse" id="705c604e-1bda-44f7-81cc-2671a978aeac" onclick="return false;" type="button">
+           <div id="d99bdabd-25cc-4803-acdd-88c8ebd54d20">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#d8a4a9d1-7d7a-4f63-b2d4-fc5180f8876b" data-bs-toggle="collapse" id="17c1868c-ad99-415b-9921-834f8acbaec1" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="14793920-7532-4be1-a51a-548f280a4471">
+          <span class="text-muted" id="210145f5-e288-470e-b270-ecc86a5c2ad7">
            Makes the navigation vertical.
           </span>
-          <pre id="60e98e77-7cfc-406b-bafd-b35bcc0807f8"><code class="python">as_vertical()</code></pre>
-          <div class="ms-3 collapse" id="9cef9967-3585-4e7e-ae91-5f1e428fc27c">
-           <h6 id="f8adab88-b518-4abc-a600-ca7bfe91a868">
-            <strong>
-             Returns
-            </strong>
+          <pre id="df78d3a0-f562-4188-ac65-8223a2edb2eb"><code class="python">as_vertical()</code></pre>
+          <div class="ms-3 collapse" id="d8a4a9d1-7d7a-4f63-b2d4-fc5180f8876b">
+           <h6 id="d3df57ec-4078-47fc-bf8e-5440301344fb">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="73050fdb-319d-43b7-9375-82ea480a3b71">
+           <table class="table table-sm bg-light" id="26b49554-61ea-4217-9bd9-5de36417a96f">
             <thead>
              <tr>
               <th scope="col">
@@ -6764,13 +6586,11 @@ Navigation(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="9910e09c-a8ee-437c-b3d2-17c1ae6e66e4">
-           <h6 id="1a155f85-56a8-4608-bef4-702289505434">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="c607d816-c26c-4f3d-8e0b-a12522c6a057">
+           <h6 id="b40a0ab6-c3b8-4501-9c36-1118e6a59b96">
+            Example
            </h6>
-           <pre id="bb51bd2f-47f2-4f70-9cf5-b58330468b22"><code class="python">from bootwrap import Navigation
+           <pre id="198316de-af78-4cce-a4a9-956a01aaade7"><code class="python">from bootwrap import Navigation
 
 Navigation(
     Navigation.Item('Chapter 1', 'Text 1', True),
@@ -6779,33 +6599,33 @@ Navigation(
 ).as_vertical()
 </code></pre>
           </div>
-          <div class="ms-3" id="706ff8ec-8e81-47fd-a988-eb9a7107aa59">
+          <div class="ms-3" id="76db0523-2c7f-4f7f-8b13-04603364b08b">
            <div class="d-flex">
-            <ul class="nav flex-column" id="7eff302d-a76a-454d-986b-8269a351e885" role="tablist">
+            <ul class="nav flex-column" id="b5015f3d-af92-4ff9-a249-203f2abd8197" role="tablist">
              <li class="nav-item">
-              <a class="nav-link active" data-bs-target="#9cdb87e3-a827-4ab5-b924-20cec2e50744" data-bs-toggle="tab" href="#9cdb87e3-a827-4ab5-b924-20cec2e50744" id="8e5a54e9-67a7-4f92-8936-7d8787821955" role="tab">
+              <a class="nav-link active" data-bs-target="#e6513b56-56d3-4893-8569-a2414417fd49" data-bs-toggle="tab" href="#e6513b56-56d3-4893-8569-a2414417fd49" id="9be6ef29-b9a6-4490-94e0-f787349a4b96" role="tab">
                Chapter 1
               </a>
              </li>
              <li class="nav-item">
-              <a class="nav-link" data-bs-target="#105debde-def2-49c1-84c8-e846f03af81c" data-bs-toggle="tab" href="#105debde-def2-49c1-84c8-e846f03af81c" id="01be1bc4-696f-4e17-9c0f-c76a602fbf0c" role="tab">
+              <a class="nav-link" data-bs-target="#0777f8b7-7503-410c-9399-8733cf81ddc2" data-bs-toggle="tab" href="#0777f8b7-7503-410c-9399-8733cf81ddc2" id="6f3946c0-2e3f-45be-aee4-92a3e1649e78" role="tab">
                Chapter 2
               </a>
              </li>
              <li class="nav-item">
-              <a class="nav-link" data-bs-target="#c20f668b-9148-4d43-a986-25a8009b9aa3" data-bs-toggle="tab" href="#c20f668b-9148-4d43-a986-25a8009b9aa3" id="22df72ad-0b6b-466c-9bdc-fdd8ed0d0439" role="tab">
+              <a class="nav-link" data-bs-target="#aff1ec91-b606-4fce-9141-ad0c58366214" data-bs-toggle="tab" href="#aff1ec91-b606-4fce-9141-ad0c58366214" id="03383fb8-0487-4b98-af7d-cbb95d6283f6" role="tab">
                Chapter 3
               </a>
              </li>
             </ul>
             <div class="tab-content">
-             <div class="tab-pane fade active show" id="9cdb87e3-a827-4ab5-b924-20cec2e50744">
+             <div class="tab-pane fade active show" id="e6513b56-56d3-4893-8569-a2414417fd49">
               Text 1
              </div>
-             <div class="tab-pane fade" id="105debde-def2-49c1-84c8-e846f03af81c">
+             <div class="tab-pane fade" id="0777f8b7-7503-410c-9399-8733cf81ddc2">
               Text 2
              </div>
-             <div class="tab-pane fade" id="c20f668b-9148-4d43-a986-25a8009b9aa3">
+             <div class="tab-pane fade" id="aff1ec91-b606-4fce-9141-ad0c58366214">
               Text 3
              </div>
             </div>
@@ -6814,52 +6634,52 @@ Navigation(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="eaeabff5-b14e-4c92-b9f4-8ab2fedefa2d">
-        <div class="mt-5" id="9108d22d-aa69-4d40-a434-a7e3fd49172f">
-         <div class="d-flex justify-content-between" id="60cbfff4-7448-4ea4-bd37-3abd28aab225">
-          <h1 id="180db108-81eb-479b-8568-d8ca7322b44d">
+       <div class="tab-pane fade" id="0fab779f-fcaf-455c-8832-7651544a6c0d">
+        <div class="mt-5" id="4c395ac5-6936-4297-af7d-eb62c7c443b2">
+         <div class="d-flex justify-content-between" id="99a91724-e745-4cc6-b5fb-c8d160ab7603">
+          <h1 id="f056e954-1c81-40eb-8e54-27b796301ee6">
            Class
-           <span class="text-primary" id="097e4f7b-66ba-4b6e-a179-1e3cba66f0c0">
+           <span class="text-primary" id="c1ce7d3f-84f5-439f-acb1-1a15f9e78588">
             Navigation.Item
            </span>
           </h1>
-          <div id="1962d444-078f-4c71-91d7-b3a09e8053dc">
+          <div id="d2b2e447-3a45-416c-a5b3-ce474b1e8ef0">
           </div>
          </div>
-         <span class="text-muted" id="5d8d1dcc-1078-4609-b521-eb6e99c8e798">
+         <span class="text-muted" id="9af8e547-6aa3-46a8-90a1-69d1d5f187bf">
           None
          </span>
-         <pre id="6b6d0016-4cdd-4c0a-a51e-366da6a466dc"><code class="python">Navigation.Item(name, content, active=False)</code></pre>
-         <div class="mt-5" id="7a8dda46-1240-44cb-93bf-95f855c9d6f1">
-          <h4 id="26103c8e-ae40-40bf-aece-d1574e884f73">
+         <pre id="1ba8511d-5714-4741-a081-e89320921fc1"><code class="python">Navigation.Item(name, content, active=False)</code></pre>
+         <div class="mt-5" id="fae13e06-3086-4b2c-8411-297f991334ad">
+          <h4 id="0e8a9a5c-e700-448c-94a9-3f6cbc680daf">
            Property
-           <span class="text-primary" id="5834d317-7074-4481-bdc5-30f1fe6f2f0c">
+           <span class="text-primary" id="c13c42e3-f2b6-425d-94f4-fbc4da9470c0">
             active
            </span>
           </h4>
-          <span class="text-muted" id="af57a775-c1c7-4126-b517-56b328a03243">
+          <span class="text-muted" id="bd8950a3-2254-4fb0-9b40-0b3b943caea8">
            None
           </span>
          </div>
-         <div class="mt-5" id="53596d9a-dd0d-4660-b241-a766f674c6f2">
-          <h4 id="542a9108-0542-4236-bc4f-fbabeef810eb">
+         <div class="mt-5" id="66be1929-d90f-4a7e-a998-5e0926dd4fcb">
+          <h4 id="481629c2-b55e-46f1-aff1-db28175d489a">
            Property
-           <span class="text-primary" id="8d32479b-fc47-4ef8-81a7-cd6addbc27a7">
+           <span class="text-primary" id="c3c3d422-b855-4039-bac9-e351c85e6825">
             content
            </span>
           </h4>
-          <span class="text-muted" id="63897b80-7260-4ed6-809a-31d91c1792ad">
+          <span class="text-muted" id="736c34b1-004b-48b2-b2a3-d2870a3b35e5">
            None
           </span>
          </div>
-         <div class="mt-5" id="927b8bd2-ec95-47f9-ac02-500e567af691">
-          <h4 id="1d753c0c-61ff-4012-857c-78c6261a15f1">
+         <div class="mt-5" id="cb61d50a-f353-41c2-b25e-99d1f8b5955c">
+          <h4 id="5f221c1b-489b-4eaa-b1d3-9eab6473ace0">
            Property
-           <span class="text-primary" id="b38ce4b5-433c-4c69-aeb0-dfb576377fc9">
+           <span class="text-primary" id="8e0ce2d4-c7ea-4801-8884-4fb4b5234834">
             name
            </span>
           </h4>
-          <span class="text-muted" id="e4d34e42-accf-4393-8e7e-3411882d24cd">
+          <span class="text-muted" id="787bce85-614f-44d4-8bcd-4bbea0acbf83">
            None
           </span>
          </div>
@@ -6868,214 +6688,231 @@ Navigation(
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="1cb75d71-2477-403e-bdaa-740de3116f1d">
-     <div class="mt-5" id="3affc655-3bf9-47c0-a340-9c0a1b893f24">
-      <div class="d-flex justify-content-between" id="4751798d-73e5-4527-8582-f338d3f4f46c">
-       <h1 id="93897876-8d31-4082-a477-8e03d7689496">
-        Class
-        <span class="text-primary" id="08635a21-62dc-4441-a6f9-bf67e220b342">
-         Panel
-        </span>
-       </h1>
-       <div id="7ba46abc-67e4-41b6-a6ef-945ff87549a0">
-        <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#51d4d0cd-67af-4260-bb5e-60f700df0fd0" data-bs-toggle="collapse" id="2a009088-1b70-4313-9cce-a9849afc4a60" onclick="return false;" type="button">
-         Argument
-        </button>
-       </div>
-      </div>
-      <span class="text-muted" id="7444dbda-e516-4ed8-a606-a498006fc379">
-       A web component for a panel.
-      </span>
-      <pre id="ea06184d-067b-416d-a528-390d49c7dba8"><code class="python">Panel(*components)</code></pre>
-      <div class="ms-3 collapse" id="51d4d0cd-67af-4260-bb5e-60f700df0fd0">
-       <h6 id="b1c75c81-32ef-4633-9ff7-3a49e28c7a78">
-        <strong>
-         Arguments
-        </strong>
-       </h6>
-       <table class="table table-sm bg-light" id="95b306a7-a6e1-4448-af41-164de908929d">
-        <thead>
-         <tr>
-          <th scope="col">
-           Name
-          </th>
-          <th scope="col">
-           Type
-          </th>
-          <th scope="col">
-           Description
-          </th>
-         </tr>
-        </thead>
-        <tbody>
-         <tr>
-          <td scope="row">
-           <i style="white-space: nowrap">
-            *components
-           </i>
-          </td>
-          <td>
-           <code style="white-space: nowrap">
-            list
-           </code>
-          </td>
-          <td>
-           The list of
-           <code>
-            WebComponent
-           </code>
-           .
-          </td>
-         </tr>
-        </tbody>
-       </table>
-      </div>
-      <div class="ms-3" id="1080e2e8-9c4e-4f85-8e83-9d995a2a76b4">
-       <h6 id="b0e40267-c8b3-405c-9445-83a11b26d85c">
-        <strong>
-         Example
-        </strong>
-       </h6>
-       <pre id="798a76c2-987c-4ccd-b2e6-8d40067ca138"><code class="python">from bootwrap import Text, Panel
-
-comp1 = Text("Component 1").add_classes("border").ms(1)
-comp2 = Text("Component 2").add_classes("border").ms(1)
-comp3 = Text("Component 3").add_classes("border").ms(1)
-
-Panel(comp1, comp2, comp3)
-</code></pre>
-      </div>
-      <div class="ms-3" id="42efff5f-0486-4068-b65e-d9d9f9345e61">
-       <div id="7d95e8a3-c2b2-4612-9bcd-f7443d408a1e">
-        <span class="border ms-1" id="7806634c-4027-4500-af30-ca7a8efc4a65">
-         Component 1
-        </span>
-        <span class="border ms-1" id="ba817a32-16b3-44df-90d9-8bf5ae232313">
-         Component 2
-        </span>
-        <span class="border ms-1" id="5cb4357b-ff0d-406d-94b0-675923878c1c">
-         Component 3
-        </span>
-       </div>
-      </div>
-      <div class="mt-5" id="05db62e3-7af9-4d51-8ade-fd2d2d72db06">
-       <div class="d-flex justify-content-between" id="dcd25061-9d5e-447e-b763-868481d86fde">
-        <h4 id="8aee7724-e156-4063-9e79-490f6cf99f24">
-         Method
-         <span class="text-primary" id="efd4eece-d0eb-4456-ba92-169e5ab0b084">
-          align_items
+    <div class="tab-pane fade" id="1aefe3d8-aa39-4654-ab35-72a3aa7cccb8">
+     <div id="099b9203-3194-4c9b-b136-d69ffad03643">
+      <hr/>
+      <ul class="nav" id="0ffe5e12-d7e4-4055-8bae-755653ac99b2" role="tablist">
+       <li class="nav-item">
+        <a class="nav-link active" data-bs-target="#73ba05cb-2ef8-40e9-b8e2-4b669fb8d7f3" data-bs-toggle="tab" href="#73ba05cb-2ef8-40e9-b8e2-4b669fb8d7f3" id="340e6ee8-6b54-4bbc-ada1-9d03d4cf3f3b" role="tab">
+         <span class="text-secondary" id="a49a33ee-9292-4ea4-b72b-d8f259d0a399">
+          Panel
          </span>
-        </h4>
-        <div id="cffe0b2c-f938-4050-9835-ae3ab4cf014d">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#5c288ff2-f68a-4a54-aeb9-ddcab90c7dbe" data-bs-toggle="collapse" id="534cc25f-456f-4174-9af1-85c71d8030fa" onclick="return false;" type="button">
-          Argument
-         </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#00154afa-eeed-4b97-920a-49f92aae8bf9" data-bs-toggle="collapse" id="e3bc3f07-77ff-4fa6-b382-d287dd5f4ed1" onclick="return false;" type="button">
-          Returns
-         </button>
-        </div>
-       </div>
-       <span class="text-muted" id="4de3ba33-766e-4ee9-8460-f9aed79f06bd">
-        Align panel items.
-       </span>
-       <pre id="51851eae-a5dc-47d2-bcf9-f9699cd87020"><code class="python">align_items(style)</code></pre>
-       <div class="ms-3 collapse" id="5c288ff2-f68a-4a54-aeb9-ddcab90c7dbe">
-        <h6 id="24760e8b-96ff-47fa-ae5a-f2768261ea8e">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="427474bd-aeba-4e08-bf73-2f2ad3090028">
-         <thead>
-          <tr>
-           <th scope="col">
-            Name
-           </th>
-           <th scope="col">
-            Type
-           </th>
-           <th scope="col">
-            Description
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td scope="row">
-            <i style="white-space: nowrap">
-             style
-            </i>
-           </td>
-           <td>
-            <code style="white-space: nowrap">
-             str
-            </code>
-           </td>
-           <td>
-            The style for aligning items can be one of "start",
-                "end", "center", "baseline", "stretch".
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-       <div class="ms-3 collapse" id="00154afa-eeed-4b97-920a-49f92aae8bf9">
-        <h6 id="908adb28-170a-4310-b08f-bb39790f8815">
-         <strong>
-          Returns
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="db1edf74-6d54-490e-92e2-8dbbb98f7557">
-         <thead>
-          <tr>
-           <th scope="col">
-            Name
-           </th>
-           <th scope="col">
-            Type
-           </th>
-           <th scope="col">
-            Description
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td scope="row">
-            <i style="white-space: nowrap">
-             obj
-            </i>
-           </td>
-           <td>
-            <code style="white-space: nowrap">
-             self
-            </code>
-           </td>
-           <td>
-            The instance of this class.
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-       <div class="ms-3" id="03813486-1c73-476c-95fa-51c9fe4146f7">
-        <h6 id="5981cc66-9327-4d10-abf0-7627a7790625">
-         <strong>
-          Example
-         </strong>
-        </h6>
-        <pre id="45335ea2-51f2-4f16-9abd-58bad67bc292"><code class="python">from bootwrap import Text, Panel, Image
+        </a>
+       </li>
+       <li class="nav-item">
+        <a class="nav-link" data-bs-target="#a18699a9-d927-4a91-899f-4d96ef64f45a" data-bs-toggle="tab" href="#a18699a9-d927-4a91-899f-4d96ef64f45a" id="35964f3b-d216-4620-aac7-af3cc0fa0fd5" role="tab">
+         <span class="text-secondary" id="647f7d4a-c402-4a06-9147-4ed35a3214bb">
+          Appearance
+         </span>
+        </a>
+       </li>
+       <li class="nav-item">
+        <a class="nav-link" data-bs-target="#1227c5b2-be77-4108-9ebc-bb84f9d87c09" data-bs-toggle="tab" href="#1227c5b2-be77-4108-9ebc-bb84f9d87c09" id="574d779b-fdbe-4b08-9546-3543a47f4847" role="tab">
+         <span class="text-secondary" id="bedf0def-e5d7-43a2-bfa2-1caa77b54087">
+          Outline
+         </span>
+        </a>
+       </li>
+      </ul>
+      <div class="tab-content">
+       <div class="tab-pane fade active show" id="73ba05cb-2ef8-40e9-b8e2-4b669fb8d7f3">
+        <div class="mt-5" id="65ffeed4-e686-4b60-9213-5e53f2f1a10d">
+         <div class="d-flex justify-content-between" id="b1517c7f-3687-45df-8564-95b9e7ea573a">
+          <h1 id="b9d69cfc-63d1-4ff3-b6f0-1f43174652db">
+           Class
+           <span class="text-primary" id="b496d627-2dfa-41e9-b051-993543a6be13">
+            Panel
+           </span>
+          </h1>
+          <div id="ec5ceb2c-f1f1-4de0-a632-6b461200a9b9">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#a7041ba7-bfe1-4cfc-b6b9-16375c044182" data-bs-toggle="collapse" id="2ef6e944-7a58-4443-ac04-9e22aa2b5a5f" onclick="return false;" type="button">
+            Argument
+           </button>
+          </div>
+         </div>
+         <span class="text-muted" id="fade4e5d-ff87-4a08-b277-034564a18a3d">
+          A web component for a panel.
+         </span>
+         <pre id="bc9f5d7b-01ba-4f25-bc43-7a130361b5be"><code class="python">Panel(*components)</code></pre>
+         <div class="ms-3 collapse" id="a7041ba7-bfe1-4cfc-b6b9-16375c044182">
+          <h6 id="6d4b194a-2ca8-4739-b716-f3b3855574b8">
+           Arguments
+          </h6>
+          <table class="table table-sm bg-light" id="0f217075-074b-4758-8fbf-d776857fc6a2">
+           <thead>
+            <tr>
+             <th scope="col">
+              Name
+             </th>
+             <th scope="col">
+              Type
+             </th>
+             <th scope="col">
+              Description
+             </th>
+            </tr>
+           </thead>
+           <tbody>
+            <tr>
+             <td scope="row">
+              <i style="white-space: nowrap">
+               *components
+              </i>
+             </td>
+             <td>
+              <code style="white-space: nowrap">
+               list
+              </code>
+             </td>
+             <td>
+              The list of
+              <code>
+               WebComponent
+              </code>
+              .
+             </td>
+            </tr>
+           </tbody>
+          </table>
+         </div>
+         <div class="ms-3" id="7d0cf273-ab62-4910-ac84-e35e1b5e0763">
+          <h6 id="04805680-4411-4d65-a665-7c53d770acb6">
+           Example
+          </h6>
+          <pre id="8a89ff68-cf72-4bff-8f56-0c3ac06cfdff"><code class="python">from bootwrap import Text, Panel
+
+comp1 = Text("Component 1").as_outline().ms(1)
+comp2 = Text("Component 2").as_outline().ms(1)
+comp3 = Text("Component 3").as_outline().ms(1)
+
+Panel(comp1, comp2, comp3)
+</code></pre>
+         </div>
+         <div class="ms-3" id="b0e4c59c-71fa-4f83-a503-efcd7c718ba0">
+          <div id="78b212c1-a4c6-4d0f-b2db-23de4ce4000a">
+           <span class="ms-1 border" id="2e5c64b6-b032-465d-adc3-468468bb63f6">
+            Component 1
+           </span>
+           <span class="ms-1 border" id="332f613c-5420-4512-90f1-042f0b0d9566">
+            Component 2
+           </span>
+           <span class="ms-1 border" id="a11b05de-b108-4863-a812-7313b0819089">
+            Component 3
+           </span>
+          </div>
+         </div>
+         <div class="mt-5" id="769e0238-1195-4715-9f7c-fc8d06587f4f">
+          <div class="d-flex justify-content-between" id="59db0f05-2db5-4d21-95da-ff5e1ac0ada8">
+           <h4 id="bacf5db5-c252-4894-a66a-229d05b37b77">
+            Method
+            <span class="text-primary" id="68329011-e03c-4056-b730-c6e4dc18aaac">
+             align_items
+            </span>
+           </h4>
+           <div id="0853a2d7-4e0b-4bcc-b048-c50fb88f8481">
+            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#9075b2e6-fc3f-4da1-870e-ca5eeb96ea12" data-bs-toggle="collapse" id="0fb664c2-09fa-4b85-b881-63cb72b2a1b5" onclick="return false;" type="button">
+             Argument
+            </button>
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#c58e0d8e-5945-499d-935c-9ffde9ff58ff" data-bs-toggle="collapse" id="64d42b4f-89b1-4a3f-80ec-8b4c69db755a" onclick="return false;" type="button">
+             Returns
+            </button>
+           </div>
+          </div>
+          <span class="text-muted" id="32416954-1d56-4724-8356-4163b2d8ccdf">
+           Align panel items.
+          </span>
+          <pre id="ebdef45a-4066-4966-8c21-cddb5b058c86"><code class="python">align_items(style)</code></pre>
+          <div class="ms-3 collapse" id="9075b2e6-fc3f-4da1-870e-ca5eeb96ea12">
+           <h6 id="0c68a48d-b01c-4f23-9b44-c360d0312aab">
+            Arguments
+           </h6>
+           <table class="table table-sm bg-light" id="77846a42-59f0-4c67-8182-142c5ffec75f">
+            <thead>
+             <tr>
+              <th scope="col">
+               Name
+              </th>
+              <th scope="col">
+               Type
+              </th>
+              <th scope="col">
+               Description
+              </th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+              <td scope="row">
+               <i style="white-space: nowrap">
+                style
+               </i>
+              </td>
+              <td>
+               <code style="white-space: nowrap">
+                str
+               </code>
+              </td>
+              <td>
+               The style for aligning items can be one of "start",
+                "end", "center", "baseline", "stretch".
+              </td>
+             </tr>
+            </tbody>
+           </table>
+          </div>
+          <div class="ms-3 collapse" id="c58e0d8e-5945-499d-935c-9ffde9ff58ff">
+           <h6 id="6c8f2b08-6959-4f77-b670-92aaff4de796">
+            Returns
+           </h6>
+           <table class="table table-sm bg-light" id="38072974-1f1e-4d45-b160-2c2b149da31f">
+            <thead>
+             <tr>
+              <th scope="col">
+               Name
+              </th>
+              <th scope="col">
+               Type
+              </th>
+              <th scope="col">
+               Description
+              </th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+              <td scope="row">
+               <i style="white-space: nowrap">
+                obj
+               </i>
+              </td>
+              <td>
+               <code style="white-space: nowrap">
+                self
+               </code>
+              </td>
+              <td>
+               The instance of this class.
+              </td>
+             </tr>
+            </tbody>
+           </table>
+          </div>
+          <div class="ms-3" id="525a9729-9593-4b44-9e36-47300ad120cf">
+           <h6 id="7c8ce39a-abe5-4ec1-abc1-1af7c6b5de80">
+            Example
+           </h6>
+           <pre id="dfd17136-0abb-480b-b394-7859329fa916"><code class="python">from bootwrap import Text, Panel, Image
 
 image  = Image("logo.png", height="200px")
-comp1 = Text("Component 1").as_light().add_classes("border").p(2).m(2)
-comp2 = Text("Component 2").as_light().add_classes("border").p(2).m(2)
-comp3 = Text("Component 3").as_light().add_classes("border").p(2).m(2)
+comp1 = Text("Component 1").as_light().as_outline().p(2).m(2)
+comp2 = Text("Component 2").as_light().as_outline().p(2).m(2)
+comp3 = Text("Component 3").as_light().as_outline().p(2).m(2)
 
-pnl_start = Panel(image, comp1, comp2, comp3).background("dark").align_items("start").mt(1)
-pnl_end = Panel(image, comp1, comp2, comp3).background("dark").align_items("end").mt(1)
-pnl_center = Panel(image, comp1, comp2, comp3).background("dark").align_items("center").mt(1)
-pnl_baseline = Panel(image, comp1, comp2, comp3).background("dark").align_items("baseline").mt(1)
-pnl_stretch = Panel(image, comp1, comp2, comp3).background("dark").align_items("stretch").mt(1)
+pnl_start = Panel(image, comp1, comp2, comp3).as_dark().align_items("start").mt(1)
+pnl_end = Panel(image, comp1, comp2, comp3).as_dark().align_items("end").mt(1)
+pnl_center = Panel(image, comp1, comp2, comp3).as_dark().align_items("center").mt(1)
+pnl_baseline = Panel(image, comp1, comp2, comp3).as_dark().align_items("baseline").mt(1)
+pnl_stretch = Panel(image, comp1, comp2, comp3).as_dark().align_items("stretch").mt(1)
 
 Panel(
     pnl_start,
@@ -7085,547 +6922,351 @@ Panel(
     pnl_stretch,
 ).vertical()
 </code></pre>
-       </div>
-       <div class="ms-3" id="055aa8d8-0232-4d39-afd5-6cb940902749">
-        <div id="e6479697-ead5-48be-b72b-fc97971aa8ba">
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex align-items-start mt-1" id="dacaf17e-eaea-4db6-9a5d-c5eb9c253d38">
-            <img height="200px" id="3535878f-4cb3-451a-8448-54b8ed5ea5c3" src="logo.png"/>
-            <span class="text-light border p-2 m-2" id="7c66673d-638b-4f73-869c-beb8984bf005">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="c6219798-5202-4ef7-98fe-d786736b2b29">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="df100ae1-c59f-4bac-92b5-5601c67a54a2">
-             Component 3
-            </span>
-           </div>
-          </div>
-         </div>
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex align-items-end mt-1" id="108ddd6d-e22d-4d4a-8114-cdff125de563">
-            <img height="200px" id="3535878f-4cb3-451a-8448-54b8ed5ea5c3" src="logo.png"/>
-            <span class="text-light border p-2 m-2" id="7c66673d-638b-4f73-869c-beb8984bf005">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="c6219798-5202-4ef7-98fe-d786736b2b29">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="df100ae1-c59f-4bac-92b5-5601c67a54a2">
-             Component 3
-            </span>
-           </div>
           </div>
-         </div>
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex align-items-center mt-1" id="d54a42fa-0ae7-4b1b-b9b2-7ac5c9c764da">
-            <img height="200px" id="3535878f-4cb3-451a-8448-54b8ed5ea5c3" src="logo.png"/>
-            <span class="text-light border p-2 m-2" id="7c66673d-638b-4f73-869c-beb8984bf005">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="c6219798-5202-4ef7-98fe-d786736b2b29">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="df100ae1-c59f-4bac-92b5-5601c67a54a2">
-             Component 3
-            </span>
+          <div class="ms-3" id="c6b82dfc-d8a9-4494-8f70-23bb691a9be1">
+           <div id="bc029f19-3828-4c96-8eb6-39e4c0502f20">
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex align-items-start mt-1 bg-dark" id="8fa33275-b199-4d19-ac06-1b5d9bb42740">
+               <img height="200px" id="7f6e24b7-a916-4a1a-beb2-ad8808de19e5" src="logo.png"/>
+               <span class="p-2 m-2 text-light border border-light" id="3238e4c4-5148-4259-b7dd-aab548818e51">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="79d696f6-a217-4e02-bbd7-706b4477bcc3">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="604b24a5-0c92-49b6-bc82-c55e9bc84d06">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex align-items-end mt-1 bg-dark" id="e5b2974b-615c-44bb-9706-c85e0ae2b2f4">
+               <img height="200px" id="7f6e24b7-a916-4a1a-beb2-ad8808de19e5" src="logo.png"/>
+               <span class="p-2 m-2 text-light border border-light" id="3238e4c4-5148-4259-b7dd-aab548818e51">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="79d696f6-a217-4e02-bbd7-706b4477bcc3">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="604b24a5-0c92-49b6-bc82-c55e9bc84d06">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex align-items-center mt-1 bg-dark" id="9815482c-96d3-4718-b2c3-a9aa243d2e27">
+               <img height="200px" id="7f6e24b7-a916-4a1a-beb2-ad8808de19e5" src="logo.png"/>
+               <span class="p-2 m-2 text-light border border-light" id="3238e4c4-5148-4259-b7dd-aab548818e51">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="79d696f6-a217-4e02-bbd7-706b4477bcc3">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="604b24a5-0c92-49b6-bc82-c55e9bc84d06">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex align-items-baseline mt-1 bg-dark" id="36146560-00d4-4348-bdeb-a74c9a5f35c4">
+               <img height="200px" id="7f6e24b7-a916-4a1a-beb2-ad8808de19e5" src="logo.png"/>
+               <span class="p-2 m-2 text-light border border-light" id="3238e4c4-5148-4259-b7dd-aab548818e51">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="79d696f6-a217-4e02-bbd7-706b4477bcc3">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="604b24a5-0c92-49b6-bc82-c55e9bc84d06">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex align-items-stretch mt-1 bg-dark" id="c9610a29-5e78-468e-a217-741dd7b6604b">
+               <img height="200px" id="7f6e24b7-a916-4a1a-beb2-ad8808de19e5" src="logo.png"/>
+               <span class="p-2 m-2 text-light border border-light" id="3238e4c4-5148-4259-b7dd-aab548818e51">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="79d696f6-a217-4e02-bbd7-706b4477bcc3">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="604b24a5-0c92-49b6-bc82-c55e9bc84d06">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
            </div>
           </div>
          </div>
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex align-items-baseline mt-1" id="c479e79b-7ce7-4702-820c-a0baaa5ef98a">
-            <img height="200px" id="3535878f-4cb3-451a-8448-54b8ed5ea5c3" src="logo.png"/>
-            <span class="text-light border p-2 m-2" id="7c66673d-638b-4f73-869c-beb8984bf005">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="c6219798-5202-4ef7-98fe-d786736b2b29">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="df100ae1-c59f-4bac-92b5-5601c67a54a2">
-             Component 3
+         <div class="mt-5" id="2c32a52f-2614-4007-b55f-34ddcd54f3c6">
+          <div class="d-flex justify-content-between" id="67945056-e41e-4629-949c-3bbb2094f117">
+           <h4 id="d6176fc2-5f4c-485a-93cc-6d4558645dd0">
+            Method
+            <span class="text-primary" id="a92755aa-a209-46ed-9148-eb714656519a">
+             as_collapse
             </span>
+           </h4>
+           <div id="1ca35777-915a-49aa-89eb-9d0e894ceab3">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#ebd43d5e-ad56-48ed-9745-9632a073b944" data-bs-toggle="collapse" id="74348919-929b-4bf4-9cf0-4039a7ad136b" onclick="return false;" type="button">
+             Returns
+            </button>
            </div>
           </div>
-         </div>
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex align-items-stretch mt-1" id="d84a698c-ecdc-4bf0-8a12-693584e44f8f">
-            <img height="200px" id="3535878f-4cb3-451a-8448-54b8ed5ea5c3" src="logo.png"/>
-            <span class="text-light border p-2 m-2" id="7c66673d-638b-4f73-869c-beb8984bf005">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="c6219798-5202-4ef7-98fe-d786736b2b29">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="df100ae1-c59f-4bac-92b5-5601c67a54a2">
-             Component 3
-            </span>
-           </div>
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-      <div class="mt-5" id="5bd8d1ce-85b1-4ce7-987c-62174fb81473">
-       <div class="d-flex justify-content-between" id="87a88933-7631-4d29-b7bb-b13bc1cde147">
-        <h4 id="075b02fc-47f7-478f-ab1a-7e557fd23bf8">
-         Method
-         <span class="text-primary" id="51ce30e0-bf53-40c1-9c8c-54d037796389">
-          as_collapse
-         </span>
-        </h4>
-        <div id="adb37654-aadf-4810-b45b-7b1848302614">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#2f930ae1-ccb9-4c79-ad6c-859f679dffaa" data-bs-toggle="collapse" id="a8d4fa5d-95e8-4db1-9045-29af32009606" onclick="return false;" type="button">
-          Returns
-         </button>
-        </div>
-       </div>
-       <span class="text-muted" id="fd5585b0-4faf-4d71-a3f2-2d45489fe104">
-        Makes the panel collapsed.
-       </span>
-       <pre id="9dc6c280-25a6-4d00-80ef-caa68c9575de"><code class="python">as_collapse()</code></pre>
-       <div class="ms-3 collapse" id="2f930ae1-ccb9-4c79-ad6c-859f679dffaa">
-        <h6 id="26e2c833-4b2e-45b1-af1c-717c67467876">
-         <strong>
-          Returns
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="09fa22ef-a355-46ed-a364-c29a45b38d85">
-         <thead>
-          <tr>
-           <th scope="col">
-            Name
-           </th>
-           <th scope="col">
-            Type
-           </th>
-           <th scope="col">
-            Description
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td scope="row">
-            <i style="white-space: nowrap">
-             obj
-            </i>
-           </td>
-           <td>
-            <code style="white-space: nowrap">
-             self
-            </code>
-           </td>
-           <td>
-            The instance of this class.
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-      </div>
-      <div class="mt-5" id="42284db8-860c-4de0-85f5-4b8906add34b">
-       <div class="d-flex justify-content-between" id="245648fc-f8a7-4da5-a4c0-faf65ec3ebb3">
-        <h4 id="49524028-18c4-4cf2-b484-a2bc72ddc765">
-         Method
-         <span class="text-primary" id="33aa798e-3e1b-4e3b-91fa-d603513bf5e1">
-          background
-         </span>
-        </h4>
-        <div id="ec7c078e-9f85-4459-8995-43406baf59e3">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#0e3c7033-e893-4b05-b087-e9321f4cdd15" data-bs-toggle="collapse" id="6147ded1-bf79-4ec9-82ae-326cc4c63c86" onclick="return false;" type="button">
-          Argument
-         </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#3e0a286b-a062-471f-b25a-cbf63826555b" data-bs-toggle="collapse" id="3aaa64ff-3051-4559-bf90-c1810c32ad1d" onclick="return false;" type="button">
-          Returns
-         </button>
-        </div>
-       </div>
-       <span class="text-muted" id="9824042c-2fac-40b1-8795-9e3090ba927d">
-        Sets the panel background color.
-       </span>
-       <pre id="7bdf7d35-3391-4a6f-8184-c5f245331b10"><code class="python">background(color)</code></pre>
-       <div class="ms-3 collapse" id="0e3c7033-e893-4b05-b087-e9321f4cdd15">
-        <h6 id="0da0dfff-7eb7-4097-a90a-ddf8efd226cd">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="7c3bc124-5fa5-4fb9-a2cb-3a4ebd6ffeda">
-         <thead>
-          <tr>
-           <th scope="col">
-            Name
-           </th>
-           <th scope="col">
-            Type
-           </th>
-           <th scope="col">
-            Description
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td scope="row">
-            <i style="white-space: nowrap">
-             color
-            </i>
-           </td>
-           <td>
-            <code style="white-space: nowrap">
-             str
-            </code>
-           </td>
-           <td>
-            The background color to set can be one of "primary",
-                "secondary", "success", "danger", "warning", "info",
-                "light", "dark", "body", "white","transparent"
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-       <div class="ms-3 collapse" id="3e0a286b-a062-471f-b25a-cbf63826555b">
-        <h6 id="3b6ce02b-a0e0-4a00-9b9a-88a7117ea42f">
-         <strong>
-          Returns
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="a8925107-317d-4675-8b50-8e1291bb4291">
-         <thead>
-          <tr>
-           <th scope="col">
-            Name
-           </th>
-           <th scope="col">
-            Type
-           </th>
-           <th scope="col">
-            Description
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td scope="row">
-            <i style="white-space: nowrap">
-             obj
-            </i>
-           </td>
-           <td>
-            <code style="white-space: nowrap">
-             self
-            </code>
-           </td>
-           <td>
-            The instance of this class.
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-       <div class="ms-3" id="173d55b6-5e10-4763-aa6f-f9c1c9feec43">
-        <h6 id="5ab24c51-1dc6-4b6d-a285-7dda4f7c7006">
-         <strong>
-          Example
-         </strong>
-        </h6>
-        <pre id="78d6acca-abbb-4b44-a3db-e736d3095c27"><code class="python">from bootwrap import Panel, Text
-
-Panel(
-    Panel(Text("primary").as_light()).background("primary").mb(1),
-    Panel(Text("secondary").as_light()).background("secondary").mb(1),
-    Panel(Text("success").as_light()).background("success").mb(1),
-    Panel(Text("danger").as_light()).background("danger").mb(1),
-    Panel(Text("warning")).background("warning").mb(1),
-    Panel(Text("info")).background("info").mb(1),
-    Panel(Text("light")).background("light").mb(1),
-    Panel(Text("dark").as_light()).background("dark").mb(1),
-    Panel(Text("body")).background("body").mb(1),
-    Panel(Text("white")).background("white").mb(1),
-    Panel(Text("transparent")).background("transparent").mb(1),
-)
-</code></pre>
-       </div>
-       <div class="ms-3" id="3f9f1277-f3be-48cb-888f-14a7f4312570">
-        <div id="f2623604-b60e-4958-a974-1573982153cf">
-         <div class="bg-primary mb-1" id="a8e3ee16-8217-4391-9cc9-28025eb4be7b">
-          <span class="text-light" id="b6b4ea15-aed9-4c45-b574-83adc5d97511">
-           primary
-          </span>
-         </div>
-         <div class="bg-secondary mb-1" id="a4456364-2344-4a4f-8e78-80e964f6539e">
-          <span class="text-light" id="e6578700-dc8f-47ae-b2a6-964656385051">
-           secondary
-          </span>
-         </div>
-         <div class="bg-success mb-1" id="06eb5c7a-8d32-4973-924e-dc414405b27c">
-          <span class="text-light" id="97bc6006-ced1-408d-afc2-4cca057e4b93">
-           success
-          </span>
-         </div>
-         <div class="bg-danger mb-1" id="94d0c50c-e547-4a5b-902e-761ae1d983e2">
-          <span class="text-light" id="c0c13088-f628-4961-a69d-ba899c4bc0d2">
-           danger
-          </span>
-         </div>
-         <div class="bg-warning mb-1" id="dd5377d8-ffd4-4caa-8fab-93605afbec47">
-          <span id="a6842ea6-55ee-4f32-b990-cb6db2ec8d1a">
-           warning
-          </span>
-         </div>
-         <div class="bg-info mb-1" id="c66f2c62-8ded-4baf-8baa-bae6e34a97ad">
-          <span id="7659653e-e8e7-48f6-bf63-7238a057c148">
-           info
-          </span>
-         </div>
-         <div class="bg-light mb-1" id="a9986d7d-5736-4fd0-876c-0ae69709e2d1">
-          <span id="05b0e3db-ae7a-497c-834c-10aa89ee2003">
-           light
-          </span>
-         </div>
-         <div class="bg-dark mb-1" id="03ad6e11-9e72-4284-890b-0f54dbac3f8e">
-          <span class="text-light" id="ceb4f38a-20d5-488b-9869-9dd85437e70d">
-           dark
-          </span>
-         </div>
-         <div class="bg-body mb-1" id="f990f5a9-c811-43cf-a36d-c5bd0058a8f6">
-          <span id="aa21680b-22ce-4dc1-82ca-619337d7935c">
-           body
-          </span>
-         </div>
-         <div class="bg-white mb-1" id="e5239827-96e3-4d17-b2bd-19c8978c1db0">
-          <span id="d222970d-8c0b-4f47-8d7f-faceae06f6c2">
-           white
-          </span>
-         </div>
-         <div class="bg-transparent mb-1" id="c3cbb6e0-1fca-4285-8b70-51af85b4b41f">
-          <span id="02b2d825-d46c-449c-bd37-84b6b7065b5e">
-           transparent
+          <span class="text-muted" id="51c3724f-1be2-428e-8f46-ae42c6095890">
+           Makes the panel collapsed.
           </span>
+          <pre id="be0b0dfd-e7fa-4853-9a71-020624a365e1"><code class="python">as_collapse()</code></pre>
+          <div class="ms-3 collapse" id="ebd43d5e-ad56-48ed-9745-9632a073b944">
+           <h6 id="a4169b79-531a-4735-a54a-b112137f03f6">
+            Returns
+           </h6>
+           <table class="table table-sm bg-light" id="7c88d718-28eb-4231-abc9-5b7824c6d4d0">
+            <thead>
+             <tr>
+              <th scope="col">
+               Name
+              </th>
+              <th scope="col">
+               Type
+              </th>
+              <th scope="col">
+               Description
+              </th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+              <td scope="row">
+               <i style="white-space: nowrap">
+                obj
+               </i>
+              </td>
+              <td>
+               <code style="white-space: nowrap">
+                self
+               </code>
+              </td>
+              <td>
+               The instance of this class.
+              </td>
+             </tr>
+            </tbody>
+           </table>
+          </div>
          </div>
-        </div>
-       </div>
-      </div>
-      <div class="mt-5" id="25d7b60d-ad7c-4d5d-b51b-87c3a41d1595">
-       <div class="d-flex justify-content-between" id="051342a5-4b7c-4226-9677-101f95dc7266">
-        <h4 id="26a9213f-2ad0-442d-8ab3-1f1c6fe92554">
-         Method
-         <span class="text-primary" id="4be16246-4d7b-4512-99eb-f263518d6f24">
-          horizontal
-         </span>
-        </h4>
-        <div id="56a16dd6-315c-488c-877a-d9a0bf86a750">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#295bb086-c7c0-4547-952f-fbc03d974378" data-bs-toggle="collapse" id="e0986a0a-01a6-4080-967b-3900093a7c27" onclick="return false;" type="button">
-          Returns
-         </button>
-        </div>
-       </div>
-       <span class="text-muted" id="398a5b8e-f45f-4dad-9a26-92a22cbbce9e">
-        Makes the panel with the horizontal arrangement of encapsulating
+         <div class="mt-5" id="dacaf386-14da-44fd-b75c-51b06d026f4d">
+          <div class="d-flex justify-content-between" id="0969f50e-c6f3-4035-b987-ac390a4ba9f9">
+           <h4 id="e3292d45-e9bb-4177-8baf-70f1bbe255b2">
+            Method
+            <span class="text-primary" id="0a2124ec-4014-4a17-bb3b-97a6089850d9">
+             horizontal
+            </span>
+           </h4>
+           <div id="e6780587-90d0-4b02-83ed-633d4f17907d">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#dc4c0d27-c193-4b69-87ca-65b045056135" data-bs-toggle="collapse" id="82e6816c-289b-4543-a215-de70995e0688" onclick="return false;" type="button">
+             Returns
+            </button>
+           </div>
+          </div>
+          <span class="text-muted" id="ef9f6161-209b-4050-8877-b7add3a80692">
+           Makes the panel with the horizontal arrangement of encapsulating
         elements
-       </span>
-       <pre id="0ebc3347-f230-438b-a9c2-22cefb3f824c"><code class="python">horizontal()</code></pre>
-       <div class="ms-3 collapse" id="295bb086-c7c0-4547-952f-fbc03d974378">
-        <h6 id="80948983-4c39-4554-b730-b78cfc795b6b">
-         <strong>
-          Returns
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="0e1bb1e2-0ead-44d5-90d0-ad8adaf531bf">
-         <thead>
-          <tr>
-           <th scope="col">
-            Name
-           </th>
-           <th scope="col">
-            Type
-           </th>
-           <th scope="col">
-            Description
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td scope="row">
-            <i style="white-space: nowrap">
-             obj
-            </i>
-           </td>
-           <td>
-            <code style="white-space: nowrap">
-             self
-            </code>
-           </td>
-           <td>
-            The instance of this class.
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-       <div class="ms-3" id="c39d494c-58e7-4537-90b2-6edbf025dcf9">
-        <h6 id="9e61ddf5-27e6-4ca9-9b6e-1a83d336523b">
-         <strong>
-          Example
-         </strong>
-        </h6>
-        <pre id="1d8d5123-7ed3-4d08-9693-d9bfd09e64f5"><code class="python">from bootwrap import Text, Panel
+          </span>
+          <pre id="bd60765f-ebaf-4d12-b365-1c46cf9e8d81"><code class="python">horizontal()</code></pre>
+          <div class="ms-3 collapse" id="dc4c0d27-c193-4b69-87ca-65b045056135">
+           <h6 id="d0b3b0b1-384d-4a77-bb66-cf982c89cdac">
+            Returns
+           </h6>
+           <table class="table table-sm bg-light" id="022abf52-3eee-4183-9cda-dfd61c7a8cae">
+            <thead>
+             <tr>
+              <th scope="col">
+               Name
+              </th>
+              <th scope="col">
+               Type
+              </th>
+              <th scope="col">
+               Description
+              </th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+              <td scope="row">
+               <i style="white-space: nowrap">
+                obj
+               </i>
+              </td>
+              <td>
+               <code style="white-space: nowrap">
+                self
+               </code>
+              </td>
+              <td>
+               The instance of this class.
+              </td>
+             </tr>
+            </tbody>
+           </table>
+          </div>
+          <div class="ms-3" id="29967867-37e4-4477-977a-7dcdabf32974">
+           <h6 id="ba7e27b2-4862-4c0c-970b-6e82f30470a7">
+            Example
+           </h6>
+           <pre id="fdfb1ef9-58af-436e-a0ad-e90416c22846"><code class="python">from bootwrap import Text, Panel
 
-comp1 = Text("Component 1").add_classes("border")
-comp2 = Text("Component 2").add_classes("border")
-comp3 = Text("Component 3").add_classes("border")
+comp1 = Text("Component 1").as_outline()
+comp2 = Text("Component 2").as_outline()
+comp3 = Text("Component 3").as_outline()
 
 Panel(comp1, comp2, comp3).horizontal()
 </code></pre>
-       </div>
-       <div class="ms-3" id="3ee0c90e-4833-4edd-8788-d90a0ab683ec">
-        <div id="7ed23cdb-2486-4412-a09b-3f02a8cf02b9">
-         <div class="row">
-          <div class="col-md">
-           <span class="border" id="cf8e70ef-e149-45c7-bf23-fa6b08bd19d0">
-            Component 1
-           </span>
           </div>
-          <div class="col-md">
-           <span class="border" id="22ec645d-b1bd-4275-b45d-870bbca6869a">
-            Component 2
-           </span>
-          </div>
-          <div class="col-md">
-           <span class="border" id="e59afffd-cfb4-4165-b10e-8dad7c2be387">
-            Component 3
-           </span>
+          <div class="ms-3" id="cf7c813c-3212-47ca-b4ae-c7f6d34e45dc">
+           <div id="cb9eab06-1fe5-4a7a-aa06-125dfb7faed2">
+            <div class="row">
+             <div class="col-md">
+              <span class="border" id="e48fddc7-2046-4523-a2e7-f92a68f3a3b3">
+               Component 1
+              </span>
+             </div>
+             <div class="col-md">
+              <span class="border" id="4cb4d4a8-3504-46cf-9552-b9194e1ec4ed">
+               Component 2
+              </span>
+             </div>
+             <div class="col-md">
+              <span class="border" id="18c8437f-872e-4070-82b0-0373047f2fca">
+               Component 3
+              </span>
+             </div>
+            </div>
+           </div>
           </div>
          </div>
-        </div>
-       </div>
-      </div>
-      <div class="mt-5" id="482120f8-b4fc-4e68-a460-d17600c9d432">
-       <div class="d-flex justify-content-between" id="94491616-dc3f-4ba5-80f4-df145a79b5e0">
-        <h4 id="975d4f7c-95d1-4a3d-82f4-48fec8313a56">
-         Method
-         <span class="text-primary" id="840f5c02-f938-4bf4-b17a-7b9eed4c02bb">
-          justify_content
-         </span>
-        </h4>
-        <div id="8d659f5e-3e9c-44b4-9272-485f7302896b">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#45e4f94d-aae9-420e-ab35-2c0d803bbcd5" data-bs-toggle="collapse" id="fc268441-d4d2-452f-adf5-2473553d2a02" onclick="return false;" type="button">
-          Argument
-         </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#e607c985-33dc-49ba-b95d-ff2e6046dce6" data-bs-toggle="collapse" id="27e0df89-f79b-4347-b502-f30f29e6a296" onclick="return false;" type="button">
-          Returns
-         </button>
-        </div>
-       </div>
-       <span class="text-muted" id="e6bee104-cca1-40c1-a6a7-78b48d594cec">
-        Justifies panel content.
-       </span>
-       <pre id="ae15f8d0-930b-423d-972f-ca000881e397"><code class="python">justify_content(style)</code></pre>
-       <div class="ms-3 collapse" id="45e4f94d-aae9-420e-ab35-2c0d803bbcd5">
-        <h6 id="a880567e-e491-4cbc-a35e-a64c7377bed9">
-         <strong>
-          Arguments
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="2aaf85b3-bf84-411b-ad66-5860ef83261c">
-         <thead>
-          <tr>
-           <th scope="col">
-            Name
-           </th>
-           <th scope="col">
-            Type
-           </th>
-           <th scope="col">
-            Description
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td scope="row">
-            <i style="white-space: nowrap">
-             style
-            </i>
-           </td>
-           <td>
-            <code style="white-space: nowrap">
-             str
-            </code>
-           </td>
-           <td>
-            The style for justifying content can be one of "start",
+         <div class="mt-5" id="e479bbe8-6986-4944-b1ef-12ed742b94d7">
+          <div class="d-flex justify-content-between" id="18179bfa-e7a2-4335-9864-abe2112a8be8">
+           <h4 id="ed18e9ad-f6c9-4180-82d6-69e736108705">
+            Method
+            <span class="text-primary" id="180e8dd0-2cd6-45fa-95a1-64d3e8eb1717">
+             justify_content
+            </span>
+           </h4>
+           <div id="37369655-6fa5-4574-b075-773f6a8dc1be">
+            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#320f93d4-fa61-4cdb-a156-a633b644ceff" data-bs-toggle="collapse" id="7802233c-bd64-42a8-9f70-5f8911515fbe" onclick="return false;" type="button">
+             Argument
+            </button>
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#7af73abb-8e22-4536-b227-71bbcd7b79ee" data-bs-toggle="collapse" id="d7ddb1ef-c269-4cdb-8ae6-349ba8162d54" onclick="return false;" type="button">
+             Returns
+            </button>
+           </div>
+          </div>
+          <span class="text-muted" id="49e9f99d-624c-4861-b0b4-8f5163ec10f8">
+           Justifies panel content.
+          </span>
+          <pre id="ec1c4e1b-7c87-4f76-b297-3e687d8b7d2d"><code class="python">justify_content(style)</code></pre>
+          <div class="ms-3 collapse" id="320f93d4-fa61-4cdb-a156-a633b644ceff">
+           <h6 id="86797cab-70a5-4edf-b15a-43b432dcd87e">
+            Arguments
+           </h6>
+           <table class="table table-sm bg-light" id="6ce3b69d-7f0e-4425-8826-72fb9d94d8ac">
+            <thead>
+             <tr>
+              <th scope="col">
+               Name
+              </th>
+              <th scope="col">
+               Type
+              </th>
+              <th scope="col">
+               Description
+              </th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+              <td scope="row">
+               <i style="white-space: nowrap">
+                style
+               </i>
+              </td>
+              <td>
+               <code style="white-space: nowrap">
+                str
+               </code>
+              </td>
+              <td>
+               The style for justifying content can be one of "start",
                 "end", "center", "between", "around", "evenly".
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-       <div class="ms-3 collapse" id="e607c985-33dc-49ba-b95d-ff2e6046dce6">
-        <h6 id="bfea9cb3-c022-45d4-a4da-8aeb44e7b555">
-         <strong>
-          Returns
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="02532dff-995f-4458-bab4-dbe3a88c51c3">
-         <thead>
-          <tr>
-           <th scope="col">
-            Name
-           </th>
-           <th scope="col">
-            Type
-           </th>
-           <th scope="col">
-            Description
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td scope="row">
-            <i style="white-space: nowrap">
-             obj
-            </i>
-           </td>
-           <td>
-            <code style="white-space: nowrap">
-             self
-            </code>
-           </td>
-           <td>
-            The instance of this class.
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-       <div class="ms-3" id="530bac80-5a57-47d0-976e-20bfaac5965a">
-        <h6 id="03d613ed-7ed2-4bde-b51e-8fb76b684bda">
-         <strong>
-          Example
-         </strong>
-        </h6>
-        <pre id="bf804cfe-7329-4e50-aab3-2f470782a083"><code class="python">from bootwrap import Text, Panel
+              </td>
+             </tr>
+            </tbody>
+           </table>
+          </div>
+          <div class="ms-3 collapse" id="7af73abb-8e22-4536-b227-71bbcd7b79ee">
+           <h6 id="c3c70447-a825-4e14-90f8-f5dad70f458a">
+            Returns
+           </h6>
+           <table class="table table-sm bg-light" id="3d35527f-721e-464e-b803-a9d713cd458a">
+            <thead>
+             <tr>
+              <th scope="col">
+               Name
+              </th>
+              <th scope="col">
+               Type
+              </th>
+              <th scope="col">
+               Description
+              </th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+              <td scope="row">
+               <i style="white-space: nowrap">
+                obj
+               </i>
+              </td>
+              <td>
+               <code style="white-space: nowrap">
+                self
+               </code>
+              </td>
+              <td>
+               The instance of this class.
+              </td>
+             </tr>
+            </tbody>
+           </table>
+          </div>
+          <div class="ms-3" id="aa6f6893-7acc-430c-8ae7-f5ec4511199b">
+           <h6 id="72a83ecb-3ca4-42f3-830a-1e0d0cd7e0f6">
+            Example
+           </h6>
+           <pre id="5c90d4b2-180d-4d7c-b6b7-70d40aef0f8d"><code class="python">from bootwrap import Text, Panel
 
-comp1 = Text("Component 1").as_light().add_classes("border").p(2).m(2)
-comp2 = Text("Component 2").as_light().add_classes("border").p(2).m(2)
-comp3 = Text("Component 3").as_light().add_classes("border").p(2).m(2)
+comp1 = Text("Component 1").as_light().as_outline().p(2).m(2)
+comp2 = Text("Component 2").as_light().as_outline().p(2).m(2)
+comp3 = Text("Component 3").as_light().as_outline().p(2).m(2)
 
-pnl_start = Panel(comp1, comp2, comp3).background("dark").justify_content("start").mt(1)
-pnl_end = Panel(comp1, comp2, comp3).background("dark").justify_content("end").mt(1)
-pnl_center = Panel(comp1, comp2, comp3).background("dark").justify_content("center").mt(1)
-pnl_between = Panel(comp1, comp2, comp3).background("dark").justify_content("between").mt(1)
-pnl_around = Panel(comp1, comp2, comp3).background("dark").justify_content("around").mt(1)
-pnl_evenly = Panel(comp1, comp2, comp3).background("dark").justify_content("evenly").mt(1)
+pnl_start = Panel(comp1, comp2, comp3).as_dark().justify_content("start").mt(1)
+pnl_end = Panel(comp1, comp2, comp3).as_dark().justify_content("end").mt(1)
+pnl_center = Panel(comp1, comp2, comp3).as_dark().justify_content("center").mt(1)
+pnl_between = Panel(comp1, comp2, comp3).as_dark().justify_content("between").mt(1)
+pnl_around = Panel(comp1, comp2, comp3).as_dark().justify_content("around").mt(1)
+pnl_evenly = Panel(comp1, comp2, comp3).as_dark().justify_content("evenly").mt(1)
 
 Panel(
     pnl_start,
@@ -7636,196 +7277,419 @@ Panel(
     pnl_evenly
 ).vertical()
 </code></pre>
-       </div>
-       <div class="ms-3" id="c62de92f-e101-4cc6-afc6-5c83fec6883e">
-        <div id="a5bd1cb8-ff01-4943-ab61-23ad43b957b8">
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex justify-content-start mt-1" id="96274f22-76e5-4b32-9c10-ffe2f5cbcd9e">
-            <span class="text-light border p-2 m-2" id="a938a9c3-277e-45ad-a2f3-19fc04e5d50d">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="0ea595c7-7587-4b24-8cbf-d691bd89874d">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="c9ff6c80-5db6-4994-87eb-eddd12f30dbd">
-             Component 3
-            </span>
-           </div>
-          </div>
-         </div>
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex justify-content-end mt-1" id="330ccaf2-d9aa-4017-89bd-58681ca1ff42">
-            <span class="text-light border p-2 m-2" id="a938a9c3-277e-45ad-a2f3-19fc04e5d50d">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="0ea595c7-7587-4b24-8cbf-d691bd89874d">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="c9ff6c80-5db6-4994-87eb-eddd12f30dbd">
-             Component 3
-            </span>
-           </div>
-          </div>
-         </div>
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex justify-content-center mt-1" id="b46e0bef-e6f5-4122-abc4-55ca05b7d678">
-            <span class="text-light border p-2 m-2" id="a938a9c3-277e-45ad-a2f3-19fc04e5d50d">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="0ea595c7-7587-4b24-8cbf-d691bd89874d">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="c9ff6c80-5db6-4994-87eb-eddd12f30dbd">
-             Component 3
-            </span>
-           </div>
-          </div>
-         </div>
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex justify-content-between mt-1" id="9cf942f8-a9b7-4988-866a-b28d185af687">
-            <span class="text-light border p-2 m-2" id="a938a9c3-277e-45ad-a2f3-19fc04e5d50d">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="0ea595c7-7587-4b24-8cbf-d691bd89874d">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="c9ff6c80-5db6-4994-87eb-eddd12f30dbd">
-             Component 3
-            </span>
-           </div>
           </div>
-         </div>
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex justify-content-around mt-1" id="3a62fe4c-2609-4545-8ba4-8ab3bd57ad33">
-            <span class="text-light border p-2 m-2" id="a938a9c3-277e-45ad-a2f3-19fc04e5d50d">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="0ea595c7-7587-4b24-8cbf-d691bd89874d">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="c9ff6c80-5db6-4994-87eb-eddd12f30dbd">
-             Component 3
-            </span>
+          <div class="ms-3" id="345ffe64-c7f6-4ae2-aedf-c6caf15e2322">
+           <div id="fa019b62-5169-441b-9f85-1d44e65e4994">
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex justify-content-start mt-1 bg-dark" id="2ce5e9d5-813b-475d-8bec-d0d79afd9a21">
+               <span class="p-2 m-2 text-light border border-light" id="4196523d-91ea-4564-9aca-e935d88f6a8c">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="e5ff8ebc-b7c9-4687-aad2-eb53f079adf4">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="741efe3c-c01d-4c2a-b90c-9ceaa90f9bd0">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex justify-content-end mt-1 bg-dark" id="53fe2816-2e06-4fe7-963e-1e2348ed6c6c">
+               <span class="p-2 m-2 text-light border border-light" id="4196523d-91ea-4564-9aca-e935d88f6a8c">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="e5ff8ebc-b7c9-4687-aad2-eb53f079adf4">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="741efe3c-c01d-4c2a-b90c-9ceaa90f9bd0">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex justify-content-center mt-1 bg-dark" id="007ffc13-9429-445c-b1ff-a4db122cd206">
+               <span class="p-2 m-2 text-light border border-light" id="4196523d-91ea-4564-9aca-e935d88f6a8c">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="e5ff8ebc-b7c9-4687-aad2-eb53f079adf4">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="741efe3c-c01d-4c2a-b90c-9ceaa90f9bd0">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex justify-content-between mt-1 bg-dark" id="8564ec63-de2b-4cde-9c26-df39130cd32f">
+               <span class="p-2 m-2 text-light border border-light" id="4196523d-91ea-4564-9aca-e935d88f6a8c">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="e5ff8ebc-b7c9-4687-aad2-eb53f079adf4">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="741efe3c-c01d-4c2a-b90c-9ceaa90f9bd0">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex justify-content-around mt-1 bg-dark" id="eeb786d2-1aee-42ad-8230-98f3d5b082d7">
+               <span class="p-2 m-2 text-light border border-light" id="4196523d-91ea-4564-9aca-e935d88f6a8c">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="e5ff8ebc-b7c9-4687-aad2-eb53f079adf4">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="741efe3c-c01d-4c2a-b90c-9ceaa90f9bd0">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <div class="d-flex justify-content-evenly mt-1 bg-dark" id="431e18b9-ed74-487e-9edc-f4be752e8b8f">
+               <span class="p-2 m-2 text-light border border-light" id="4196523d-91ea-4564-9aca-e935d88f6a8c">
+                Component 1
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="e5ff8ebc-b7c9-4687-aad2-eb53f079adf4">
+                Component 2
+               </span>
+               <span class="p-2 m-2 text-light border border-light" id="741efe3c-c01d-4c2a-b90c-9ceaa90f9bd0">
+                Component 3
+               </span>
+              </div>
+             </div>
+            </div>
            </div>
           </div>
          </div>
-         <div class="row">
-          <div class="col-md">
-           <div class="bg-dark d-flex justify-content-evenly mt-1" id="68ba439d-8ac1-4c27-be4d-5a1bba6fd6ef">
-            <span class="text-light border p-2 m-2" id="a938a9c3-277e-45ad-a2f3-19fc04e5d50d">
-             Component 1
-            </span>
-            <span class="text-light border p-2 m-2" id="0ea595c7-7587-4b24-8cbf-d691bd89874d">
-             Component 2
-            </span>
-            <span class="text-light border p-2 m-2" id="c9ff6c80-5db6-4994-87eb-eddd12f30dbd">
-             Component 3
+         <div class="mt-5" id="f1f4df59-d8b5-4300-83af-b5ab6c24c68b">
+          <div class="d-flex justify-content-between" id="d1fcfcb7-db76-41f5-adc8-795e0956797f">
+           <h4 id="438efe59-69e9-422f-9cc9-d05e1f21fcdb">
+            Method
+            <span class="text-primary" id="9b9949c4-aa52-4976-9a03-fbbb64b74d62">
+             vertical
             </span>
+           </h4>
+           <div id="3f5fb159-f807-434e-b83d-dd1bcad14584">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#19abe32c-bbb5-42f2-83d7-75728e8b4758" data-bs-toggle="collapse" id="35de88f6-91bd-408b-be72-0dab617cedc6" onclick="return false;" type="button">
+             Returns
+            </button>
            </div>
           </div>
-         </div>
-        </div>
-       </div>
-      </div>
-      <div class="mt-5" id="38f0812d-e260-41cd-8c4b-d585aa4b3c02">
-       <div class="d-flex justify-content-between" id="bf9ac782-d611-459e-b204-065218ec0011">
-        <h4 id="518e016f-0bc1-4ced-a0e5-eb29ca54d51c">
-         Method
-         <span class="text-primary" id="965813f5-1a63-449f-aace-edd0491bc8c8">
-          vertical
-         </span>
-        </h4>
-        <div id="906858aa-a5da-46fd-bee2-9b1fc289fe43">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#255ebc86-01d9-4d10-a900-3c6fdd024dc9" data-bs-toggle="collapse" id="9e33dca3-32e0-42ce-aaf0-b7fc2a48eabe" onclick="return false;" type="button">
-          Returns
-         </button>
-        </div>
-       </div>
-       <span class="text-muted" id="93b17aa8-3660-4d16-90a5-be4fe8af2728">
-        Makes the panel with the vertical arrangement of encapsulating
+          <span class="text-muted" id="2c65ae21-13ba-48be-b25d-9c844b5bfe7f">
+           Makes the panel with the vertical arrangement of encapsulating
         elements
-       </span>
-       <pre id="8d46a1ba-3898-4e3e-a15b-4f32be05bdb3"><code class="python">vertical()</code></pre>
-       <div class="ms-3 collapse" id="255ebc86-01d9-4d10-a900-3c6fdd024dc9">
-        <h6 id="76a3c60d-82b2-444a-9775-f4429ab1bc72">
-         <strong>
-          Returns
-         </strong>
-        </h6>
-        <table class="table table-sm bg-light" id="37a8bdc2-1a11-4cd4-a57d-2eaebd3d3044">
-         <thead>
-          <tr>
-           <th scope="col">
-            Name
-           </th>
-           <th scope="col">
-            Type
-           </th>
-           <th scope="col">
-            Description
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          <tr>
-           <td scope="row">
-            <i style="white-space: nowrap">
-             obj
-            </i>
-           </td>
-           <td>
-            <code style="white-space: nowrap">
-             self
-            </code>
-           </td>
-           <td>
-            The instance of this class.
-           </td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-       <div class="ms-3" id="7074f12d-1b79-465a-b8f9-449307e2b971">
-        <h6 id="f2ff43af-0eb0-4f99-9acb-5a77cade9922">
-         <strong>
-          Example
-         </strong>
-        </h6>
-        <pre id="d0d1b7fd-5337-4cc8-9e67-99e3198a8e19"><code class="python">from bootwrap import Text, Panel
+          </span>
+          <pre id="39883a91-e592-468c-9e37-df11e4575103"><code class="python">vertical()</code></pre>
+          <div class="ms-3 collapse" id="19abe32c-bbb5-42f2-83d7-75728e8b4758">
+           <h6 id="b553f26a-2775-4be8-ac2f-025b1857f241">
+            Returns
+           </h6>
+           <table class="table table-sm bg-light" id="8c6be830-a043-4569-a6f0-e6e17b5243bc">
+            <thead>
+             <tr>
+              <th scope="col">
+               Name
+              </th>
+              <th scope="col">
+               Type
+              </th>
+              <th scope="col">
+               Description
+              </th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+              <td scope="row">
+               <i style="white-space: nowrap">
+                obj
+               </i>
+              </td>
+              <td>
+               <code style="white-space: nowrap">
+                self
+               </code>
+              </td>
+              <td>
+               The instance of this class.
+              </td>
+             </tr>
+            </tbody>
+           </table>
+          </div>
+          <div class="ms-3" id="5229b5c0-4c67-4647-a5b5-e11b8ae99a79">
+           <h6 id="888a7c7d-6c39-4742-8496-237f19c3849b">
+            Example
+           </h6>
+           <pre id="6e369617-89c3-4ac7-9df4-1815398344f3"><code class="python">from bootwrap import Text, Panel
 
-comp1 = Text("Component 1").add_classes("border")
-comp2 = Text("Component 2").add_classes("border")
-comp3 = Text("Component 3").add_classes("border")
+comp1 = Text("Component 1").as_outline()
+comp2 = Text("Component 2").as_outline()
+comp3 = Text("Component 3").as_outline()
 
 Panel(comp1, comp2, comp3).vertical()
 </code></pre>
+          </div>
+          <div class="ms-3" id="4bf6b8b9-4e2f-48de-881a-a58bc67cb682">
+           <div id="b4bfc4e7-0050-44f5-9bf1-446459d91b19">
+            <div class="row">
+             <div class="col-md">
+              <span class="border" id="425db529-0b5f-482c-9522-fe1e13eebcfb">
+               Component 1
+              </span>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <span class="border" id="8044d2e9-f8a4-43dd-b838-e6fe12975ded">
+               Component 2
+              </span>
+             </div>
+            </div>
+            <div class="row">
+             <div class="col-md">
+              <span class="border" id="92f0b1ef-99b8-47e9-b72b-9fc83c08046f">
+               Component 3
+              </span>
+             </div>
+            </div>
+           </div>
+          </div>
+         </div>
+        </div>
        </div>
-       <div class="ms-3" id="7a3073d9-e495-49f2-8f73-c79955077191">
-        <div id="56643f84-d4f5-48b1-878c-0032ae94c65b">
-         <div class="row">
-          <div class="col-md">
-           <span class="border" id="d3e40e75-b343-4f30-8ef4-6729038cc0a6">
-            Component 1
-           </span>
+       <div class="tab-pane fade" id="a18699a9-d927-4a91-899f-4d96ef64f45a">
+        <div class="mt-3" id="98cd144b-4d11-4903-8bea-596e9c809222">
+         <div id="5aa4ce19-f819-43f3-b449-4d449bd8e8ad">
+          <div class="row">
+           <div class="col-md">
+            <div id="83fb9c8c-548c-4b40-b1ae-97793c5971d4">
+             <h1 id="47c0ceff-89cd-4575-8dc4-ed0dfba837d3">
+              Appearance
+             </h1>
+            </div>
+           </div>
+           <div class="col-md">
+            <div id="5f456de5-1981-4433-844d-31202c8671f2">
+            </div>
+           </div>
           </div>
          </div>
-         <div class="row">
-          <div class="col-md">
-           <span class="border" id="7fc387e6-a44e-42a8-b04f-60a41cd74898">
-            Component 2
-           </span>
+         <div id="4abdfbf9-b7db-44d2-924c-a08d55f99cbf">
+          <div class="row">
+           <div class="col-md">
+            <div id="6e1b1625-e4d0-428b-ba06-fe881c3f58d2">
+             <p id="f9e3ba3b-d96e-4573-b25d-e7347ab71066">
+              Change
+              <code>
+               Panel
+              </code>
+              appearance using the following functions
+              <code>
+               as_primary()
+              </code>
+              ,
+              <code>
+               as_secondary()
+              </code>
+              ,
+              <code>
+               as_success()
+              </code>
+              ,
+              <code>
+               as_warning()
+              </code>
+              ,
+              <code>
+               as_danger()
+              </code>
+              ,
+              <code>
+               as_info()
+              </code>
+              ,
+              <code>
+               as_light()
+              </code>
+              , and
+              <code>
+               as_dark()
+              </code>
+              .
+             </p>
+            </div>
+           </div>
+           <div class="col-md">
+            <div id="576552e7-1e24-48ce-9acb-7501e349064a">
+             <pre id="cda4499a-39b9-42ed-9c7e-c497d209fb92"><code class="python">from bootwrap import Panel, Text
+panel = Panel(
+  Panel(Text("Primary")).as_primary(),
+  Panel(Text("Secondary")).as_secondary(),
+  Panel(Text("Success")).as_success(),
+  Panel(Text("Warning")).as_warning(),
+  Panel(Text("Danger")).as_danger(),
+  Panel(Text("Info")).as_info(),
+  Panel(Text("Light")).as_light(),
+  Panel(Text("Dark").as_light()).as_dark()
+)
+for anchor in panel:
+  anchor.mb(1)
+panel</code></pre>
+             <div id="0c35990b-381a-4bd7-bdf2-19b6dff4b564">
+              <div class="mb-1 bg-primary" id="b61c8853-7359-4426-8ed4-f0c3b6a97398">
+               <span id="424a481e-9ea6-4ebc-ac07-b23ddad7b252">
+                Primary
+               </span>
+              </div>
+              <div class="mb-1 bg-secondary" id="ceae885f-ade4-49ca-ba33-2c8e107407f9">
+               <span id="c8446abc-23ab-4f0c-8f18-1a19316ed467">
+                Secondary
+               </span>
+              </div>
+              <div class="mb-1 bg-success" id="ce8ad3c4-5dbf-40de-b4c2-5d76107fe417">
+               <span id="6974c19d-ab20-4dba-aea4-b6bfd1f76253">
+                Success
+               </span>
+              </div>
+              <div class="mb-1 bg-warning" id="1c0778a3-a27d-4d6f-9fd0-2611e8d94e9b">
+               <span id="22876156-3531-4995-8a02-d7cc537c725b">
+                Warning
+               </span>
+              </div>
+              <div class="mb-1 bg-danger" id="1bbaed3e-7dd1-43f8-a86a-75f790b33520">
+               <span id="dcaa3654-4740-4012-af8c-5f148e71ec11">
+                Danger
+               </span>
+              </div>
+              <div class="mb-1 bg-info" id="85dde7b5-9b0b-4c0f-b50d-fde4bdab06d3">
+               <span id="5feeaa47-087f-4d1a-8a44-6b70b2932f5a">
+                Info
+               </span>
+              </div>
+              <div class="mb-1 bg-light" id="a66de537-4b32-4471-a960-cde3f1db17b8">
+               <span id="ac2525ca-c1e9-4ad7-af12-1eaeccb24121">
+                Light
+               </span>
+              </div>
+              <div class="mb-1 bg-dark" id="b7daa934-592d-4435-97ef-38004e42e98e">
+               <span class="text-light" id="30995b16-f852-47e6-b85f-4763ee05623f">
+                Dark
+               </span>
+              </div>
+             </div>
+            </div>
+           </div>
           </div>
          </div>
-         <div class="row">
-          <div class="col-md">
-           <span class="border" id="0e35bc06-cce6-41b9-abf5-ed053d372a8f">
-            Component 3
-           </span>
+        </div>
+       </div>
+       <div class="tab-pane fade" id="1227c5b2-be77-4108-9ebc-bb84f9d87c09">
+        <div class="mt-3" id="2a09fc95-2a1e-49f9-a594-d2d2d2171013">
+         <div id="4a648b9a-4cd9-4e3a-af49-c21b35813b00">
+          <div class="row">
+           <div class="col-md">
+            <div id="cc4e2cd9-0842-4f3c-b1d2-206cd558c7e4">
+             <h1 id="e129925a-7b6f-48ef-a17c-d5bc5325e3bb">
+              Outline
+             </h1>
+            </div>
+           </div>
+           <div class="col-md">
+            <div id="6a3b3109-cb33-4d1b-b8fc-11f7567ea7ca">
+            </div>
+           </div>
+          </div>
+         </div>
+         <div id="69fcb433-e99e-4773-b37a-2f4c063f2890">
+          <div class="row">
+           <div class="col-md">
+            <div id="f8493beb-4e06-4874-92e6-5e8294fa7507">
+             <p id="e00be096-ed7d-4f38-904d-6780cd19ffef">
+              Make
+              <code>
+               Panel
+              </code>
+              without filling with surrounded by color border using the following function
+              <code>
+               as_outline()
+              </code>
+              .
+             </p>
+            </div>
+           </div>
+           <div class="col-md">
+            <div id="8858b556-1b15-4b50-8e1f-5493f652d251">
+             <pre id="31555e3f-0ff2-4e9d-ade4-2533dd5f9912"><code class="python">from bootwrap import Panel, Text
+panel = Panel(
+  Panel(Text("Primary").as_primary()).as_primary().as_outline(),
+  Panel(Text("Secondary").as_secondary()).as_secondary().as_outline(),
+  Panel(Text("Success").as_success()).as_success().as_outline(),
+  Panel(Text("Warning").as_warning()).as_warning().as_outline(),
+  Panel(Text("Danger").as_danger()).as_danger().as_outline(),
+  Panel(Text("Info").as_info()).as_info().as_outline(),
+  Panel(Text("Light").as_light()).as_light().as_outline(),
+  Panel(Text("Dark").as_dark()).as_dark().as_outline()
+)
+for anchor in panel:
+  anchor.mb(1)
+panel</code></pre>
+             <div id="7b3e745b-22df-46f9-bd79-2d6afd5acbdb">
+              <div class="mb-1 border border-primary" id="e20f0257-92fc-4295-8e01-85c722f02d2b">
+               <span class="text-primary" id="06770504-424e-44df-9532-a5a554a9f51e">
+                Primary
+               </span>
+              </div>
+              <div class="mb-1 border border-secondary" id="b414fec8-c298-44f7-9d7f-6e5837c1615d">
+               <span class="text-secondary" id="9f248a00-2dc2-49a1-b0e2-72a11946a9ae">
+                Secondary
+               </span>
+              </div>
+              <div class="mb-1 border border-success" id="796ca536-b6ea-4df8-8c91-45a06612f575">
+               <span class="text-success" id="d65de24b-24a3-46ea-a4df-0b0d3f16acf1">
+                Success
+               </span>
+              </div>
+              <div class="mb-1 border border-warning" id="07e4e461-dafe-41eb-bada-369bbe4b1187">
+               <span class="text-warning" id="7e3a7050-7e88-4663-a4dc-f58ede0f9659">
+                Warning
+               </span>
+              </div>
+              <div class="mb-1 border border-danger" id="d07bbb23-dd08-4b2e-8630-ef4326368a72">
+               <span class="text-danger" id="2f41394a-5883-4d32-8312-982d2734f9ef">
+                Danger
+               </span>
+              </div>
+              <div class="mb-1 border border-info" id="c267aad8-d982-460a-84c8-ec5fb5be3adf">
+               <span class="text-info" id="78f60d7b-958d-4b0d-8647-92a4261f09d4">
+                Info
+               </span>
+              </div>
+              <div class="mb-1 border border-light" id="19192b5a-8e23-4c60-bbaa-6d2002e58120">
+               <span class="text-light" id="39810afe-179b-4f34-aab9-75fa533a1c99">
+                Light
+               </span>
+              </div>
+              <div class="mb-1 border border-dark" id="c8c9f2e3-0d75-425d-833d-97a04967fc66">
+               <span class="text-dark" id="f063142d-d68b-42a7-843a-6d221d72c664">
+                Dark
+               </span>
+              </div>
+             </div>
+            </div>
+           </div>
           </div>
          </div>
         </div>
@@ -7833,29 +7697,27 @@ Panel(comp1, comp2, comp3).vertical()
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="65cac881-efc1-4709-90c3-a2769a47c69a">
-     <div class="mt-5" id="9b43b928-a92e-4155-9bd8-93a0aa5430af">
-      <div class="d-flex justify-content-between" id="8fc8a11e-5c5d-4ff1-aa3c-448c6631138c">
-       <h1 id="11da88cd-0537-4a2d-84bb-32a054853e0a">
+    <div class="tab-pane fade" id="79186759-c895-4504-a58e-f8dc4ba3f2b7">
+     <div class="mt-5" id="1d281231-452f-4d3b-8c54-0928740e1ac5">
+      <div class="d-flex justify-content-between" id="ade67a78-2206-4655-b54e-cc8b5e3102c9">
+       <h1 id="48196eef-30bb-4eb4-bf64-660f072575ab">
         Class
-        <span class="text-primary" id="536a8c52-828a-4310-8d8d-9839f419fb47">
+        <span class="text-primary" id="1cab0424-bf6d-4171-8f10-36f7815c63e6">
          Separator
         </span>
        </h1>
-       <div id="30ad8d92-3c86-4506-b531-e640ddd3f043">
+       <div id="400dc701-89c7-4436-9e21-e428a7f5353d">
        </div>
       </div>
-      <span class="text-muted" id="43124e55-9fbb-4f74-b230-1da3142883ab">
+      <span class="text-muted" id="9374754d-c470-49d6-805f-b49c60aafde1">
        A horizontal line separator.
       </span>
-      <pre id="57220bfe-dbaf-4b08-b698-e1f23009b0f9"><code class="python">Separator()</code></pre>
-      <div class="ms-3" id="3d82eaa9-8505-483b-baf7-f301ae22b96c">
-       <h6 id="d2f0b158-37dc-4396-8f6b-24d65c9a2bb0">
-        <strong>
-         Example
-        </strong>
+      <pre id="6d260950-f053-4ddf-a7cc-0e37cf8ac78f"><code class="python">Separator()</code></pre>
+      <div class="ms-3" id="0ad2825e-ff77-44e4-8335-b396b26c88c7">
+       <h6 id="05fff253-507f-4f2e-97db-8c48683b08cb">
+        Example
        </h6>
-       <pre id="b9af1f18-a66a-4fd4-ad35-03275aa435b5"><code class="python">from bootwrap import Panel, Separator, Text
+       <pre id="c3e3efb5-2e6b-4b9b-9362-148ddcbef36c"><code class="python">from bootwrap import Panel, Separator, Text
 
 Panel(
     Text("Top Text"),
@@ -7864,72 +7726,70 @@ Panel(
 )
 </code></pre>
       </div>
-      <div class="ms-3" id="f62cb1c2-2cda-4981-a8f5-226232c790bb">
-       <div id="9cbdfa00-238f-49fa-9819-2f8d88beee2c">
-        <span id="5f048de9-2415-42be-b00d-e0e5b7976d83">
+      <div class="ms-3" id="3f2fdcb6-3ed5-4794-a4d4-bad7227110b7">
+       <div id="e7bff558-386a-4289-83a0-a15d3efa4c04">
+        <span id="0e020d1f-9a71-4939-84f0-dac272a7630c">
          Top Text
         </span>
         <hr/>
-        <span id="9a9edd27-be44-4ef9-8f74-1a509b587137">
+        <span id="04fa9931-a8a9-4926-a4a7-c89330d7f5ac">
          Bottom Text
         </span>
        </div>
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="5b0c1454-fc12-42e1-bfc1-4ba204dcfd2c">
-     <div id="8b4981a9-4a9f-48b4-83d6-3b4ef3d6923d">
+    <div class="tab-pane fade" id="98b35cce-7512-41bd-8e8a-1ffbb124a863">
+     <div id="9a71b10f-7e53-44b3-988b-64448ac716ae">
       <hr/>
-      <ul class="nav" id="df907af8-2a3b-450c-9398-ce2493ee2138" role="tablist">
+      <ul class="nav" id="dd9f782c-bd73-45d8-baa6-95d323326383" role="tablist">
        <li class="nav-item">
-        <a class="nav-link active" data-bs-target="#be81a86a-3219-4a2b-b83b-f6bce25c28a8" data-bs-toggle="tab" href="#be81a86a-3219-4a2b-b83b-f6bce25c28a8" id="9423fe15-df3d-41a4-8e53-3baf6008dbd1" role="tab">
-         <span class="text-secondary" id="aaec4178-56ba-4eed-9563-03f0fc4bc8c3">
+        <a class="nav-link active" data-bs-target="#b66e51f3-bc54-4064-bc79-a2ea0b273ff8" data-bs-toggle="tab" href="#b66e51f3-bc54-4064-bc79-a2ea0b273ff8" id="d3e0617c-1f98-441a-9e85-3914266be692" role="tab">
+         <span class="text-secondary" id="5bc412a7-c542-44a7-8b07-faa5794408a6">
           Table
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#1ab2e0f7-7d66-4ba1-9e02-457e8c04ee39" data-bs-toggle="tab" href="#1ab2e0f7-7d66-4ba1-9e02-457e8c04ee39" id="8ce5319b-45e9-4139-8519-8ac87723b464" role="tab">
-         <span class="text-secondary" id="2e96a1e7-d8ba-4d0e-9f00-0cf572af361b">
+        <a class="nav-link" data-bs-target="#94b07880-0c89-4409-a989-6f08fe54f70b" data-bs-toggle="tab" href="#94b07880-0c89-4409-a989-6f08fe54f70b" id="8ba22d3f-b066-4fdb-94ca-5027b44ae361" role="tab">
+         <span class="text-secondary" id="27f64a7b-0cb3-4a0b-a6b9-3ca533e105bb">
           Table.Head
          </span>
         </a>
        </li>
        <li class="nav-item">
-        <a class="nav-link" data-bs-target="#c0a7baab-f43f-4897-bacd-0d1dc390ce4b" data-bs-toggle="tab" href="#c0a7baab-f43f-4897-bacd-0d1dc390ce4b" id="ad2431b6-af1e-43fe-a635-736897752d84" role="tab">
-         <span class="text-secondary" id="c19b1ca8-1a10-4212-8c68-0e87fe9ef9a7">
+        <a class="nav-link" data-bs-target="#bf5ac23f-4118-4766-bb18-3415d36a5df1" data-bs-toggle="tab" href="#bf5ac23f-4118-4766-bb18-3415d36a5df1" id="9a811b13-4e65-4346-952c-c1f92953f8fa" role="tab">
+         <span class="text-secondary" id="9dad6d48-d018-4632-bbaf-8f1185c80e75">
           Table.Body
          </span>
         </a>
        </li>
       </ul>
       <div class="tab-content">
-       <div class="tab-pane fade active show" id="be81a86a-3219-4a2b-b83b-f6bce25c28a8">
-        <div class="mt-5" id="5468d4cb-f986-42f8-8e2d-7a480e6e6e87">
-         <div class="d-flex justify-content-between" id="94846232-e676-4f60-a2de-ae94f9b17a79">
-          <h1 id="4bc72bab-d248-4d46-adf4-0ee4d434881d">
+       <div class="tab-pane fade active show" id="b66e51f3-bc54-4064-bc79-a2ea0b273ff8">
+        <div class="mt-5" id="89968d6d-ed47-4168-b332-30fd61e5ac8f">
+         <div class="d-flex justify-content-between" id="680c50cf-e77a-4786-ae04-f72672848b50">
+          <h1 id="ebd62824-f938-4d5a-a387-8624b542662e">
            Class
-           <span class="text-primary" id="59fb8867-5f21-49e4-9447-58b8c9678d2c">
+           <span class="text-primary" id="3a17924a-b57c-40db-a28a-443e9366a395">
             Table
            </span>
           </h1>
-          <div id="78e51e2d-e106-4f25-b56a-2d734771368f">
-           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#f84c786f-451d-4421-89a8-2264dbaca733" data-bs-toggle="collapse" id="0ce845a8-885f-4312-8756-9a4c1987a001" onclick="return false;" type="button">
+          <div id="12dae936-962b-4521-9b5d-fd4f7512eb0c">
+           <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#7d32305e-da3e-4662-95b9-03b5b180e58c" data-bs-toggle="collapse" id="c1f86748-fd02-4d24-8889-4f3b9f23ad41" onclick="return false;" type="button">
             Argument
            </button>
           </div>
          </div>
-         <span class="text-muted" id="cf83a5c8-aac5-4f4b-a6fd-3d97e99d876a">
+         <span class="text-muted" id="15715c10-cc35-46b7-a3ac-881a41e57905">
           A web component for a table.
          </span>
-         <pre id="ed7f2661-d549-410f-aadb-4f54256b6d77"><code class="python">Table(head, body)</code></pre>
-         <div class="ms-3 collapse" id="f84c786f-451d-4421-89a8-2264dbaca733">
-          <h6 id="bb406333-c80c-42de-8b63-358cd2238a46">
-           <strong>
-            Arguments
-           </strong>
+         <pre id="f29dc5e6-0a41-457b-bd93-052968b66ee1"><code class="python">Table(head, body)</code></pre>
+         <div class="ms-3 collapse" id="7d32305e-da3e-4662-95b9-03b5b180e58c">
+          <h6 id="efac54cc-5071-435f-b867-7455c8546fc0">
+           Arguments
           </h6>
-          <table class="table table-sm bg-light" id="ef2d1c2b-36f3-4b57-a772-feb2cdbb9e7d">
+          <table class="table table-sm bg-light" id="19b18974-c690-49e6-916c-b29b6522322d">
            <thead>
             <tr>
              <th scope="col">
@@ -7977,13 +7837,11 @@ Panel(
            </tbody>
           </table>
          </div>
-         <div class="ms-3" id="9beeea49-87cd-4769-9417-68ee216804fb">
-          <h6 id="3fe6d11d-aa75-4d43-b789-32a854bb76fa">
-           <strong>
-            Example
-           </strong>
+         <div class="ms-3" id="e01e232f-04a5-43bd-940a-0d9bfd0a14b9">
+          <h6 id="3c4a4b06-a970-4ba0-8d33-1e3b5c10a9db">
+           Example
           </h6>
-          <pre id="6f9b8b7d-0269-4bb9-a4e9-669a6f12f886"><code class="python">from bootwrap import Table
+          <pre id="a60dab04-17c6-4337-8462-24309477fde6"><code class="python">from bootwrap import Table
 
 Table(
     ["Column 1", "Column 2", "Column 3"],
@@ -7995,8 +7853,8 @@ Table(
 )
 </code></pre>
          </div>
-         <div class="ms-3" id="f0754ed9-3ab9-4129-9510-0db9562bf664">
-          <table class="table" id="74f1bdee-1608-4df3-a17e-63cce36edada">
+         <div class="ms-3" id="acf703c4-d819-4f6d-8461-7b3fdd94e3c4">
+          <table class="table" id="e7ebb057-6c1c-46d9-87c1-81eed97be595">
            <thead>
             <tr>
              <th scope="col">
@@ -8047,53 +7905,51 @@ Table(
            </tbody>
           </table>
          </div>
-         <div class="mt-5" id="b1e081b9-aaa4-4d94-9a5e-c861227ed67a">
-          <h4 id="34a3c6b9-ed85-432d-bade-fb38f131b1c8">
+         <div class="mt-5" id="88342bd2-57dd-41fc-8330-b17aba27594c">
+          <h4 id="9f6aa67c-660e-48a5-9baa-93987cede09b">
            Property
-           <span class="text-primary" id="1bd790e7-9fc2-4b53-8119-432825bb7b78">
+           <span class="text-primary" id="391b9fe0-1cd8-4441-a41e-19f3970cc84b">
             body
            </span>
           </h4>
-          <span class="text-muted" id="4eb28b6b-2159-43d6-8e45-3d6f32b1fd98">
+          <span class="text-muted" id="bc70bc37-4f22-4844-9594-33d8cd45eba9">
            The table body.
           </span>
          </div>
-         <div class="mt-5" id="2f5e82c2-1f36-42ea-930f-69e3ecc1d1ca">
-          <h4 id="4d16acd6-709d-46d8-8174-786e3572c4de">
+         <div class="mt-5" id="8b924e9a-6b86-42af-beb8-1d2e83d7a5cb">
+          <h4 id="7b5f8e29-1838-449b-aa41-7ec65272c21a">
            Property
-           <span class="text-primary" id="0b472112-b69c-4b7a-a60f-53d8a5e09fcd">
+           <span class="text-primary" id="2252711e-f479-4396-aded-f2126c16ca14">
             head
            </span>
           </h4>
-          <span class="text-muted" id="89de532b-2144-4365-bd9f-2577e68a4326">
+          <span class="text-muted" id="d0abc6bb-ae98-4099-9468-102ed06000b7">
            The table head.
           </span>
          </div>
-         <div class="mt-5" id="189345b6-9fb9-43c3-8104-45ae882b53f4">
-          <div class="d-flex justify-content-between" id="b5d9058f-9364-4388-b012-de12e89f9c0c">
-           <h4 id="41617892-0964-470d-b65d-f8b228525ba9">
+         <div class="mt-5" id="37c17e35-c5b8-42be-8be7-f27867867361">
+          <div class="d-flex justify-content-between" id="150dae97-4ca6-4be3-af93-be29e7cceb1d">
+           <h4 id="b6a25935-cf19-42e3-81d8-a496bd9a4b64">
             Method
-            <span class="text-primary" id="725eb56b-0959-48fa-871b-f5031b046e71">
+            <span class="text-primary" id="570b4462-48fc-4e4a-a46c-b810bed6df15">
              as_bordered
             </span>
            </h4>
-           <div id="e4e06542-856b-4fd8-bf14-688a94c8a591">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#884c53b5-11a3-42bb-98f9-af612da9cfee" data-bs-toggle="collapse" id="de08f855-40cc-4890-a525-19b1f68e9ce2" onclick="return false;" type="button">
+           <div id="92eac09f-0c8b-44c6-b2a5-339db979c019">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#bf948f4c-25ee-4d89-8c37-a8db07ab3f95" data-bs-toggle="collapse" id="6259b458-46da-408a-982a-336ba7546e7d" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="6147ce6d-267c-41dc-804a-73f2b6a311d5">
+          <span class="text-muted" id="a176f6b4-aa62-42fd-a1d9-6db1c2bece34">
            Adds borders on all sides of the table and cells.
           </span>
-          <pre id="caae4a30-dce8-4fc3-bd15-80e24d3b0970"><code class="python">as_bordered()</code></pre>
-          <div class="ms-3 collapse" id="884c53b5-11a3-42bb-98f9-af612da9cfee">
-           <h6 id="42363620-d0de-423a-a098-dfc8ba77b9f7">
-            <strong>
-             Returns
-            </strong>
+          <pre id="e16bdefc-d5ed-4b9e-add7-63511d84a99b"><code class="python">as_bordered()</code></pre>
+          <div class="ms-3 collapse" id="bf948f4c-25ee-4d89-8c37-a8db07ab3f95">
+           <h6 id="a01308e6-704e-4f0d-84d8-77f3b9e3cff6">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="e631ae2c-ac91-4343-b305-221f6cc72093">
+           <table class="table table-sm bg-light" id="2f0ce058-1917-43a2-8fd4-eadac851cb67">
             <thead>
              <tr>
               <th scope="col">
@@ -8126,13 +7982,11 @@ Table(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="135121a4-cbd1-47a1-9d20-29af4f9de9b4">
-           <h6 id="ec2f981d-58ff-48c4-8088-bcfce7b89cac">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="ac28ba3c-0bdc-4b22-844a-b5112a4b85ee">
+           <h6 id="76ea2e06-86b2-4d09-9622-24b69a3cfdd2">
+            Example
            </h6>
-           <pre id="901af152-460a-49ff-a0fb-f617f693ec31"><code class="python">from bootwrap import Table
+           <pre id="a723aa3e-317e-4198-a3c0-67649b8286b2"><code class="python">from bootwrap import Table
 
 Table(
     ["Column 1", "Column 2", "Column 3"],
@@ -8144,8 +7998,8 @@ Table(
 ).as_bordered()
 </code></pre>
           </div>
-          <div class="ms-3" id="28c808fd-6158-418b-a8e4-65737d8d3d06">
-           <table class="table table-bordered" id="a8048e37-0a6b-4b3d-8fe9-49b02d8d215d">
+          <div class="ms-3" id="9c4418ce-d4fd-4a55-a0f5-66b08fb77a14">
+           <table class="table table-bordered" id="b8245fbe-5c44-4a81-9f7a-362c8c63d4d2">
             <thead>
              <tr>
               <th scope="col">
@@ -8197,31 +8051,29 @@ Table(
            </table>
           </div>
          </div>
-         <div class="mt-5" id="de070b95-0728-4c22-bd6e-e933796f1529">
-          <div class="d-flex justify-content-between" id="2634bbf2-b815-4a3f-a334-6018364a6082">
-           <h4 id="61d030b8-0fa8-4ac5-a87c-957630b12934">
+         <div class="mt-5" id="195d3fce-4217-45e2-aa20-5c263028bdc3">
+          <div class="d-flex justify-content-between" id="3d9dc3b8-2513-474c-a63c-d2b6e0bf5d6b">
+           <h4 id="a3c59892-462e-4cab-89df-6f3d61f8e5c1">
             Method
-            <span class="text-primary" id="b55df8f6-a566-47e4-ad3a-cac4811bca12">
+            <span class="text-primary" id="9470a67d-e940-4a9c-8166-eebb6f12f7b5">
              as_dark
             </span>
            </h4>
-           <div id="968536be-1354-4732-bf9e-f0c93383de43">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#acb520a3-32df-4a2c-a69d-1e2d7fbbf6f7" data-bs-toggle="collapse" id="c1c5894f-cda1-4be1-8d7e-d95098942e4c" onclick="return false;" type="button">
+           <div id="5deb6a4f-7147-47c5-959f-9edb5fd6ae30">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#e53ee576-ec78-4455-897c-7b8da4d818a8" data-bs-toggle="collapse" id="d16cb174-0664-4413-833f-3e436ade2d81" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="b992f803-78d8-4ac1-9763-4e4d6734cbd8">
+          <span class="text-muted" id="75317955-9b55-4b0e-a856-661e40c066dc">
            Inverts the colors—with light text on dark backgrounds.
           </span>
-          <pre id="33bf4833-8504-4b13-8849-ace3d8d31ba5"><code class="python">as_dark()</code></pre>
-          <div class="ms-3 collapse" id="acb520a3-32df-4a2c-a69d-1e2d7fbbf6f7">
-           <h6 id="970be870-8682-473e-9a20-1edb19e2e1f9">
-            <strong>
-             Returns
-            </strong>
+          <pre id="6c989d6b-f171-4b71-bb4f-24cde4fd55ab"><code class="python">as_dark()</code></pre>
+          <div class="ms-3 collapse" id="e53ee576-ec78-4455-897c-7b8da4d818a8">
+           <h6 id="711d80ab-790f-4a48-8725-55ac697ffd4f">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="396e0771-a085-4f28-aba0-2b41b186eb66">
+           <table class="table table-sm bg-light" id="6a6e34d0-224c-4300-803e-e12a02941d82">
             <thead>
              <tr>
               <th scope="col">
@@ -8254,13 +8106,11 @@ Table(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="efe7cf0a-2c90-475a-beb0-aacbc17fcaf3">
-           <h6 id="f7815516-6eb8-4deb-b4c3-e3eebba212dc">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="276b8b3e-5fa5-43c6-9ef6-8cc4d0b15158">
+           <h6 id="25f29ae8-06b5-4975-8496-9748c6346e57">
+            Example
            </h6>
-           <pre id="f9cc6626-1846-4f9f-98ae-0888f7ef3ac0"><code class="python">from bootwrap import Table
+           <pre id="726398cb-eb22-47de-9299-74b63e742ffe"><code class="python">from bootwrap import Table
 
 Table(
     ["Column 1", "Column 2", "Column 3"],
@@ -8272,8 +8122,8 @@ Table(
 ).as_dark()
 </code></pre>
           </div>
-          <div class="ms-3" id="659e32a6-e123-4ab5-ae45-deb0b2866419">
-           <table class="table table-dark" id="f16a3a7f-da45-452c-b5c9-5a87398d032b">
+          <div class="ms-3" id="faf60fec-0c6b-4c27-8fe3-2b09ecd683b7">
+           <table class="table table-dark" id="487e1799-171f-42b6-9df5-94ae2c629ab5">
             <thead>
              <tr>
               <th scope="col">
@@ -8325,34 +8175,32 @@ Table(
            </table>
           </div>
          </div>
-         <div class="mt-5" id="c2b6e1e3-63f5-4ae2-aa25-b4848ab53c93">
-          <div class="d-flex justify-content-between" id="98b6eda9-f832-467d-b833-2c163e000e1b">
-           <h4 id="d1af6a91-c8a1-499d-97c4-8e1fe7e23f55">
+         <div class="mt-5" id="099f9494-ed9a-4fe8-8871-759690ef5887">
+          <div class="d-flex justify-content-between" id="f41a2460-d4e6-4b7b-bbfc-a8a90e6afb5c">
+           <h4 id="2728de9a-691b-4330-979b-882406c8e850">
             Method
-            <span class="text-primary" id="b5b5a3bb-08ed-4233-b951-4a84d7df49ca">
+            <span class="text-primary" id="49e1e957-bf1d-41b7-b6ef-32c49a1c1c40">
              as_responsive
             </span>
            </h4>
-           <div id="08add0a8-c16b-4cc6-8adb-1f741311ab90">
-            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#71124b96-1e9e-4a40-84d5-821bc6c33b67" data-bs-toggle="collapse" id="1d136dff-a2cb-46c1-9feb-0857773c4b0c" onclick="return false;" type="button">
+           <div id="92f2916a-5d6d-4932-b4b6-a78228be65dd">
+            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#79a50b1e-209d-4709-a8fc-99151c2ca3d9" data-bs-toggle="collapse" id="081dd74c-6bb8-4680-b193-4616a1a2f49b" onclick="return false;" type="button">
              Argument
             </button>
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#6cf94089-55eb-4fe9-99a1-ebbfde2ccd94" data-bs-toggle="collapse" id="a7beabf3-2b2d-49a3-b108-a274324b839f" onclick="return false;" type="button">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#a427dccf-13fb-4e20-a8d7-e12f3849d5f3" data-bs-toggle="collapse" id="d82ce5eb-a6fe-4076-badd-2d3e6ccee546" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="be4012a9-8b5b-4453-ac5f-547af55e0c2d">
+          <span class="text-muted" id="860170b3-6283-449b-8795-4b3306616a56">
            Create responsive tables.
           </span>
-          <pre id="69e37c1c-97ba-477b-956b-06c8ea157056"><code class="python">as_responsive(breakpoint=<breakpoint.sm: 'sm'="">)</breakpoint.sm:></code></pre>
-          <div class="ms-3 collapse" id="71124b96-1e9e-4a40-84d5-821bc6c33b67">
-           <h6 id="cfda7912-c804-4953-8307-dadbe178e756">
-            <strong>
-             Arguments
-            </strong>
+          <pre id="69da3d0a-5064-4d89-ac61-89b5658301ae"><code class="python">as_responsive(breakpoint=<breakpoint.sm: 'sm'="">)</breakpoint.sm:></code></pre>
+          <div class="ms-3 collapse" id="79a50b1e-209d-4709-a8fc-99151c2ca3d9">
+           <h6 id="ed4f3145-2a40-495b-9bc6-1031325f992a">
+            Arguments
            </h6>
-           <table class="table table-sm bg-light" id="d547159e-703b-4de7-bd57-2838c79b749f">
+           <table class="table table-sm bg-light" id="48a90e28-37d1-4a09-8555-5053afb738cb">
             <thead>
              <tr>
               <th scope="col">
@@ -8385,13 +8233,11 @@ Table(
             </tbody>
            </table>
           </div>
-          <div class="ms-3 collapse" id="6cf94089-55eb-4fe9-99a1-ebbfde2ccd94">
-           <h6 id="cf101fe8-d429-48a0-aeb3-56a1935fb41e">
-            <strong>
-             Returns
-            </strong>
+          <div class="ms-3 collapse" id="a427dccf-13fb-4e20-a8d7-e12f3849d5f3">
+           <h6 id="3aeab905-ed1d-43ec-9152-552f69cd89ba">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="a2da6c8b-ce99-4116-9b16-aa5f185d699f">
+           <table class="table table-sm bg-light" id="a9dddc06-defe-474a-8e34-2f6733629ac5">
             <thead>
              <tr>
               <th scope="col">
@@ -8424,13 +8270,11 @@ Table(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="a20dd7bc-436c-4f83-b3ba-14e2b8fa97d6">
-           <h6 id="60c22dde-1c37-437e-a279-ec245d02836a">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="b85d485b-f28b-4c5d-9943-8ce549f571d3">
+           <h6 id="eb48f04e-ceb5-4765-9dae-e4f672bd2a47">
+            Example
            </h6>
-           <pre id="e9e8c6b2-891f-4125-9fdb-2813c3165b11"><code class="python">from bootwrap import Table
+           <pre id="49a4c088-6630-4c82-afcc-cdbd31f7a494"><code class="python">from bootwrap import Table
 
 Table(
     ["Column 1", "Column 2", "Column 3"],
@@ -8442,8 +8286,8 @@ Table(
 ).as_responsive()
 </code></pre>
           </div>
-          <div class="ms-3" id="68cf0745-533d-42b9-9c57-935ea16a75fa">
-           <table class="table table-responsive-sm" id="35d80062-fdc5-498b-9c09-14e7ff1cf736">
+          <div class="ms-3" id="86d4c381-5e05-4016-905e-6643cb7128d5">
+           <table class="table table-responsive-sm" id="f7bbc982-513c-4e2d-bf99-29d13e2ea5ca">
             <thead>
              <tr>
               <th scope="col">
@@ -8495,31 +8339,29 @@ Table(
            </table>
           </div>
          </div>
-         <div class="mt-5" id="89c704d0-e366-4ee9-a69d-207a06e89044">
-          <div class="d-flex justify-content-between" id="06047210-ad20-4c09-aee9-2f0d642f54de">
-           <h4 id="c60f3927-ccc4-4a49-b7e6-58815c0cab12">
+         <div class="mt-5" id="ca766e1c-1a5d-45ae-bc56-824a7229cbaa">
+          <div class="d-flex justify-content-between" id="328e2adc-dac9-467d-8b28-636c0efc12f9">
+           <h4 id="003a9744-0129-4118-ba1b-cb341be21d90">
             Method
-            <span class="text-primary" id="f4056d14-accb-45ec-a4dd-719f3bd353bc">
+            <span class="text-primary" id="a26e5061-612b-417e-a73c-e9c03051f35b">
              as_small
             </span>
            </h4>
-           <div id="851dd339-557a-4e8c-bc23-48bff4a58f5b">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#246b5595-85a7-4dd4-9846-dc52a6a6edbf" data-bs-toggle="collapse" id="044563b2-47b6-474d-bf15-116bcb5a4f2b" onclick="return false;" type="button">
+           <div id="ff66b164-6cb4-4d22-93fa-6a9beff98f00">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#c744ee6f-e204-4253-bab0-7d61be1a64a0" data-bs-toggle="collapse" id="dea8ec55-d46e-4e4d-8d2d-4ee92eb15461" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="d2d4e486-2641-4a1f-95d0-68d00978d6c6">
+          <span class="text-muted" id="ebe1bbe7-8469-43d3-8ece-c55bc9420945">
            Make tables more compact by cutting cell padding in half.
           </span>
-          <pre id="7d1e255e-e01a-482f-98a1-f1ca2c9020b2"><code class="python">as_small()</code></pre>
-          <div class="ms-3 collapse" id="246b5595-85a7-4dd4-9846-dc52a6a6edbf">
-           <h6 id="a4efa943-97f4-470f-9c87-9fa523304ae2">
-            <strong>
-             Returns
-            </strong>
+          <pre id="d3962eb3-ddcc-4b53-9c12-8fc42b798251"><code class="python">as_small()</code></pre>
+          <div class="ms-3 collapse" id="c744ee6f-e204-4253-bab0-7d61be1a64a0">
+           <h6 id="8bbda9f4-31a7-4483-9846-38392c0dbdf5">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="bedf05fc-8250-418c-a6bc-de1e931cb1ef">
+           <table class="table table-sm bg-light" id="2c2ecaf7-0ef6-482c-8f2f-8fd22e3b5dc8">
             <thead>
              <tr>
               <th scope="col">
@@ -8552,13 +8394,11 @@ Table(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="68cfe96e-ae14-4bb6-a2b3-bbb3545e80c9">
-           <h6 id="bf066b5f-3615-488d-ab7e-4c4bbe10fd14">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="7311dcb6-be8d-40ce-a452-0ace50bca47b">
+           <h6 id="74a35777-518e-4680-93cf-846876a3c1de">
+            Example
            </h6>
-           <pre id="25d70887-e87c-4a6a-bbae-18743406b1c9"><code class="python">from bootwrap import Table
+           <pre id="84e003fb-62bc-4cca-a809-c967673296ea"><code class="python">from bootwrap import Table
 
 Table(
     ["Column 1", "Column 2", "Column 3"],
@@ -8570,8 +8410,8 @@ Table(
 ).as_small()
 </code></pre>
           </div>
-          <div class="ms-3" id="3e26ae0d-e8f3-4835-ab30-68d2737b449e">
-           <table class="table table-sm" id="44fcd42d-e460-4286-99ee-54036f9c9643">
+          <div class="ms-3" id="4f1dfe46-8dd6-417a-a973-3631e2996ee3">
+           <table class="table table-sm" id="d6b0783b-3c55-4a3e-a188-dc9b55b01e35">
             <thead>
              <tr>
               <th scope="col">
@@ -8623,31 +8463,29 @@ Table(
            </table>
           </div>
          </div>
-         <div class="mt-5" id="93f337d6-4f03-4df3-ae17-6042e3e2a9de">
-          <div class="d-flex justify-content-between" id="1512d186-33c9-4a8e-b446-50886405992f">
-           <h4 id="a44086f1-60bf-42e6-8455-f81064d80e64">
+         <div class="mt-5" id="2de22ef9-8ee9-47ac-a600-5cb2b335ce6b">
+          <div class="d-flex justify-content-between" id="6ce675ab-f8d0-4d25-bae3-f5385ff21c28">
+           <h4 id="57ac930f-4e2b-4ac0-a196-bd35f93ace76">
             Method
-            <span class="text-primary" id="dbbdba16-2f08-4703-b182-45fe4a829977">
+            <span class="text-primary" id="63f175b5-1386-4bf0-a897-c6aeb178b587">
              as_striped
             </span>
            </h4>
-           <div id="4db5fd7d-4a37-4f68-8823-b67eccc5d2ae">
-            <button class="btn-sm btn btn-outline-primary" data-bs-target="#795780df-922d-4d02-94ee-f16076e1d652" data-bs-toggle="collapse" id="f7ad6859-a092-4fe2-b440-fae4178a0692" onclick="return false;" type="button">
+           <div id="4a4e1ef5-1316-47b8-a8a1-b522b5ade97f">
+            <button class="btn-sm btn btn-outline-primary" data-bs-target="#6558bb08-65bf-4f88-a693-70a3b02ecfc4" data-bs-toggle="collapse" id="a135d78e-8402-44f5-8f58-8a8cc2fb870b" onclick="return false;" type="button">
              Returns
             </button>
            </div>
           </div>
-          <span class="text-muted" id="06521793-0361-4884-a36c-903df80ea7c2">
+          <span class="text-muted" id="1b6e48ba-090b-49a3-ad9c-c55a1ca74aba">
            Adds zebra-striping to any table row within the table body.
           </span>
-          <pre id="812f2b25-a78e-4f06-86a8-e1053aed704f"><code class="python">as_striped()</code></pre>
-          <div class="ms-3 collapse" id="795780df-922d-4d02-94ee-f16076e1d652">
-           <h6 id="bb5c25e2-1249-48eb-af00-462f650fa262">
-            <strong>
-             Returns
-            </strong>
+          <pre id="8c20a7ef-3a4b-4b70-bfb9-4bcac7e0273d"><code class="python">as_striped()</code></pre>
+          <div class="ms-3 collapse" id="6558bb08-65bf-4f88-a693-70a3b02ecfc4">
+           <h6 id="43e00c2b-73e4-4a8b-b956-88ebaf5169a4">
+            Returns
            </h6>
-           <table class="table table-sm bg-light" id="c50ee676-0019-4cda-9e29-23819f24eed6">
+           <table class="table table-sm bg-light" id="60f850b0-6012-4c1e-ba59-05c1793804d2">
             <thead>
              <tr>
               <th scope="col">
@@ -8680,13 +8518,11 @@ Table(
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="9b5e9d61-6fee-41d4-b389-36026354b430">
-           <h6 id="b1231b9a-3da0-4dcc-99fe-0a60144b0a0b">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="5f09a8ea-fefb-40fa-a6ff-4861ae11edea">
+           <h6 id="d45eeb60-496f-45f0-bea5-2f5652e8b448">
+            Example
            </h6>
-           <pre id="810a1193-0e20-44b8-8d53-1ab24d608b05"><code class="python">from bootwrap import Table
+           <pre id="74e90bed-549a-46cd-a34f-3449777e9a78"><code class="python">from bootwrap import Table
 
 Table(
     ["Column 1", "Column 2", "Column 3"],
@@ -8698,8 +8534,8 @@ Table(
 ).as_striped()
 </code></pre>
           </div>
-          <div class="ms-3" id="586f3f6e-eebb-4bab-8b0c-185d73b0b56b">
-           <table class="table table-striped" id="b8754253-8985-4d27-967b-7ea30831091f">
+          <div class="ms-3" id="dfda7f4a-d284-4cbc-b2a1-1efd3c27845c">
+           <table class="table table-striped" id="db2072ed-8d1d-4660-843d-3b19fe9f3faa">
             <thead>
              <tr>
               <th scope="col">
@@ -8753,44 +8589,42 @@ Table(
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="1ab2e0f7-7d66-4ba1-9e02-457e8c04ee39">
-        <div class="mt-5" id="1324450d-c347-40da-ae14-6f72affa9754">
-         <div class="d-flex justify-content-between" id="67f4eee7-aae5-476a-a16b-a0173f805b37">
-          <h1 id="49608b44-f357-4625-be12-7793512ae4cc">
+       <div class="tab-pane fade" id="94b07880-0c89-4409-a989-6f08fe54f70b">
+        <div class="mt-5" id="87b56878-9c82-4eae-b4cd-f8e18986cf22">
+         <div class="d-flex justify-content-between" id="e33f3685-a819-49ba-ab02-ceffdd510524">
+          <h1 id="04c58ec1-842f-4b5f-95db-20ac50b7cb28">
            Class
-           <span class="text-primary" id="026a2b8c-505d-42d8-859c-e7a6cee63643">
+           <span class="text-primary" id="c3fe08b0-1ff9-42b3-8c12-0227fa9ef40a">
             Table.Head
            </span>
           </h1>
-          <div id="53058d7e-47a7-42ee-8fd1-4eb601bad159">
+          <div id="c03859e6-ba97-468c-b4a4-9ac63a42e43a">
           </div>
          </div>
-         <span class="text-muted" id="e56d2436-f5ee-4eff-95e5-aec241a7bb36">
+         <span class="text-muted" id="848fc2b2-9c47-4a9d-bbf5-66c8d199d77b">
           The table head.
          </span>
-         <pre id="09a55a2a-5352-4a19-857d-712563681cc8"><code class="python">Table.Head(head)</code></pre>
-         <div class="mt-5" id="1581998b-49e7-4330-8aa0-21f5b9534a94">
-          <div class="d-flex justify-content-between" id="73d1f4e5-0560-4fdf-8ab0-746fdde2cd6d">
-           <h4 id="933f7f58-fc7c-4a6f-8cea-ea7afd2bfe0c">
+         <pre id="84d0c0ef-bac2-4863-81d9-081752385d94"><code class="python">Table.Head(head)</code></pre>
+         <div class="mt-5" id="9bbd0353-56ee-43ae-82a5-1ceedde86238">
+          <div class="d-flex justify-content-between" id="f6804de6-7be9-404b-8c95-6f1b42758a1a">
+           <h4 id="3ba2cebe-f4a1-48c7-b3d4-835e01bf5b1a">
             Method
-            <span class="text-primary" id="641c5e7d-43c4-4631-b117-230c0bbd5f05">
+            <span class="text-primary" id="5b00d94f-b764-46f0-a7c6-f743f548008e">
              as_dark
             </span>
            </h4>
-           <div id="3d2f5500-f975-46c8-805f-c76c5730ef84">
+           <div id="bb9a0c2c-0efd-4d22-8376-ebc8c613110d">
            </div>
           </div>
-          <span class="text-muted" id="bacdb5ae-18cc-49b6-bbeb-a56baaae47b3">
+          <span class="text-muted" id="0aebcc04-ae0e-477c-a99e-f625cef02a76">
            Makes the table head appears as dark gray.
           </span>
-          <pre id="3ce3df78-8a83-4ad5-a5df-212c5d6418ea"><code class="python">as_dark()</code></pre>
-          <div class="ms-3" id="1d43edab-05f3-4a8a-a263-18d98e0b7c9a">
-           <h6 id="4cd9b0b1-e684-4540-98ae-fcbab90e3732">
-            <strong>
-             Example
-            </strong>
+          <pre id="a9252557-95bf-40d1-a753-b812c603ffde"><code class="python">as_dark()</code></pre>
+          <div class="ms-3" id="36045915-e942-4d21-8e72-c48cd7846f4d">
+           <h6 id="4afeeb81-2028-481b-8f72-edd1dadd5d30">
+            Example
            </h6>
-           <pre id="6c5ba5ee-3e03-4c65-8b58-f65aed605234"><code class="python">from bootwrap import Table
+           <pre id="93f3f40d-c704-4164-886e-25d63f867cd5"><code class="python">from bootwrap import Table
 
 table = Table(
     ["Column 1", "Column 2", "Column 3"],
@@ -8805,8 +8639,8 @@ table.head.as_dark()
 table
 </code></pre>
           </div>
-          <div class="ms-3" id="25bd540f-0189-4703-8144-3adb5b710fb0">
-           <table class="table" id="73a5d2fd-985d-494c-a3dc-ea21926437b9">
+          <div class="ms-3" id="61397f5c-397c-436c-a080-104a16477184">
+           <table class="table" id="3fd35837-6b4d-4a8f-bb4f-ceeb457f6a28">
             <thead class="thead-dark">
              <tr>
               <th scope="col">
@@ -8858,28 +8692,26 @@ table
            </table>
           </div>
          </div>
-         <div class="mt-5" id="473f4d12-a7bd-45e3-b6a8-09a0c1756253">
-          <div class="d-flex justify-content-between" id="92a99e80-9a3d-49cc-b8b8-1d555cca320e">
-           <h4 id="e0c66287-ae8b-4b01-b3a6-933d1cb5ef41">
+         <div class="mt-5" id="e6cd5051-fe65-4fc2-8bed-106cf640e423">
+          <div class="d-flex justify-content-between" id="e815b2ab-5ad4-4d89-8434-35b3570dacc6">
+           <h4 id="42e1d343-3155-4550-8378-8e7efdc25727">
             Method
-            <span class="text-primary" id="21c2e8f2-2f92-4315-a820-b45b47e2a887">
+            <span class="text-primary" id="bf1e6708-b71a-4792-91f9-3f1a9a0845e6">
              as_light
             </span>
            </h4>
-           <div id="7226f599-6402-45ab-8891-73d66a121f9f">
+           <div id="c1b9cfbd-86b9-4157-bf54-3c121cc85453">
            </div>
           </div>
-          <span class="text-muted" id="633e384a-a754-4dcd-a034-6cfa33d42280">
+          <span class="text-muted" id="adcf70a5-44bc-451e-acdf-585bd91c176e">
            Makes the table head appears as light gray.
           </span>
-          <pre id="41470dcb-88ed-4149-ace1-47aa0c89d7cc"><code class="python">as_light()</code></pre>
-          <div class="ms-3" id="0ce2b314-ce27-4684-8a69-3d9003f11172">
-           <h6 id="cfaf8a03-08e2-4a0c-a159-06c1c3189459">
-            <strong>
-             Example
-            </strong>
+          <pre id="f5aa9f0b-4e57-4f9b-92e0-82bd53779154"><code class="python">as_light()</code></pre>
+          <div class="ms-3" id="cbbff784-bcb6-4d23-ac44-e3de440880de">
+           <h6 id="32d17091-d9f3-400b-945d-f9997c380f03">
+            Example
            </h6>
-           <pre id="661d2bb7-a088-4c45-a547-5009481c9066"><code class="python">from bootwrap import Table
+           <pre id="0cd8b109-8ef5-47a9-ac5f-f2cedc299d3c"><code class="python">from bootwrap import Table
 
 table = Table(
     ["Column 1", "Column 2", "Column 3"],
@@ -8894,8 +8726,8 @@ table.head.as_light()
 table
 </code></pre>
           </div>
-          <div class="ms-3" id="f5c9cae4-83f1-42a6-8d8a-2c5c5e72ca00">
-           <table class="table" id="a7c985fc-f8fb-4766-90c7-1862c44170c5">
+          <div class="ms-3" id="b5262482-65bd-4e4c-bd22-1c75e6f31793">
+           <table class="table" id="1130a2d0-bdd5-40e4-8bd2-7de110cc3992">
             <thead class="thead-light">
              <tr>
               <th scope="col">
@@ -8949,47 +8781,45 @@ table
          </div>
         </div>
        </div>
-       <div class="tab-pane fade" id="c0a7baab-f43f-4897-bacd-0d1dc390ce4b">
-        <div class="mt-5" id="d6e1f31e-07be-4b03-99ee-cea27bc98e2a">
-         <div class="d-flex justify-content-between" id="535ac6ae-6d80-4981-bfdd-35d18e346f3d">
-          <h1 id="1d792ae5-41d2-4a45-b537-fe5ad3b290a4">
+       <div class="tab-pane fade" id="bf5ac23f-4118-4766-bb18-3415d36a5df1">
+        <div class="mt-5" id="f1ba4d9d-03a0-4187-9890-9b08ab6c6109">
+         <div class="d-flex justify-content-between" id="c748bb0e-3681-45cd-997c-b095e68e68eb">
+          <h1 id="2e294e1c-bfd6-419d-bcb3-1ae73483079c">
            Class
-           <span class="text-primary" id="797345af-07e5-4c88-a93e-6abedefffd68">
+           <span class="text-primary" id="9e43a7b1-166a-42a8-80cc-c4bf1f7cebb2">
             Table.Body
            </span>
           </h1>
-          <div id="0097350c-b534-456f-94f6-c257e8fcfa85">
+          <div id="769b5647-089d-4464-961d-a532e3c17baf">
           </div>
          </div>
-         <span class="text-muted" id="b8d17289-9e04-49e7-b78b-8980a3298ce4">
+         <span class="text-muted" id="5e87109f-96b5-4451-b9b6-9b13f036deae">
           The table body.
          </span>
-         <pre id="156e6f65-bd4d-49ed-afd0-03a4b1605592"><code class="python">Table.Body(body)</code></pre>
-         <div class="mt-5" id="13f4ff01-35ac-4543-94aa-e7afac0f65ee">
-          <div class="d-flex justify-content-between" id="b0a4b6a4-b343-433b-ac6f-0610806b82c4">
-           <h4 id="80129828-3a27-4719-8ad3-31176011fcca">
+         <pre id="faa7703b-3f5e-411f-874a-495db1c4124c"><code class="python">Table.Body(body)</code></pre>
+         <div class="mt-5" id="7dbfe271-67e4-4922-8325-f62f57702bff">
+          <div class="d-flex justify-content-between" id="1a9ed1b5-3ba7-4a59-bf7d-a99e0720b1c7">
+           <h4 id="d1257928-5ab3-4afa-aff2-d80d44314e93">
             Method
-            <span class="text-primary" id="f1dc9037-0560-441c-a2bd-62270101184b">
+            <span class="text-primary" id="77d63272-7397-4cfd-af74-0f1b30bb9e7c">
              transform
             </span>
            </h4>
-           <div id="f5f3ba91-f401-4b20-9109-47c55fdadb95">
-            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#9756fecd-f31a-4a57-853c-1a3585c4cc3e" data-bs-toggle="collapse" id="0bcf6402-e5a6-4dcd-9ce7-51d5495108b3" onclick="return false;" type="button">
+           <div id="51f040c3-9ce7-4b28-8a0c-2700e4cbf8aa">
+            <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#fe888cfa-cb82-48c9-b745-81d6a1e973ed" data-bs-toggle="collapse" id="8e116ba8-14df-4f31-b6c3-8f4003a47a5a" onclick="return false;" type="button">
              Argument
             </button>
            </div>
           </div>
-          <span class="text-muted" id="84273dfc-c278-4393-926c-f54dd33cb65a">
+          <span class="text-muted" id="fd0e3477-adaf-4acc-8a54-0a78b59d36c4">
            Defines a function to transform a cell value
           </span>
-          <pre id="7022f3a6-efc0-49b7-bfe6-079721109c39"><code class="python">transform(index, entity, fn)</code></pre>
-          <div class="ms-3 collapse" id="9756fecd-f31a-4a57-853c-1a3585c4cc3e">
-           <h6 id="3966a0df-76aa-4cb1-b235-2c1d3b63acf6">
-            <strong>
-             Arguments
-            </strong>
+          <pre id="a1023d54-d337-4b23-9738-ae159b771a05"><code class="python">transform(index, entity, fn)</code></pre>
+          <div class="ms-3 collapse" id="fe888cfa-cb82-48c9-b745-81d6a1e973ed">
+           <h6 id="6f4b58d0-a6b7-41c9-83b9-ccca6981c4a6">
+            Arguments
            </h6>
-           <table class="table table-sm bg-light" id="d9b221bf-96af-4153-ab3f-c54d21b344a0">
+           <table class="table table-sm bg-light" id="30fe4cd3-b87e-43fb-a4ce-7ed2bb332398">
             <thead>
              <tr>
               <th scope="col">
@@ -9054,13 +8884,11 @@ table
             </tbody>
            </table>
           </div>
-          <div class="ms-3" id="0854c66b-6db3-4e02-9788-00fd1ad74b55">
-           <h6 id="c930b986-430d-404a-8f39-abe454feeae4">
-            <strong>
-             Example
-            </strong>
+          <div class="ms-3" id="b1ec52d5-471f-4881-923f-8dd81f56c143">
+           <h6 id="beb9e91a-5462-4501-8128-f7717d50aa8d">
+            Example
            </h6>
-           <pre id="fa7cf72b-27f3-4c02-938f-b2c7a701813c"><code class="python">from bootwrap import Table, TableEntity, Text
+           <pre id="6442bdbe-14fd-4b29-aa74-b76a4610dbf0"><code class="python">from bootwrap import Table, TableEntity, Text
 
 table = Table(
     ["Column 1", "Column 2", "Column 3"],
@@ -9092,8 +8920,8 @@ table.body.transform(
 table
 </code></pre>
           </div>
-          <div class="ms-3" id="453071a0-f799-4298-a33e-f3eef4251bf7">
-           <table class="table" id="b7a838cf-0ff9-4515-8faf-696686f8af0f">
+          <div class="ms-3" id="d55ac673-0703-4a12-8824-e207ad4ac162">
+           <table class="table" id="e7c127c1-716c-4120-bd6b-655bdb8df971">
             <thead>
              <tr>
               <th scope="col">
@@ -9156,32 +8984,30 @@ table
       </div>
      </div>
     </div>
-    <div class="tab-pane fade" id="3a24f4de-aeb2-4516-b84c-ca02e3b3928b">
-     <div class="mt-5" id="7f026f6f-a329-4a8b-951e-0e8a819a4205">
-      <div class="d-flex justify-content-between" id="b242305a-4eb7-4d15-b808-5281a8de92ce">
-       <h1 id="8fe0d872-7efb-4bdf-9759-a9cb490ad516">
+    <div class="tab-pane fade" id="e7c64769-e8b1-42ef-ac82-f14c3bd3be46">
+     <div class="mt-5" id="c8a1e473-6d7e-4a20-9a30-3ce7c3675963">
+      <div class="d-flex justify-content-between" id="a1337c34-d9c6-4197-97d4-14d83cb05ade">
+       <h1 id="47d3240d-faec-4a4f-ab2a-457d23a12d44">
         Class
-        <span class="text-primary" id="7e02b97b-7748-4ab1-b9cc-bbb14722ce81">
+        <span class="text-primary" id="f0d3087c-9818-435e-bc32-ba3cbf8c7e0c">
          Text
         </span>
        </h1>
-       <div id="afd738f3-b296-438e-b80f-bb7c4cf0d913">
-        <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#9b1f2af5-ed77-48bb-837e-a19223e9203e" data-bs-toggle="collapse" id="c1a9bc04-7475-4955-8a6c-d932e1d718f7" onclick="return false;" type="button">
+       <div id="e1c64e8d-ed10-4ee9-88b4-7d5b574cd22b">
+        <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#9bf164bc-de0b-465a-a443-cf7ad5835585" data-bs-toggle="collapse" id="1a764f64-d175-40f2-8a14-a5ef90ff5696" onclick="return false;" type="button">
          Argument
         </button>
        </div>
       </div>
-      <span class="text-muted" id="ae412175-71cc-4dc3-90fb-8660aeb8cb44">
+      <span class="text-muted" id="f5871cb0-68f3-4804-8013-cc59e98f0ab0">
        A web component for a text.
       </span>
-      <pre id="448eb3da-1d82-465b-88d7-8be4f126902f"><code class="python">Text(content)</code></pre>
-      <div class="ms-3 collapse" id="9b1f2af5-ed77-48bb-837e-a19223e9203e">
-       <h6 id="5b29451d-08d2-4cfa-a3ee-6706c2a532f4">
-        <strong>
-         Arguments
-        </strong>
+      <pre id="86438c88-0151-4e88-a517-b1cfbf7e08af"><code class="python">Text(content)</code></pre>
+      <div class="ms-3 collapse" id="9bf164bc-de0b-465a-a443-cf7ad5835585">
+       <h6 id="c70f3ef5-cabc-41e8-a952-694d793f7513">
+        Arguments
        </h6>
-       <table class="table table-sm bg-light" id="9ae3738d-dfd5-41e0-a8cf-8eac5818a5b9">
+       <table class="table table-sm bg-light" id="5c7200dd-4169-48a4-9e97-9076831a8c5e">
         <thead>
          <tr>
           <th scope="col">
@@ -9214,47 +9040,80 @@ table
         </tbody>
        </table>
       </div>
-      <div class="ms-3" id="6ab2d2db-b663-412a-9220-894cb6e8fd7a">
-       <h6 id="3993fe82-468c-47d3-9194-b4e03b4a67e5">
-        <strong>
-         Example
-        </strong>
+      <div class="ms-3" id="07560610-8c13-4229-9ca7-97a81c658979">
+       <h6 id="5bfe6466-8a7c-4c9f-a416-e4d839f910d7">
+        Example
        </h6>
-       <pre id="70df5e3f-e81a-4536-aac4-452951692b3a"><code class="python">from bootwrap import Text
+       <pre id="e37ed21d-df62-45f2-86d4-223a1700cd28"><code class="python">from bootwrap import Text, Panel
 
-Text("Normal text")
+txt = Text("Text")
+txt_outline = Text("Text with border").as_outline()
+txt_primary = Text("Text of primary color").as_primary()
+txt_primary_outline = Text("Text of primary color with border").as_primary().as_outline()
+
+Panel(
+    txt,
+    txt_outline,
+    txt_primary,
+    txt_primary_outline
+).vertical()
 </code></pre>
       </div>
-      <div class="ms-3" id="25fca677-6cb9-4366-9505-bace27160deb">
-       <span id="617c37ae-b30c-485f-a010-a3942716d190">
-        Normal text
-       </span>
+      <div class="ms-3" id="4c0cf534-2683-491c-8ad1-5985bf7e2fb4">
+       <div id="72a887e7-7418-442b-8db5-5005905f6579">
+        <div class="row">
+         <div class="col-md">
+          <span id="eb480cb5-be9a-44dd-90b6-f12b7107f743">
+           Text
+          </span>
+         </div>
+        </div>
+        <div class="row">
+         <div class="col-md">
+          <span class="border" id="07e96204-b33f-43c5-b123-611de3aab034">
+           Text with border
+          </span>
+         </div>
+        </div>
+        <div class="row">
+         <div class="col-md">
+          <span class="text-primary" id="e5be4237-b244-43d4-8315-8e5acfb450b9">
+           Text of primary color
+          </span>
+         </div>
+        </div>
+        <div class="row">
+         <div class="col-md">
+          <span class="text-primary border border-primary" id="3431cde6-3794-4721-98dd-701159940fde">
+           Text of primary color with border
+          </span>
+         </div>
+        </div>
+       </div>
       </div>
-      <div class="mt-5" id="e4250192-bf24-4e94-8b53-7b25b6412d4b">
-       <div class="d-flex justify-content-between" id="339d9434-983a-49a9-abf4-192517427922">
-        <h4 id="3d072c48-348e-4ca3-a0b0-042854860542">
+      <div class="mt-5" id="6dbb4d8f-d5f1-4a7c-9a84-80dc66696e7f">
+       <div class="d-flex justify-content-between" id="390c05c4-3903-4689-b54d-20c41de891b5">
+        <h4 id="951b0542-28a0-43f8-8417-d7c4c5f09c27">
          Method
-         <span class="text-primary" id="1cc05d6c-569b-4f0f-83e5-e6f31045a97b">
+         <span class="text-primary" id="1449cbaa-c0e9-4fe6-9a0c-91ad6fa62056">
           as_code
          </span>
         </h4>
-        <div id="ae5f1e11-1b1e-4072-a35f-69e6d2523f9a">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#c042bfd4-f2e2-4147-a408-a322c2a8e157" data-bs-toggle="collapse" id="9df6b60d-7439-4dd8-9f38-739445162cdc" onclick="return false;" type="button">
+        <div id="0cfab3a5-ab24-40dd-b10c-2575839c141d">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#04f8935e-7218-44a6-9f65-beaaf3454f97" data-bs-toggle="collapse" id="6afd7aae-0193-4e54-ae39-810dbe9e9aee" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="52d1a595-9326-4b1e-b8d9-8fd40defae22">
+       <span class="text-muted" id="eaba84a9-35ca-46c9-a6c5-03a797a9fdfa">
         Makes the text wrap as a code snippet.
        </span>
-       <pre id="abeace24-a849-476f-a690-db68a69624b5"><code class="python">as_code()</code></pre>
-       <div class="ms-3 collapse" id="c042bfd4-f2e2-4147-a408-a322c2a8e157">
-        <h6 id="bbc8106d-4299-41bd-9be8-8620540d64b3">
-         <strong>
-          Returns
-         </strong>
+       <pre id="6755fa8c-1b0f-4094-b128-1e0481012985"><code class="python">as_code()</code></pre>
+       <div class="ms-3 collapse" id="04f8935e-7218-44a6-9f65-beaaf3454f97">
+        <h6 id="3ec6c233-069c-44ad-8b9f-6e34b36e8459">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="df5d2fab-4857-4df6-9a5e-217889ce6ffb">
+        <table class="table table-sm bg-light" id="7d046bfe-0701-4e8a-99f3-5df41b4e42cf">
          <thead>
           <tr>
            <th scope="col">
@@ -9287,49 +9146,45 @@ Text("Normal text")
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="51a3daae-5c74-4462-a203-fbc5e22fc79f">
-        <h6 id="1be870cd-018d-4366-a5ce-ba53f8c44842">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="d76d7346-51f4-456d-a868-e243eaa7d955">
+        <h6 id="6973f0f0-9cf3-4353-b2be-9f299bab71c2">
+         Example
         </h6>
-        <pre id="f89e17ef-dc5f-427e-93fa-73fa76ae9f99"><code class="python">from bootwrap import Panel, Text
+        <pre id="11283561-019e-435e-aa74-363d85e93693"><code class="python">from bootwrap import Panel, Text
 
 Text("print('Hello world!')").as_code()
 </code></pre>
        </div>
-       <div class="ms-3" id="0712d3fe-9cb5-4c11-930c-bd557ef9190d">
-        <pre id="2e13cf07-08ac-44a9-ac3b-bce68c42fb5a"><code class="python">print('Hello world!')</code></pre>
+       <div class="ms-3" id="1ca8bd1e-72ca-4abb-8fbc-dd269c5e9254">
+        <pre id="0a97629d-e7c5-44bf-ac72-2accdea6932b"><code class="python">print('Hello world!')</code></pre>
        </div>
       </div>
-      <div class="mt-5" id="e296d50d-4ce3-4106-aeac-c8126bb9bc61">
-       <div class="d-flex justify-content-between" id="d80cb23a-b115-4bc7-87e8-2adf8b7f6dd8">
-        <h4 id="4af01ac6-dd5c-4a6a-9e08-062e6951cf2c">
+      <div class="mt-5" id="0a3f4bc2-43ff-4c92-90fc-8545ef17da2e">
+       <div class="d-flex justify-content-between" id="7e0bcae5-bf69-49e0-8a17-2da62b0f5d0c">
+        <h4 id="8dbcf99c-41ec-4a72-a964-27045e241599">
          Method
-         <span class="text-primary" id="ef49c7f6-5bbd-49f6-a280-99ca791ba145">
+         <span class="text-primary" id="9103b845-2990-4073-92cc-b88b820e9849">
           as_heading
          </span>
         </h4>
-        <div id="7fbf39a2-cd5b-466e-8974-3eb1fa168b9f">
-         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#780f5c23-1cf1-4f1f-9e60-6bda5119822b" data-bs-toggle="collapse" id="667754f7-9900-4112-be5b-cb578d11a699" onclick="return false;" type="button">
+        <div id="bdb1e6f5-1161-4925-af82-febbc3eedfcf">
+         <button class="ms-1 me-1 btn-sm btn btn-outline-primary" data-bs-target="#25861737-f337-4a1f-8a8f-17b03b1a5937" data-bs-toggle="collapse" id="b85e8882-6506-4d71-b6c1-6018bb947b51" onclick="return false;" type="button">
           Argument
          </button>
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#ad9193f2-f780-4f9f-817b-868c7432e812" data-bs-toggle="collapse" id="15dc7541-e897-40f7-b015-56534a661400" onclick="return false;" type="button">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#982e453b-6226-4aa1-ad12-ff955081ac2e" data-bs-toggle="collapse" id="8e91383f-fbda-422c-97ec-8bd9d95c8c6a" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="abb50762-26ec-4abc-a745-8140cdffaeeb">
+       <span class="text-muted" id="3f6aa00b-cb71-4536-ad6d-7dd780474102">
         Makes the text as heading.
        </span>
-       <pre id="2858e0ec-f064-4289-8f35-c0629ffabf2e"><code class="python">as_heading(level)</code></pre>
-       <div class="ms-3 collapse" id="780f5c23-1cf1-4f1f-9e60-6bda5119822b">
-        <h6 id="98de856a-cd80-46aa-b661-61d6f06c5513">
-         <strong>
-          Arguments
-         </strong>
+       <pre id="b0e54c69-7294-44cd-ad4c-abe3cdfe021c"><code class="python">as_heading(level)</code></pre>
+       <div class="ms-3 collapse" id="25861737-f337-4a1f-8a8f-17b03b1a5937">
+        <h6 id="5d5bca73-7ae0-4a74-b3c6-8f7c73b03132">
+         Arguments
         </h6>
-        <table class="table table-sm bg-light" id="dd0765e3-0543-48d7-bd09-a92c49a3abbe">
+        <table class="table table-sm bg-light" id="ae53e4d4-e3d9-464b-aafa-d1c2b679d63f">
          <thead>
           <tr>
            <th scope="col">
@@ -9362,13 +9217,11 @@ Text("print('Hello world!')").as_code()
          </tbody>
         </table>
        </div>
-       <div class="ms-3 collapse" id="ad9193f2-f780-4f9f-817b-868c7432e812">
-        <h6 id="d05402ee-034a-4afb-8aca-b752645133ae">
-         <strong>
-          Returns
-         </strong>
+       <div class="ms-3 collapse" id="982e453b-6226-4aa1-ad12-ff955081ac2e">
+        <h6 id="af517fc3-e837-4115-9348-ca5a0bd89af5">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="46397fc5-fe11-451d-9cd0-35b4f0d7ba78">
+        <table class="table table-sm bg-light" id="b6f37b2a-3fa1-4451-9a64-bd9277dab080">
          <thead>
           <tr>
            <th scope="col">
@@ -9401,13 +9254,11 @@ Text("print('Hello world!')").as_code()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="d3a2bae1-4fe6-44f7-998b-1641096a358e">
-        <h6 id="64c108fc-d219-49a4-9b9f-0418adc963ee">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="19892cf3-df46-4808-9caf-eb0ad031d944">
+        <h6 id="d6e90b6c-4e9e-40a5-aac0-5c20e27da978">
+         Example
         </h6>
-        <pre id="a6a19c57-9d0a-40ba-9c10-609427f3fd61"><code class="python">from bootwrap import Panel, Text
+        <pre id="406e74c7-01ca-455f-9405-42020f6b1ecf"><code class="python">from bootwrap import Panel, Text
 
 Panel(
     Text("Header text 1").as_heading(1),
@@ -9419,54 +9270,52 @@ Panel(
 )
 </code></pre>
        </div>
-       <div class="ms-3" id="48ab0ab6-4690-42e5-a814-8edd74e96f85">
-        <div id="181d0099-b44f-4c88-ab61-efd8718837b6">
-         <h1 id="3dd1d281-d5f6-453f-aeb1-98a517db8b5b">
+       <div class="ms-3" id="8e0479cd-3643-4b4d-b9e3-e3304f6199d3">
+        <div id="813e92dc-04bc-4df0-8a89-f0c477bc75c9">
+         <h1 id="a1208a67-68e6-4283-8a0c-168072419683">
           Header text 1
          </h1>
-         <h2 id="562ef37c-a1ea-41d6-81ef-f2b1b698c4e4">
+         <h2 id="021365e8-70f0-4f23-8666-2b7cdc5c2c27">
           Header text 2
          </h2>
-         <h3 id="1c296dd8-a06a-4508-80ee-0f869ab54520">
+         <h3 id="d0f5bc0b-1682-43a8-ac46-294d079fd769">
           Header text 3
          </h3>
-         <h4 id="e2ebd11f-bdc3-431e-86ff-ea0fd76cb234">
+         <h4 id="abf61eb5-2dea-4124-92e3-626ac5da6568">
           Header text 4
          </h4>
-         <h5 id="3d39b160-cd97-440f-8ac0-ad72542a34c7">
+         <h5 id="96551488-6bb9-4385-8463-e8d0d0056dd7">
           Header text 5
          </h5>
-         <h6 id="9156f74c-f8bc-41bf-9580-76b1440c3d43">
+         <h6 id="14150dc9-7dc5-43f5-ac0c-3a34563ec975">
           Header text 6
          </h6>
         </div>
        </div>
       </div>
-      <div class="mt-5" id="17afb5be-fb51-49e7-b77e-ef79939c0b03">
-       <div class="d-flex justify-content-between" id="50903ce3-4cea-40a4-b756-c0cc2bc1c716">
-        <h4 id="ecd8589d-352e-4298-a1ab-b3070f69fbb0">
+      <div class="mt-5" id="c7425c27-a071-47cd-b067-f4a2f87a93fd">
+       <div class="d-flex justify-content-between" id="9e8c4c3b-23af-4ea6-a983-d483473de602">
+        <h4 id="a6381fe5-40f9-464a-ba40-2f1331b5bf3e">
          Method
-         <span class="text-primary" id="d2d93c21-0162-4f54-8fef-cb49b9ad2d60">
+         <span class="text-primary" id="22482d5e-5639-48c3-b42d-e2c1ad3f8951">
           as_muted
          </span>
         </h4>
-        <div id="70af2f86-bf2f-4768-8a1b-9fb2e7d64100">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#b053bdf8-2909-45dc-bc46-12f4ef528ac2" data-bs-toggle="collapse" id="ab089c21-ba86-428b-8b62-bbf44c7ae766" onclick="return false;" type="button">
+        <div id="cdb6773e-a711-4fa7-bec5-edc434ee7a4c">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#f4465904-3e78-4244-9549-38bc5493e57d" data-bs-toggle="collapse" id="ec5e8283-76aa-4f9d-b92c-1375335161a9" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="a4a302cc-2a29-4dd6-8864-1f514d42b2d8">
+       <span class="text-muted" id="811c4c8c-7e12-4607-99cd-c40406c72b17">
         Makes the text muted.
        </span>
-       <pre id="f7ad10c1-b731-4810-b6b6-387b7af53623"><code class="python">as_muted()</code></pre>
-       <div class="ms-3 collapse" id="b053bdf8-2909-45dc-bc46-12f4ef528ac2">
-        <h6 id="8b91d496-185e-452c-98c9-1235f4aa2427">
-         <strong>
-          Returns
-         </strong>
+       <pre id="0c194b42-c04e-4e2f-8a03-6c3d311178dc"><code class="python">as_muted()</code></pre>
+       <div class="ms-3 collapse" id="f4465904-3e78-4244-9549-38bc5493e57d">
+        <h6 id="81f26702-27bf-43bf-ba00-54bc09027a88">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="f9e7a8f7-1e20-45ff-945f-39113d993b9d">
+        <table class="table table-sm bg-light" id="ca875f6a-cc3a-4f08-85b7-085c851cb4af">
          <thead>
           <tr>
            <th scope="col">
@@ -9499,48 +9348,44 @@ Panel(
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="ed2be047-e73e-41d1-8fa8-15bce25c670d">
-        <h6 id="6308f9ad-4cee-48f6-86f0-cc8793b85986">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="c8c2cde5-a865-4ccc-9836-91d4702d7127">
+        <h6 id="5b051cd8-c751-4cda-9f47-6edeed7da28a">
+         Example
         </h6>
-        <pre id="471afde5-884a-4518-8ab5-ecc210c623da"><code class="python">from bootwrap import Text
+        <pre id="9bdeff1b-69ba-4a21-906e-ef4414831ce5"><code class="python">from bootwrap import Text
 
 Text("Muted text").as_muted()
 </code></pre>
        </div>
-       <div class="ms-3" id="3062fcf3-492f-4072-b804-a24ca3604e8b">
-        <span class="text-muted" id="63ecd575-deb1-49ab-b80f-eec94d436afe">
+       <div class="ms-3" id="4358fa37-c4bc-4220-b032-89935ed6c961">
+        <span class="text-muted" id="e14bf629-45db-4958-848f-71fac7a54d98">
          Muted text
         </span>
        </div>
       </div>
-      <div class="mt-5" id="a8c246ce-4915-416a-ae5c-057ada9dfff4">
-       <div class="d-flex justify-content-between" id="6fc2f334-cc49-45c7-9c1e-e1cef8be334c">
-        <h4 id="3a96d34b-d1ff-4b66-8ebe-991b0ca6771c">
+      <div class="mt-5" id="9003d986-1509-42d2-a2ae-4a7ec0885c10">
+       <div class="d-flex justify-content-between" id="e037b261-85b9-4498-acc9-420cb2961a6a">
+        <h4 id="36c02074-a6bc-439b-b2b1-5232afa4437a">
          Method
-         <span class="text-primary" id="8b3b86da-fc01-41a2-9649-2faf9fb62c99">
+         <span class="text-primary" id="4ea88a34-570f-4a72-8f4b-c0860d29e99b">
           as_paragraph
          </span>
         </h4>
-        <div id="6cb00fca-e5c0-4afd-8c0d-2953e06e88ee">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#76034c5b-5325-4034-9200-53931806183d" data-bs-toggle="collapse" id="27f68738-f750-41d9-ac76-7ecfc337a427" onclick="return false;" type="button">
+        <div id="57df1f02-7bcf-4a9b-be79-ee4ad2a6d30c">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#1684c4a8-e9b2-4fdd-8ddd-08ee7892f7e1" data-bs-toggle="collapse" id="1df044f0-6cee-4ec3-a655-e0a65269084c" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="f7574622-459e-4b48-bf5c-f26540fe5af9">
+       <span class="text-muted" id="94c4f670-329b-4e16-862b-10b5bb7520f0">
         Makes the text wrap in a paragraph.
        </span>
-       <pre id="0a0118f6-8b95-41d0-aed5-8f6658838ea2"><code class="python">as_paragraph()</code></pre>
-       <div class="ms-3 collapse" id="76034c5b-5325-4034-9200-53931806183d">
-        <h6 id="6a604a1c-c450-4a4c-ba9b-b24ac6e23ac5">
-         <strong>
-          Returns
-         </strong>
+       <pre id="091e8ee6-29e0-4abb-9f42-e160ff57b9a0"><code class="python">as_paragraph()</code></pre>
+       <div class="ms-3 collapse" id="1684c4a8-e9b2-4fdd-8ddd-08ee7892f7e1">
+        <h6 id="244095c7-8f14-4064-81b8-2764dfc816e5">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="2bd77298-97e8-470e-a5c4-a17a64bdb8bd">
+        <table class="table table-sm bg-light" id="3ba2178e-381c-4087-a454-ec36841a724a">
          <thead>
           <tr>
            <th scope="col">
@@ -9573,13 +9418,11 @@ Text("Muted text").as_muted()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="3f6f114b-c7db-4d80-b356-4a054d185ff4">
-        <h6 id="42311afe-d3e9-404b-aa01-6dca5fc727c8">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="4cfdcec9-bada-4008-ab69-1f5081d29b85">
+        <h6 id="868383fa-c751-4d0c-8c1b-772d1753a082">
+         Example
         </h6>
-        <pre id="1a311cef-bafa-415c-bec5-284777eca325"><code class="python">from bootwrap import Panel, Text
+        <pre id="064eab82-e0dd-42aa-ae94-29d431d1db0e"><code class="python">from bootwrap import Panel, Text
 
 Panel(
     Text("Paragraph 1").as_paragraph(),
@@ -9588,45 +9431,43 @@ Panel(
 )
 </code></pre>
        </div>
-       <div class="ms-3" id="c818010b-e97f-41c6-9c30-2d491f110fe6">
-        <div id="9aebb696-7710-427c-ba94-5557126b2bda">
-         <p id="f804d125-3edb-4a36-8c04-a6cf5bc1283f">
+       <div class="ms-3" id="641ee979-bcde-4aae-a53b-d496ca3cf9fc">
+        <div id="bd578aeb-10ad-48d3-addb-167fae85a301">
+         <p id="14b430d5-28b0-45e9-a6ba-12f49ad31ed1">
           Paragraph 1
          </p>
-         <p id="f176fc31-1d2a-4927-8305-b7a128402909">
+         <p id="1a0dbb6a-30f5-4732-a5a6-e4ccdde5af44">
           Paragraph 2
          </p>
-         <p id="271f19c0-722a-4c9b-88c1-37ffce9d2199">
+         <p id="d7241c47-66c1-4ce9-bcd9-8f1eb5ed67cd">
           Paragraph 3
          </p>
         </div>
        </div>
       </div>
-      <div class="mt-5" id="1bc6ef20-0fd7-47f7-b929-cb148232cfba">
-       <div class="d-flex justify-content-between" id="2cefb499-6cbc-46c0-b545-031f885cef4e">
-        <h4 id="08148320-c899-4ba8-825f-e458b2bf16f0">
+      <div class="mt-5" id="ec30a54a-cb5e-4212-81ee-ea0b520892e7">
+       <div class="d-flex justify-content-between" id="c07f0dcd-a8a8-4d92-8b28-e2203faf0074">
+        <h4 id="ae245f6a-2c9a-42ae-82fa-7b58eb55e9ad">
          Method
-         <span class="text-primary" id="ce63a7aa-337c-467e-a494-23b099fc43d2">
+         <span class="text-primary" id="b9bebdcb-6106-416c-ab8c-734e91236041">
           as_small
          </span>
         </h4>
-        <div id="b77dbc99-fc2d-45ac-8a50-ab254bb729eb">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#d027a022-8bb6-4681-9c2f-1cca414d6014" data-bs-toggle="collapse" id="053b8143-605f-4eb4-9765-61c27b6cf252" onclick="return false;" type="button">
+        <div id="21867f81-f51b-4e1b-beb0-3721af517a5e">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#bb236298-ae27-4479-a77d-f7d8c694144a" data-bs-toggle="collapse" id="5865021d-4f64-48dc-8f89-a9d23b48e013" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="71d07045-1b84-4e54-96a3-30da6f5f0a87">
+       <span class="text-muted" id="c16b9598-7c46-4411-87cc-61ac1ab804e4">
         Makes the text as small.
        </span>
-       <pre id="47bf2c7e-7b62-4e47-984a-3089b7d0b8d5"><code class="python">as_small()</code></pre>
-       <div class="ms-3 collapse" id="d027a022-8bb6-4681-9c2f-1cca414d6014">
-        <h6 id="a587abd7-00c1-4142-a915-4c15f8ed9356">
-         <strong>
-          Returns
-         </strong>
+       <pre id="fe7d48ef-194e-4ccc-a558-f08d6945f9e7"><code class="python">as_small()</code></pre>
+       <div class="ms-3 collapse" id="bb236298-ae27-4479-a77d-f7d8c694144a">
+        <h6 id="f38025a9-2080-41c5-8934-526afa4acd62">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="95c6e587-41e9-4395-92b0-0ebeab6dd4b9">
+        <table class="table table-sm bg-light" id="0f2f3cb1-3ab6-4d90-adaa-05f8abac1cb5">
          <thead>
           <tr>
            <th scope="col">
@@ -9659,50 +9500,81 @@ Panel(
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="54719698-f581-494f-b189-7cb975bea754">
-        <h6 id="0f5727d2-d90b-44da-bbc2-280a549399b2">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="945e87c2-7183-4262-91cb-9c2cc449bd45">
+        <h6 id="d2ddcfe7-be0a-4abc-8633-87a66c134bdd">
+         Example
         </h6>
-        <pre id="1974d5af-9758-40bf-85e1-7cac4fcfc27b"><code class="python">from bootwrap import Text
+        <pre id="4dd3d84f-bfb0-4b5d-9ceb-166fdf5d1ee0"><code class="python">from bootwrap import Text, Panel
 
-Text("Small text").as_small()
+txt_small = Text("Small text").as_small()
+txt_small_outline = Text("Small text with border").as_small().as_outline()
+txt_small_primary = Text("Small text of primary color").as_small().as_primary()
+txt_small_primary_outline = Text("Small text of primary color with border").as_small().as_primary().as_outline()
+
+Panel(
+    txt_small,
+    txt_small_outline,
+    txt_small_primary,
+    txt_small_primary_outline
+).vertical()
 </code></pre>
        </div>
-       <div class="ms-3" id="30c1b5db-2e5a-40d8-87e5-70a1b2e5cb1f">
-        <span id="d60b85ee-0c2f-452b-9517-728c01bfe09f">
-         <small>
-          Small text
-         </small>
-        </span>
+       <div class="ms-3" id="b0e07410-3c82-4a7b-8ff2-821db36198f7">
+        <div id="30503e49-3aa0-4fcf-b98f-c0a7a7fcce19">
+         <div class="row">
+          <div class="col-md">
+           <small id="736bad7c-d386-4fde-9416-cd2d98e2e629">
+            Small text
+           </small>
+          </div>
+         </div>
+         <div class="row">
+          <div class="col-md">
+           <small class="border" id="969fe9a6-71d8-4dac-8fbc-427b7615b98a">
+            Small text with border
+           </small>
+          </div>
+         </div>
+         <div class="row">
+          <div class="col-md">
+           <small class="text-primary" id="73c0eec1-9551-49b3-85cd-de0dc9f7d81a">
+            Small text of primary color
+           </small>
+          </div>
+         </div>
+         <div class="row">
+          <div class="col-md">
+           <small class="text-primary border border-primary" id="edb2a594-609b-41ac-8d83-2b1aea7daf7e">
+            Small text of primary color with border
+           </small>
+          </div>
+         </div>
+        </div>
        </div>
       </div>
-      <div class="mt-5" id="b309f7a7-8a0c-4f5d-ba64-dae6898240ed">
-       <div class="d-flex justify-content-between" id="c8722721-4337-44f6-a5e5-08388a7d30c1">
-        <h4 id="02d806d9-8fab-454d-8d85-79518b6ca252">
+      <div class="mt-5" id="0b1bfda0-1ece-4d71-b56a-94e55fed4b8e">
+       <div class="d-flex justify-content-between" id="ad619179-ef20-4ba6-bb17-9cf83a19c8c1">
+        <h4 id="43c61fa9-acc1-4f47-8481-b34220a6e29b">
          Method
-         <span class="text-primary" id="fe7e4c2d-ccbc-45b9-b780-3483a69bd3bd">
+         <span class="text-primary" id="695640f3-b335-48e7-b29f-1598b22c8ff9">
           as_strong
          </span>
         </h4>
-        <div id="f5976fe9-b46c-45a7-a5bb-1f3c3063d1a7">
-         <button class="btn-sm btn btn-outline-primary" data-bs-target="#679dc967-385c-4edf-a7e6-91aacf9cfefb" data-bs-toggle="collapse" id="77c1047b-fee9-42f5-99d9-97a9ca39b290" onclick="return false;" type="button">
+        <div id="66d40e68-4d55-413a-939e-0b76b3df4336">
+         <button class="btn-sm btn btn-outline-primary" data-bs-target="#e112af0d-21b9-4161-8ca8-02b438507afd" data-bs-toggle="collapse" id="ff2b2c8e-26ef-4935-843a-d63772cb4cdf" onclick="return false;" type="button">
           Returns
          </button>
         </div>
        </div>
-       <span class="text-muted" id="b5b8c301-3c4d-46f6-99de-fdfbc4255205">
+       <span class="text-muted" id="ae818fc7-d9b4-453a-8503-eff023b06dc6">
         Makes the text as strong.
        </span>
-       <pre id="593b95ba-f590-4a91-a514-d1e8216657f3"><code class="python">as_strong()</code></pre>
-       <div class="ms-3 collapse" id="679dc967-385c-4edf-a7e6-91aacf9cfefb">
-        <h6 id="657e1f59-80b3-4ad2-974a-d0a794798a5d">
-         <strong>
-          Returns
-         </strong>
+       <pre id="08364a41-ea8c-4574-9766-76ee3a83565e"><code class="python">as_strong()</code></pre>
+       <div class="ms-3 collapse" id="e112af0d-21b9-4161-8ca8-02b438507afd">
+        <h6 id="acaf0e4c-b58b-4ff2-8b32-72069428a781">
+         Returns
         </h6>
-        <table class="table table-sm bg-light" id="f15ad5b4-7a3c-4d73-8963-b3cfe61dd734">
+        <table class="table table-sm bg-light" id="8968fd59-749c-44d4-8fb6-9d5ca4e01973">
          <thead>
           <tr>
            <th scope="col">
@@ -9735,23 +9607,56 @@ Text("Small text").as_small()
          </tbody>
         </table>
        </div>
-       <div class="ms-3" id="10e1f5ed-e8ae-4274-aae0-3933e0a9fcd2">
-        <h6 id="8128f0f0-2910-4a98-aa34-b800b11983ab">
-         <strong>
-          Example
-         </strong>
+       <div class="ms-3" id="ded0c64c-cbae-4a78-91d4-dc72609c45be">
+        <h6 id="5d290fa8-09aa-4a58-addd-6bd5d46589ee">
+         Example
         </h6>
-        <pre id="1879d791-47bd-4bf4-99b6-39c29aa02639"><code class="python">from bootwrap import Text
+        <pre id="3d2cad00-be9d-4a20-946d-d45be6e88efa"><code class="python">from bootwrap import Text, Panel
+
+txt_strong = Text("Strong text").as_strong()
+txt_strong_outline = Text("Strong text with border").as_strong().as_outline()
+txt_strong_primary = Text("Strong text of primary color").as_strong().as_primary()
+txt_strong_primary_outline = Text("Strong text of primary color with border").as_strong().as_primary().as_outline()
 
-Text("Strong text").as_strong()
+Panel(
+    txt_strong,
+    txt_strong_outline,
+    txt_strong_primary,
+    txt_strong_primary_outline
+).vertical()
 </code></pre>
        </div>
-       <div class="ms-3" id="daf13f69-400a-4dde-93bd-1106f50bfa7f">
-        <span id="41f1de9c-9bff-4912-b2e9-98f6031e7080">
-         <strong>
-          Strong text
-         </strong>
-        </span>
+       <div class="ms-3" id="3cd588bc-a017-43c4-97cb-93a3c3007ac1">
+        <div id="41e7e6b7-e3a1-480d-a986-99c2e3b68759">
+         <div class="row">
+          <div class="col-md">
+           <strong id="88647524-ce8c-4146-a840-e6fe2a2427a3">
+            Strong text
+           </strong>
+          </div>
+         </div>
+         <div class="row">
+          <div class="col-md">
+           <strong class="border" id="08d5b2be-adc3-421d-8474-cc84a2c9bc23">
+            Strong text with border
+           </strong>
+          </div>
+         </div>
+         <div class="row">
+          <div class="col-md">
+           <strong class="text-primary" id="be85eb68-9b13-4edf-8755-a41e4b5d0211">
+            Strong text of primary color
+           </strong>
+          </div>
+         </div>
+         <div class="row">
+          <div class="col-md">
+           <strong class="text-primary border border-primary" id="00ef2f42-3bc5-4a9c-a59c-d3de6b4ea59b">
+            Strong text of primary color with border
+           </strong>
+          </div>
+         </div>
+        </div>
        </div>
       </div>
      </div>
diff --git a/docs/config/components.yaml b/docs/config/components.yaml
index 3d9a64b..4a07cc4 100644
--- a/docs/config/components.yaml
+++ b/docs/config/components.yaml
@@ -385,6 +385,46 @@ Navigation:
 Panel:
   - class: Panel
 
+  - title: Appearance
+    description:
+      - Change <code>Panel</code> appearance using the following functions <code>as_primary()</code>, <code>as_secondary()</code>, <code>as_success()</code>, <code>as_warning()</code>, <code>as_danger()</code>, <code>as_info()</code>, <code>as_light()</code>, and <code>as_dark()</code>.
+    code: |
+      @right
+      from bootwrap import Panel, Text
+      panel = Panel(
+        Panel(Text("Primary")).as_primary(),
+        Panel(Text("Secondary")).as_secondary(),
+        Panel(Text("Success")).as_success(),
+        Panel(Text("Warning")).as_warning(),
+        Panel(Text("Danger")).as_danger(),
+        Panel(Text("Info")).as_info(),
+        Panel(Text("Light")).as_light(),
+        Panel(Text("Dark").as_light()).as_dark()
+      )
+      for anchor in panel:
+        anchor.mb(1)
+      output = panel
+
+  - title: Outline
+    description:
+      - Make <code>Panel</code> without filling with surrounded by color border using the following function <code>as_outline()</code>.
+    code: |
+      @right
+      from bootwrap import Panel, Text
+      panel = Panel(
+        Panel(Text("Primary").as_primary()).as_primary().as_outline(),
+        Panel(Text("Secondary").as_secondary()).as_secondary().as_outline(),
+        Panel(Text("Success").as_success()).as_success().as_outline(),
+        Panel(Text("Warning").as_warning()).as_warning().as_outline(),
+        Panel(Text("Danger").as_danger()).as_danger().as_outline(),
+        Panel(Text("Info").as_info()).as_info().as_outline(),
+        Panel(Text("Light").as_light()).as_light().as_outline(),
+        Panel(Text("Dark").as_dark()).as_dark().as_outline()
+      )
+      for anchor in panel:
+        anchor.mb(1)
+      output = panel
+
 # --- Separator Tab ------------------------------------------------------------
 
 Separator:
diff --git a/docs/index.html b/docs/index.html
index f19a7de..8816a10 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -21,12 +21,10 @@
  </head>
  <body>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-   <img alt="Bootwrap Logo" id="1e9c2ef8-8df6-452f-bdba-ac250a364e7c" src="logo.png" width="32"/>
-   <span class="text-light" id="125b3815-c56d-4abb-bdf5-da88507be800">
-    <strong>
-     Bootwrap
-    </strong>
-   </span>
+   <img alt="Bootwrap Logo" id="b7d3a687-cbe8-4501-9f94-40f90c7a0350" src="logo.png" width="32"/>
+   <strong class="text-light" id="a5b6c3bd-d66d-45c4-bff8-bebb6e52d1f7">
+    Bootwrap
+   </strong>
    <button aria-controls="menu" aria-expanded="false" aria-label="Toggle menu" class="navbar-toggler" data-bs-target="#menu" data-bs-toggle="collapse" type="button">
     <span class="navbar-toggler-icon">
     </span>
@@ -34,39 +32,39 @@
    <div class="collapse navbar-collapse" id="menu">
     <ul class="navbar-nav me-auto">
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="index.html" id="eb7670ab-89e1-4b19-8fd0-9d0fa4234334">
+      <a class="ms-2 nav-link" href="index.html" id="9436577b-0785-4dc8-8a65-c25243538b2b">
        Home
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="layout.html" id="5d578035-be2d-4897-aa4a-bfea121da552">
+      <a class="ms-2 nav-link" href="layout.html" id="6edf152f-8b31-4fd6-8b4e-640130ac852f">
        Layout
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="base.html" id="f0b30cb1-fdca-4663-88af-19140a319dd2">
+      <a class="ms-2 nav-link" href="base.html" id="78c8b422-3a85-4089-98a8-f57cb1a8d803">
        Base
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="components.html" id="b1822bff-9f36-4ff1-9b02-c3517a795f19">
+      <a class="ms-2 nav-link" href="components.html" id="bd08c0a0-fd31-432e-a438-2c7208ac4c08">
        Components
       </a>
      </li>
     </ul>
-    <a class="ms-2 btn btn-outline-light" href="https://github.com/mmgalushka/bootwrap" id="6cddb566-39e4-4386-9226-f60c16eb315b" role="button">
+    <a class="ms-2 btn btn-outline-light" href="https://github.com/mmgalushka/bootwrap" id="54e368ea-0ea6-4d01-b3c4-1cd515f28adf" role="button">
      GitHub
     </a>
    </div>
   </nav>
   <div class="container-fluid">
-   <div id="7122bcef-795c-4e48-b732-41704f8757c5">
-    <div class="mt-3" id="d1a22066-1c5f-4c5c-8ac5-6e93c0f8f7c2">
-     <div id="cad83754-ded9-475c-be7d-ea1e34ee0a61">
+   <div id="f8e97d08-963c-473b-86ac-d9508ba3d11f">
+    <div class="mt-3" id="a1c033fa-527a-4302-a969-c8e92e5e60b3">
+     <div id="2e769249-0a3d-4208-9e95-e4225f2b415f">
       <div class="row">
        <div class="col-md">
-        <div id="2eaa7f06-2512-4db7-8a63-a09da835d790">
-         <h1 id="0eb00fee-3baa-448d-8530-bddd97e22607">
+        <div id="d90109f1-9c7c-405f-8c65-58186ee6de9d">
+         <h1 id="6a151b8f-b104-493b-8401-6bab1b5573a8">
           <span class="display-4">
            Bootwrap
           </span>
@@ -74,16 +72,16 @@
         </div>
        </div>
        <div class="col-md">
-        <div id="319579c9-b48a-42cb-9fb4-02de78f036fb">
+        <div id="bb74ab1b-7910-4694-ad91-d8d529089944">
         </div>
        </div>
       </div>
      </div>
-     <div id="c7923590-d8bd-42f1-845f-79e38dc24e55">
+     <div id="3313bd05-20c3-4fe8-bae5-116149e8b67c">
       <div class="row">
        <div class="col-md">
-        <div id="06c45392-64ab-4c7c-a68c-2f8be5e60e29">
-         <p id="a820a095-8fab-445c-a914-a69b689a0a8c">
+        <div id="003444dc-6fe4-4943-82b0-37acb92711a1">
+         <p id="a91a1e26-d7b0-47be-9375-595808237610">
           <h2 class="text-muted">
            Pure Python wrapper for one of the most popular front-end toolkit Bootstrap, allowing quick and easy prototyping of web-based user interfaces
           </h2>
@@ -91,72 +89,72 @@
         </div>
        </div>
        <div class="col-md">
-        <div id="8b0ed44d-9dba-4f21-8149-b3f3bd531467">
-         <div class="text-center" id="f5651d57-5359-4f06-beca-6234c23d7e57">
-          <img height="300" id="377f1a1a-f78c-4f83-a874-b35ee218a91c" src="flash.png"/>
+        <div id="24b6897f-08c6-470c-bc58-be124067d5a3">
+         <div class="text-center" id="9dad7e36-aad7-4599-ab87-1a5917b072ed">
+          <img height="300" id="a724bc8c-1104-4193-bbcf-37f8ba168d59" src="flash.png"/>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
-    <div class="mt-3" id="6fa65036-e4f1-4fae-92c9-e0c401605c44">
-     <div id="ee32549c-c54c-4ef0-ba19-211ca8787670">
+    <div class="mt-3" id="62b97b1b-0ecc-4e53-9593-f6ebec29776a">
+     <div id="eb06401d-19b5-4979-a6e0-e8687bd97380">
       <div class="row">
        <div class="col-md">
-        <div id="b644863e-9755-4a8e-a183-236e7b4bd70a">
-         <h1 id="d42227df-5ce6-4a5b-9b99-6b1bddc1eb1e">
+        <div id="888a3fd0-f752-419b-8341-08bcd3caf573">
+         <h1 id="d0cf7641-3d29-4584-9912-001a58c38690">
           Installation
          </h1>
         </div>
        </div>
        <div class="col-md">
-        <div id="09b56a30-37d0-4a23-ab52-e441af13af9d">
+        <div id="2bf31c58-c988-46e6-8e37-e4c6c803357f">
         </div>
        </div>
       </div>
      </div>
-     <div id="ee2d7481-bc1f-44f6-9b6c-2a0c3dca27e3">
+     <div id="bb6259bd-5616-4687-a447-35af7e807039">
       <div class="row">
        <div class="col-md">
-        <div id="cfde4500-001f-4209-a74d-37164bee6da7">
-         <p id="b86603a2-7bd7-477a-84ab-88a1d3be7536">
+        <div id="7897ee3f-b66d-4d82-bca5-b56694154fc1">
+         <p id="d55f7805-6587-4274-b45c-0834ccf0ff69">
           Use the following command to install Python Bootwrap:
          </p>
-         <pre id="2c00e220-bc3b-413b-add3-f66a6ff1c706"><code class="python">~$ pip install bootwrap</code></pre>
+         <pre id="65b057bf-e437-4be4-a33f-210479aa89a6"><code class="python">~$ pip install bootwrap</code></pre>
         </div>
        </div>
        <div class="col-md">
-        <div id="79147905-2eb2-4f0a-81da-188520b0eeea">
+        <div id="954ac8ae-5555-4d57-b002-efc42235576c">
         </div>
        </div>
       </div>
      </div>
     </div>
-    <div class="mt-3" id="4b3a6df0-a3e8-4b93-befc-c79ab06f2df5">
-     <div id="6218b336-e45b-4b69-9b68-f92bc68ba78e">
+    <div class="mt-3" id="ad5e4f97-b042-4750-ab28-22adaef86939">
+     <div id="a7822dde-45e2-42e9-9b21-aa278701bc3c">
       <div class="row">
        <div class="col-md">
-        <div id="100d259d-051c-49a6-8bdb-5a2afb5fc7bf">
-         <h1 id="8516b568-57c5-447f-aa7f-a4a197998969">
+        <div id="b4c0db99-521a-4f8c-b609-5e4df1a9c67b">
+         <h1 id="e083440c-9634-42c8-9807-0e35a8a19f66">
           Single-Page Application
          </h1>
         </div>
        </div>
        <div class="col-md">
-        <div id="bd6c8649-0e3d-4869-a7b7-efbbcc8da68a">
+        <div id="a2bbe6ed-5f67-4863-be46-800ad1fcf171">
         </div>
        </div>
       </div>
      </div>
-     <div id="25b13ea8-587b-46e0-841d-feead3538026">
+     <div id="054fecce-9c7a-41b4-aa03-fdfdac037e23">
       <div class="row">
        <div class="col-md">
-        <div id="f291c83c-706a-4939-9d75-8af5e3544ae4">
-         <p id="b5f85da7-68a2-475d-814d-f9574f25b851">
+        <div id="eeefcd6e-3155-459f-a749-fccd7097a09a">
+         <p id="98868028-5070-40cf-9ff4-be6d1fe2e30f">
           A single-page Bootwrap application looks something like this:
          </p>
-         <pre id="984f43fd-a4f6-48e9-878d-712c07c2f243"><code class="python">from flask import Flask
+         <pre id="28507cbf-ec7b-4ff8-b847-b6712e4dc5b9"><code class="python">from flask import Flask
 from markupsafe import Markup
 from bootwrap import Page, Text
 
@@ -173,39 +171,39 @@ if __name__ == '__main__':
         </div>
        </div>
        <div class="col-md">
-        <div id="8dc5419d-eda7-48e2-8f9d-30d10e0f784e">
-         <div class="text-center" id="03e89d48-54c4-4330-a532-726640c39215">
-          <img height="200" id="f4fdab87-82f7-44d7-b220-cdfb64554b9d" src="single-page-app.png"/>
+        <div id="9f34c3b9-80e4-47a4-9fb6-0cfd47d6f77e">
+         <div class="text-center" id="edd8c3bd-ee80-4bbe-90d1-9c1e6054e7d4">
+          <img height="200" id="07ab5dc3-60a5-430e-9cff-bb6aaf7c7a64" src="single-page-app.png"/>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
-    <div class="mt-3" id="feaf1153-da48-4f19-b3c6-c7f4a8543ec8">
-     <div id="d4e97546-ea55-4fd9-a57b-2e7e80b81d64">
+    <div class="mt-3" id="2581d3a8-cde8-4cc3-a24f-892a4efaf99a">
+     <div id="3ab08ba7-5727-4471-ba9e-8973ff7063d1">
       <div class="row">
        <div class="col-md">
-        <div id="8e7191ee-4802-4fc7-aef3-6eef39801aad">
-         <h1 id="216bfdc7-15ed-45dd-9f23-45db71b40041">
+        <div id="d520eea8-6164-4cf0-9ad3-9f2cd02b0820">
+         <h1 id="9c008f78-48f3-41bb-88f4-04ec6bf614a8">
           Multi-Pages Application
          </h1>
         </div>
        </div>
        <div class="col-md">
-        <div id="934e1924-82a6-49ea-a15c-900013496ab1">
+        <div id="a477cb5a-acd4-40ae-bdc2-d3b101723736">
         </div>
        </div>
       </div>
      </div>
-     <div id="e8b05c86-bf73-42f8-afd2-ec7137476927">
+     <div id="b63ff1bd-3f52-41f4-932f-3970d8dd4137">
       <div class="row">
        <div class="col-md">
-        <div id="de79a045-a7d9-4e6b-a9d9-bce601cb35d0">
-         <p id="11249972-da54-433b-bd8e-5f86ebd4e509">
+        <div id="cd115173-d479-4b28-8a80-332452e366f6">
+         <p id="211e00d8-ea39-43ed-b789-d8b0b28a4465">
           A multi-pages Bootwrap application looks something like this:
          </p>
-         <pre id="fe6ddcb9-2969-48be-af08-028e7040f983"><code class="python">from flask import Flask
+         <pre id="2ea959ec-cc27-49d7-bf61-943ba86040d9"><code class="python">from flask import Flask
 from markupsafe import Markup
 from bootwrap import (
   Page, Menu, Image, Anchor, Button, Text
@@ -286,9 +284,9 @@ if __name__ == '__main__':
         </div>
        </div>
        <div class="col-md">
-        <div id="945cdfb6-96cc-479f-8a48-118b5bca58d3">
-         <div class="text-center" id="861d4bb4-fcfe-4800-9cce-80f71accfcc2">
-          <img height="200" id="d2a39e94-7912-42f0-bbe7-98acdd5d273e" src="multi-pages-app.png"/>
+        <div id="2bfebe15-89eb-4522-9b43-632ab6e8b71e">
+         <div class="text-center" id="87d7533d-fd15-4042-9a9e-278e42462dfc">
+          <img height="200" id="952c434a-0fc6-47a0-8057-2e11a6ca125c" src="multi-pages-app.png"/>
          </div>
         </div>
        </div>
diff --git a/docs/layout.html b/docs/layout.html
index c8bcd1f..a33c7ac 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -21,12 +21,10 @@
  </head>
  <body>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-   <img alt="Bootwrap Logo" id="8ba496ab-5baa-4442-a4b0-02e2e0f7469d" src="logo.png" width="32"/>
-   <span class="text-light" id="4fa77315-48ba-4470-a6ad-bce21c9e213e">
-    <strong>
-     Bootwrap
-    </strong>
-   </span>
+   <img alt="Bootwrap Logo" id="db1dc12b-0e1f-4fe0-a1e3-233a0b68d5c9" src="logo.png" width="32"/>
+   <strong class="text-light" id="76277593-bb1a-461f-90c5-b0780982fd54">
+    Bootwrap
+   </strong>
    <button aria-controls="menu" aria-expanded="false" aria-label="Toggle menu" class="navbar-toggler" data-bs-target="#menu" data-bs-toggle="collapse" type="button">
     <span class="navbar-toggler-icon">
     </span>
@@ -34,54 +32,54 @@
    <div class="collapse navbar-collapse" id="menu">
     <ul class="navbar-nav me-auto">
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="index.html" id="7e0134c8-5c03-4fe7-9e1d-d87ccac48d25">
+      <a class="ms-2 nav-link" href="index.html" id="ad9c387e-fa30-4fbf-8d81-a440d7fc1b8f">
        Home
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="layout.html" id="242d7d39-b0f9-454a-9201-e2dbb476f1c8">
+      <a class="ms-2 nav-link" href="layout.html" id="ff4d6f10-5957-4b87-90b4-38c19be60694">
        Layout
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="base.html" id="75b0a33b-29b3-4d18-94f6-ff0600b25e3d">
+      <a class="ms-2 nav-link" href="base.html" id="b897ea66-4792-4671-8a5c-9db6c72cd60f">
        Base
       </a>
      </li>
      <li class="nav-item">
-      <a class="ms-2 nav-link" href="components.html" id="52320582-b0d4-41fd-8b50-95f0cf94329e">
+      <a class="ms-2 nav-link" href="components.html" id="0501d1ff-b43c-40ea-8f9a-c43d1e369f07">
        Components
       </a>
      </li>
     </ul>
-    <a class="ms-2 btn btn-outline-light" href="https://github.com/mmgalushka/bootwrap" id="79d6a965-aa11-4084-a4cf-7d33dc1edd9c" role="button">
+    <a class="ms-2 btn btn-outline-light" href="https://github.com/mmgalushka/bootwrap" id="6ec37990-2043-48eb-aa46-31e6c0af02f8" role="button">
      GitHub
     </a>
    </div>
   </nav>
   <div class="container-fluid">
-   <div id="6f0dff41-3d7f-4459-a4d4-12c8847f7df1">
-    <div class="mt-3" id="0cc224b7-122c-440c-bdd7-a8405dafc506">
-     <div id="4d19f10c-3288-4665-af33-5cc7f56a1551">
+   <div id="468d913a-f196-4537-a03d-80e9cce57f99">
+    <div class="mt-3" id="86874703-ec38-4591-ab86-80ff5a1fe3f0">
+     <div id="9f007580-38a4-4e7a-8d4a-b516c30c5b32">
       <div class="row">
        <div class="col-md">
-        <div id="16692a4a-7051-422f-a464-b066f520cfd3">
-         <h1 id="67e1a06c-f0b3-4582-856b-bccf9ebebdbe">
+        <div id="6a498c86-161f-491f-b16c-8ec22f35bb74">
+         <h1 id="7e8d437e-588e-4912-a2a3-a000e10eab1d">
           Layout
          </h1>
         </div>
        </div>
        <div class="col-md">
-        <div id="fcc707f4-a127-4dfa-9af5-fd1e43a08e85">
+        <div id="08649904-f4c1-4779-87d9-2f323c0e51d2">
         </div>
        </div>
       </div>
      </div>
-     <div id="e8478d44-e969-4d43-bb20-a045a4ae31b6">
+     <div id="47a68689-d768-43bd-95b0-aa68dc6a9939">
       <div class="row">
        <div class="col-md">
-        <div id="e82a10be-da35-4704-b246-3cb56e40dfcd">
-         <p id="de65700f-6a38-4f40-82d9-b5dbc8dadc16">
+        <div id="e17a98ba-9537-420e-8ce5-4718af50e683">
+         <p id="331c28c4-f936-40b6-9e3b-0d64b4de0c75">
           To simplify the process of developing Web UI, Bootwrap uses the predefined layout which consists  of two elements
           <code>
            Page
@@ -92,7 +90,7 @@
           </code>
           .
          </p>
-         <p id="718d6679-2df0-45c9-b35e-2420393a949f">
+         <p id="6c5b7ed3-08b3-4647-bea5-b424c314e9c3">
           <strong>
            Note:
           </strong>
@@ -101,36 +99,36 @@
         </div>
        </div>
        <div class="col-md">
-        <div id="37dc7623-88c7-4552-ad9f-8ecf763cf77e">
-         <div class="text-center" id="634ae9a8-ffc1-44ac-a886-22d88f7e7fc1">
-          <img height="200" id="df92a1da-4d15-4668-be7c-84326a11a153" src="layout.png"/>
+        <div id="60023541-7d61-4ad5-bc8c-d6611625674e">
+         <div class="text-center" id="e060f5b8-c468-4966-a77f-56d2615e2748">
+          <img height="200" id="d6c237dc-99b5-47b5-bb26-c64baad5cbe7" src="layout.png"/>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
-    <div class="mt-3" id="f786aa4f-fae1-48b8-99dc-79dad48d4643">
-     <div id="9df886fe-cfe5-4bed-91b1-4c0a5c253da0">
+    <div class="mt-3" id="54aa755e-08b6-4ac2-93b6-032fdb820846">
+     <div id="12c8da7e-480e-4cde-8500-78e7d4c2c13d">
       <div class="row">
        <div class="col-md">
-        <div id="197b39bd-84b7-4881-bc00-7d05e2642ffd">
-         <h1 id="3ab91efb-b05b-4d40-8ad9-dd7a9f481dd8">
+        <div id="2fa784e8-5cc8-4218-a53f-a04855d60746">
+         <h1 id="083c578d-de39-4543-8afd-8a3e4e16c27a">
           Page
          </h1>
         </div>
        </div>
        <div class="col-md">
-        <div id="62af8526-4333-4ffa-94d1-c80ace949eea">
+        <div id="88427616-7e16-43d8-8b6c-dd0ea7cbf2b2">
         </div>
        </div>
       </div>
      </div>
-     <div id="22280417-de25-4086-a0dc-cbbe1d588d28">
+     <div id="3c6dd1ba-db36-497e-85b9-3785ae5bb089">
       <div class="row">
        <div class="col-md">
-        <div id="53695976-9ae1-4dad-a353-42e3b91efa64">
-         <p id="3157e96c-0a1d-4248-a068-961c00d66731">
+        <div id="fd6f475b-b837-4be6-8b4d-cf80522337dd">
+         <p id="23c33931-2718-4870-bb6a-ad131c3729a9">
           The container could be any element inheriting
           <code>
            WebComponent
@@ -141,7 +139,7 @@
           </code>
           .
          </p>
-         <pre id="59773773-8bff-443c-a449-fbbc6d281b71"><code class="python">from bootwrap import Page
+         <pre id="3fd0118d-4b68-4795-a6e4-eb0e3ff12136"><code class="python">from bootwrap import Page
 
 page = Page(
   favicon=..., title=..., resources=..., menu=...,
@@ -150,43 +148,43 @@ page = Page(
         </div>
        </div>
        <div class="col-md">
-        <div id="6dd0bfb7-bdb4-4abe-9c77-610c55e74d04">
-         <div class="text-center" id="dd6bd1a6-2414-4d89-8ae9-7556a5b8d77c">
-          <img height="250" id="d7ea9613-6fa7-45e0-a311-3836e7a4c77d" src="page.png"/>
+        <div id="75f6b471-4766-406c-bc67-13808083746f">
+         <div class="text-center" id="c539d53f-2801-4042-a382-2742a99374b2">
+          <img height="250" id="ca9be87a-0515-486a-a85e-e1b6057adcca" src="page.png"/>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
-    <div class="mt-3" id="5d82f001-b9dd-4db3-ab86-e144b5709a2b">
-     <div id="cf9d06ad-80ff-40ac-90a4-0abbffaf6255">
+    <div class="mt-3" id="039df8d3-42b9-417f-886e-4db254a9bd67">
+     <div id="2d83387d-43cc-4db5-b61f-16da8af7907f">
       <div class="row">
        <div class="col-md">
-        <div id="da023b63-2abf-4b8f-ab1d-00722a3ff27f">
-         <h1 id="e566994d-3f8e-49d7-aa44-5e3fa60651f2">
+        <div id="891f8a6d-825a-417b-ab3e-cb05031f6a57">
+         <h1 id="a8ddcdfd-0501-436f-a78b-a4cb972190d4">
           Menu
          </h1>
         </div>
        </div>
        <div class="col-md">
-        <div id="9225a0ca-7db2-436d-90d9-2ae2c40e6ec1">
+        <div id="710c12ba-91a9-41da-88cc-d945de31e099">
         </div>
        </div>
       </div>
      </div>
-     <div id="7a8648d8-ddd1-4d2a-9016-27ca3ead454a">
+     <div id="70090df3-1eca-40fa-b298-40490775fe57">
       <div class="row">
        <div class="col-md">
-        <div id="df9f7fc0-af25-4b51-a996-03af8617a701">
-         <p id="82daf013-a19e-400b-8cbd-87d950e1d95b">
+        <div id="3f3e9b05-75d4-4ce2-b595-b8e6b5463acd">
+         <p id="853b935b-4322-45c3-a7fa-f18013727646">
           The menu represents the top-level navigation bar containing anchors and actions allowing to switch between different application
           <code>
            Page
           </code>
           s.
          </p>
-         <pre id="3616b0fd-65c1-468b-ab5b-9cfa0afe1bbb"><code class="python">from bootwrap import Menu
+         <pre id="1a5afe73-1bdf-4780-88a0-e21421601b8f"><code class="python">from bootwrap import Menu
 
 menu = Menu(
   logo=..., brand=..., anchors=...,  actions=...
@@ -194,9 +192,9 @@ menu = Menu(
         </div>
        </div>
        <div class="col-md">
-        <div id="0b99a65a-5d95-4c23-ad93-4fada365ed6d">
-         <div class="text-center" id="344dc666-ec4c-43b0-ba4e-a7c04074b965">
-          <img height="100" id="ab93d039-7867-4acb-8c92-d6ff53731e81" src="menu.png"/>
+        <div id="418d152d-009a-45f7-aa38-d3b43ffce673">
+         <div class="text-center" id="89858fd3-3368-4890-b27e-eced68984cb4">
+          <img height="100" id="2c569d87-76d3-4663-90cc-c5520530c2c7" src="menu.png"/>
          </div>
         </div>
        </div>


Test patch:
diff --git a/tests/test_auth.py b/tests/test_auth.py
index ecb1baf..6692288 100644
--- a/tests/test_auth.py
+++ b/tests/test_auth.py
@@ -56,9 +56,7 @@ def test_signup_page():
                             <div class="form-group row">...</div>
                             <div class="form-group row">...</div>
 
-                            <span id="..." class="text-secondary form-group">
-                                <small>...</small>
-                            </span>
+                            <small id="..." class="text-secondary form-group">...</small>
 
                             <div id="..." class="d-flex justify-content-end">
                                 ...
diff --git a/tests/test_deck.py b/tests/test_deck.py
index ebdc95d..a6bdb54 100644
--- a/tests/test_deck.py
+++ b/tests/test_deck.py
@@ -26,9 +26,7 @@ def test_deck_card():
             </a>
             <div class="card-body">
                 <div class="text-right mb-2">
-                    <span id="..."
-                        class="text-muted"><small>somemarker</small>
-                    </span>
+                    <small id="..." class="text-muted">somemarker</small>
                 </div>
                 <h5 id="..."
                     class="card-title">
@@ -145,9 +143,7 @@ def test_deck_card():
             </a>
             <div class="card-body"  onclick="location.href='somewhere';">
                 <div class="text-right mb-2">
-                    <span id="..."
-                        class="text-muted"><small>somemarker</small>
-                    </span>
+                    <small id="..." class="text-muted">somemarker</small>
                 </div>
                 <h5 id="..."
                     class="card-title">
diff --git a/tests/test_list.py b/tests/test_list.py
index d77883d..8e32621 100644
--- a/tests/test_list.py
+++ b/tests/test_list.py
@@ -27,7 +27,7 @@ def test_list_item():
                 <div class="ms-2 me-2 w-100">
                     <div class="d-flex w-100 justify-content-between">
                         <h5 id="...">sometitle</h5>
-                        <span id="..."><small>somemarker</small></span>
+                        <small id="...">somemarker</small>
                      </div>
                     somedescr
                 </div>
diff --git a/tests/test_panel.py b/tests/test_panel.py
index 0b26d29..a620d5b 100644
--- a/tests/test_panel.py
+++ b/tests/test_panel.py
@@ -22,8 +22,8 @@ def test_panel():
 
 
 @pytest.mark.panel
-def test_panel_background():
-    panel = Panel().background('primary')
+def test_panel_appearance():
+    panel = Panel().as_primary()
     actual = HelperHTMLParser.parse(str(panel))
     expected = HelperHTMLParser.parse(f'''
         <div id="{panel.identifier}" class="bg-primary">
@@ -31,12 +31,23 @@ def test_panel_background():
     ''')
     assert actual == expected
 
-    with pytest.raises(TypeError):
-        Panel().background(0)
-
-    with pytest.raises(ValueError):
-        Panel().background("xyz")
+@pytest.mark.panel
+def test_panel_outline():
+    panel = Panel().as_outline()
+    actual = HelperHTMLParser.parse(str(panel))
+    expected = HelperHTMLParser.parse(f'''
+        <div id="{panel.identifier}" class="border">
+        </div>
+    ''')
+    assert actual == expected
 
+    panel = Panel().as_primary().as_outline()
+    actual = HelperHTMLParser.parse(str(panel))
+    expected = HelperHTMLParser.parse(f'''
+        <div id="{panel.identifier}" class="border border-primary">
+        </div>
+    ''')
+    assert actual == expected
 
 @pytest.mark.panel
 def test_panel_justify_content():
diff --git a/tests/test_text.py b/tests/test_text.py
index b151b95..bfff614 100644
--- a/tests/test_text.py
+++ b/tests/test_text.py
@@ -10,6 +10,17 @@ from .helper import HelperHTMLParser
 
 @pytest.mark.text
 def test_text():
+    text = Text('sometext').add_classes('someclass')
+    actual = HelperHTMLParser.parse(str(text))
+    expected = HelperHTMLParser.parse(f'''
+        <span id="{text.identifier}" class="someclass">
+            sometext
+        </span>
+    ''')
+    assert actual == expected
+
+@pytest.mark.text
+def test_text_appearance():
     text = Text('sometext').add_classes('someclass').as_primary()
     actual = HelperHTMLParser.parse(str(text))
     expected = HelperHTMLParser.parse(f'''
@@ -19,6 +30,25 @@ def test_text():
     ''')
     assert actual == expected
 
+@pytest.mark.text
+def test_text_outline():
+    text = Text('sometext').add_classes('someclass').as_outline()
+    actual = HelperHTMLParser.parse(str(text))
+    expected = HelperHTMLParser.parse(f'''
+        <span id="{text.identifier}" class="border someclass">
+            sometext
+        </span>
+    ''')
+    assert actual == expected
+
+    text = Text('sometext').add_classes('someclass').as_outline().as_primary()
+    actual = HelperHTMLParser.parse(str(text))
+    expected = HelperHTMLParser.parse(f'''
+        <span id="{text.identifier}" class="text-primary border border-primary someclass">
+            sometext
+        </span>
+    ''')
+    assert actual == expected
 
 @pytest.mark.text
 def test_text_heading():
@@ -57,9 +87,9 @@ def test_text_strong():
     text = Text('sometext').add_classes('someclass').as_primary().as_strong()
     actual = HelperHTMLParser.parse(str(text))
     expected = HelperHTMLParser.parse(f'''
-        <span id="{text.identifier}" class="text-primary someclass">
-            <strong>sometext</strong>
-        </span>
+        <strong id="{text.identifier}" class="text-primary someclass">
+            sometext
+        </strong>
     ''')
     assert actual == expected
 
@@ -69,9 +99,9 @@ def test_text_small():
     text = Text('sometext').add_classes('someclass').as_primary().as_small()
     actual = HelperHTMLParser.parse(str(text))
     expected = HelperHTMLParser.parse(f'''
-        <span id="{text.identifier}" class="text-primary someclass">
-            <small>sometext</small>
-        </span>
+        <small id="{text.identifier}" class="text-primary someclass">
+            sometext
+        </small>
     ''')
     assert actual == expected