Add BSContainer layout

bootstrap/src/jsMain/kotlin/com/stevdza/san/kotlinbs/components/BSNavBar.kt

@@ -2,7 +2,9 @@ package com.stevdza.san.kotlinbs.components
 
 import androidx.compose.runtime.Composable
 import com.stevdza.san.kotlinbs.forms.BSInput
+import com.stevdza.san.kotlinbs.layouts.BSContainer
 import com.stevdza.san.kotlinbs.models.BackgroundStyle
+import com.stevdza.san.kotlinbs.models.container.ContainerBehavior
 import com.stevdza.san.kotlinbs.models.navbar.*
 import com.varabyte.kobweb.compose.css.CSSLengthOrPercentageNumericValue
 import com.varabyte.kobweb.compose.css.Cursor
@@ -76,10 +78,10 @@ fun BSNavBar(
                 }
             }
     ) {
-        Div(
-            attrs = Modifier
+        BSContainer(
+            behavior = ContainerBehavior.Fluid,
+            modifier = Modifier
                 .padding(leftRight = horizontalPadding)
-                .classNames("container-fluid").toAttrs()
         ) {
             if (brand != null) {
                 A(

bootstrap/src/jsMain/kotlin/com/stevdza/san/kotlinbs/layouts/BSContainer.kt

@@ -0,0 +1,36 @@
+package com.stevdza.san.kotlinbs.layouts
+
+import androidx.compose.runtime.Composable
+import com.stevdza.san.kotlinbs.models.container.ContainerBehavior
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.classNames
+import com.varabyte.kobweb.compose.ui.toAttrs
+import org.jetbrains.compose.web.dom.Div
+
+/**
+ * Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given
+ * device or viewport.
+ *
+ * There are 3 possible container behaviors:
+ * - default: responsive, fixed-width container, meaning its max-width changes at each breakpoint
+ * - fluid: full width container, spanning the entire width of the viewport
+ * - responsive: allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which
+ *   we apply max-widths for each of the higher breakpoints
+ *
+ * @param behavior How the container resizes based on available width
+ * @param content Container's content
+ */
+@Composable
+fun BSContainer(
+    modifier: Modifier = Modifier,
+    behavior: ContainerBehavior = ContainerBehavior.Default,
+    content: @Composable () -> Unit
+) {
+    Div(
+        attrs = modifier
+            .classNames(behavior.className)
+            .toAttrs()
+    ) {
+        content()
+    }
+}

bootstrap/src/jsMain/kotlin/com/stevdza/san/kotlinbs/models/Breakpoint.kt

@@ -0,0 +1,9 @@
+package com.stevdza.san.kotlinbs.models
+
+enum class Breakpoint(val value: String) {
+    SM(value = "sm"),
+    MD(value = "md"),
+    LG(value = "lg"),
+    XL(value = "xl"),
+    XXL(value = "xxl"),
+}

bootstrap/src/jsMain/kotlin/com/stevdza/san/kotlinbs/models/container/ContainerBehavior.kt

@@ -0,0 +1,9 @@
+package com.stevdza.san.kotlinbs.models.container
+
+import com.stevdza.san.kotlinbs.models.Breakpoint
+
+sealed class ContainerBehavior(val className: String) {
+    data object Default : ContainerBehavior("container")
+    data object Fluid : ContainerBehavior("container-fluid")
+    data class Responsive(val breakpoint: Breakpoint) : ContainerBehavior("container-${breakpoint.value}")
+}