- Updated form validation to not validate when form[novalidate]

- Updated tooltips to go multiline, max width of 250px.
-Updated card footer, to remove the margin from the last element if they are buttons or groups when in the footer
- Made container, grid, and row classes to have a parent class, so they will not effect rest of page. This will only work if you use that style css.

- Added tabs
- Added floating labels
- Added responsive nav hamburger menu

Let me know if you find any bugs or have ideas for improvements!

scss/layout/_container.scss

@@ -6,8 +6,8 @@
    * Container
    */
 
-  .container,
-  .container-fluid {
+  #{$parent-selector} .container,
+  #{$parent-selector} .container-fluid {
     width: 100%;
     margin-right: auto;
     margin-left: auto;
@@ -15,7 +15,7 @@
     padding-left: var(#{$css-var-prefix}spacing);
   }
 
-  .container {
+  #{$parent-selector} .container {
     $first-breakpoint: true;
     @each $key, $values in $breakpoints {
       @if $values {

scss/layout/_grid.scss

@@ -7,7 +7,7 @@
    * Minimal grid system with auto-layout columns
    */
 
-  .grid {
+  #{$parent-selector} .grid {
     grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
     grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
     display: grid;

scss/layout/_row.scss

@@ -9,8 +9,8 @@
   $helper-cols: "";
   $helper-offset: "";
   /*--- CSS Grid ---*/
-  .row-fluid,
-  .row {
+  #{$parent-selector} .row-fluid,
+  #{$parent-selector} .row {
     display: grid;
     grid-template-columns: repeat($row-columns, 1fr);
     gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap);
@@ -26,29 +26,29 @@
     > [class*="col"] > *,
     > [class|="col"] > *,
     > [class~="col"] > * {
-      margin: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5) auto;
+      margin: var(#{$css-var-prefix}block-spacing-vertical) auto;
     }
   }
-  .row {
+  #{$parent-selector} .row {
     max-width: map.get(map.get($breakpoints, "xl"), "viewport");
     margin: 0 auto;
   }
   /* Defining columns spans and offsets */
   // Loop through all column spans and define the .grid-column-end number
   @for $col from 1 through $row-columns {
-    .col-#{$col} {
+    #{$parent-selector} .col-#{$col} {
       grid-column-end: span $col;
     }
     @if $col == 1 {
       $helper-cols: ".col-1";
     } @else {
-      $helper-cols: #{$helper-cols} + ", .col-" + #{$col};
+      $helper-cols: #{$helper-cols} + ", #{$parent-selector} .col-" + #{$col};
     }
   }
 
   // Loop through all column offsets and define the .grid-column-start number
   @for $offset from 0 through $row-columns - 1 {
-    .offset-#{$offset} {
+    #{$parent-selector} .offset-#{$offset} {
       grid-column-start: $offset + 1;
     }
     @if $offset == 0 {
@@ -65,15 +65,19 @@
     @if $values {
       @media (min-width: map.get($values, "viewport")) {
         @for $col from 1 through $row-columns {
-          .col-#{$breakpoint}-#{$col} {
+          #{$parent-selector} .col-#{$breakpoint}-#{$col} {
             grid-column-end: span $col;
           }
           @if ($breakpoint != "sm") {
-            $helper-cols: #{$helper-cols} + ", .col-" + #{$breakpoint} + "-" + #{$col};
+            $helper-cols: #{$helper-cols} +
+              ", #{$parent-selector} .col-" +
+              #{$breakpoint} +
+              "-" +
+              #{$col};
           }
         }
         @for $offset from 0 through $row-columns - 1 {
-          .offset-#{$breakpoint}-#{$offset} {
+          #{$parent-selector} .offset-#{$breakpoint}-#{$offset} {
             grid-column-start: $offset + 1;
           }
           @if ($breakpoint != "sm") {