bootstrap_five_layouts-1.0.x-dev/modules/bootstrap_five_layouts_css_loader/config/install/bootstrap_five_layouts_css_loader.bootstrap-grid-classes.yml

metadata:
  title: "Bootstrap5 Grid Classes"
  version: "5.3"
  description: "Bootstrap5 Layouts CSS Loader class lists for responsive grid"
  total_classes: 128
  categories:
    - "Container"
    - "Row"
    - "Column"
    - "Row Columns"
    - "Offset"
    - "Gutter"
    - "Gutter X"
    - "Gutter Y"
bootstrap_grid_classes:
  containers:
    - class_name: "container"
      category: "Container"
      breakpoint: "All"
      description: "Responsive fixed-width container"
      width: "Variable max-width"
    - class_name: "container-fluid"
      category: "Container"
      breakpoint: "All"
      description: "Full-width container"
      width: "100%"
    - class_name: "container-sm"
      category: "Container"
      breakpoint: "Small (≥576px)"
      description: "Container with small breakpoint max-width"
      width: "540px max"
    - class_name: "container-md"
      category: "Container"
      breakpoint: "Medium (≥768px)"
      description: "Container with medium breakpoint max-width"
      width: "720px max"
    - class_name: "container-lg"
      category: "Container"
      breakpoint: "Large (≥992px)"
      description: "Container with large breakpoint max-width"
      width: "960px max"
    - class_name: "container-xl"
      category: "Container"
      breakpoint: "Extra Large (≥1200px)"
      description: "Container with extra large breakpoint max-width"
      width: "1140px max"
    - class_name: "container-xxl"
      category: "Container"
      breakpoint: "Extra Extra Large (≥1400px)"
      description: "Container with extra extra large breakpoint max-width"
      width: "1320px max"

  rows:
    - class_name: "row"
      category: "Row"
      breakpoint: "All"
      description: "Creates a flex row for columns"
      width: "100%"

  columns:
    xs:
      breakpoint: "Extra Small (≥0px)"
      classes:
        - class_name: "col"
          category: "Column"
          breakpoint: "All"
          description: "Auto-sizing column"
          width: "Flex: 1 0 0"
        - class_name: "col-auto"
          category: "Column"
          breakpoint: "All"
          description: "Auto-width column"
          width: "Auto width"
        - class_name: "col-1"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "8.33%"
        - class_name: "col-2"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "16.67%"
        - class_name: "col-3"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "25%"
        - class_name: "col-4"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "33.33%"
        - class_name: "col-5"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "41.67%"
        - class_name: "col-6"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "50%"
        - class_name: "col-7"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "58.33%"
        - class_name: "col-8"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "66.67%"
        - class_name: "col-9"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "75%"
        - class_name: "col-10"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "83.33%"
        - class_name: "col-11"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "91.67%"
        - class_name: "col-12"
          category: "Column"
          breakpoint: "All"
          description: "Fixed width column"
          width: "100%"

    sm:
      breakpoint: "Small (≥576px)"
      classes:
        - class_name: "col-sm"
          category: "Column"
          description: "Auto-sizing column on small screens and up"
          width: "Flex: 1 0 0"
        - class_name: "col-sm-auto"
          category: "Column"
          description: "Auto-width column on small screens and up"
          width: "Auto width"
        - class_name: "col-sm-1"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "8.33%"
        - class_name: "col-sm-2"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "16.67%"
        - class_name: "col-sm-3"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "25%"
        - class_name: "col-sm-4"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "33.33%"
        - class_name: "col-sm-5"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "41.67%"
        - class_name: "col-sm-6"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "50%"
        - class_name: "col-sm-7"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "58.33%"
        - class_name: "col-sm-8"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "66.67%"
        - class_name: "col-sm-9"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "75%"
        - class_name: "col-sm-10"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "83.33%"
        - class_name: "col-sm-11"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "91.67%"
        - class_name: "col-sm-12"
          category: "Column"
          description: "Fixed width column on small screens and up"
          width: "100%"

  row_columns:
    xs:
      - class_name: "row-cols-auto"
        category: "Row Columns"
        breakpoint: "All"
        description: "Auto-sizing columns in row"
        width: "Auto width"
      - class_name: "row-cols-1"
        category: "Row Columns"
        breakpoint: "All"
        description: "1 column per row"
        width: "100%"
      - class_name: "row-cols-2"
        category: "Row Columns"
        breakpoint: "All"
        description: "2 columns per row"
        width: "50%"
      - class_name: "row-cols-3"
        category: "Row Columns"
        breakpoint: "All"
        description: "3 columns per row"
        width: "33.33%"
      - class_name: "row-cols-4"
        category: "Row Columns"
        breakpoint: "All"
        description: "4 columns per row"
        width: "25%"
      - class_name: "row-cols-5"
        category: "Row Columns"
        breakpoint: "All"
        description: "5 columns per row"
        width: "20%"
      - class_name: "row-cols-6"
        category: "Row Columns"
        breakpoint: "All"
        description: "6 columns per row"
        width: "16.67%"

  offsets:
    xs:
      - class_name: "offset-1"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 1 position to the right"
        width: "8.33%"
      - class_name: "offset-2"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 2 positions to the right"
        width: "16.67%"
      - class_name: "offset-3"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 3 positions to the right"
        width: "25%"
      - class_name: "offset-4"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 4 positions to the right"
        width: "33.33%"
      - class_name: "offset-5"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 5 positions to the right"
        width: "41.67%"
      - class_name: "offset-6"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 6 positions to the right"
        width: "50%"
      - class_name: "offset-7"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 7 positions to the right"
        width: "58.33%"
      - class_name: "offset-8"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 8 positions to the right"
        width: "66.67%"
      - class_name: "offset-9"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 9 positions to the right"
        width: "75%"
      - class_name: "offset-10"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 10 positions to the right"
        width: "83.33%"
      - class_name: "offset-11"
        category: "Offset"
        breakpoint: "All"
        description: "Push column 11 positions to the right"
        width: "91.67%"

  gutters:
    xs:
      - class_name: "g-0"
        category: "Gutter"
        breakpoint: "All"
        description: "No gap/gutter spacing (both x and y axes)"
        width: "0"
      - class_name: "g-1"
        category: "Gutter"
        breakpoint: "All"
        description: "Small gap/gutter spacing (both x and y axes)"
        width: "0.25rem"
      - class_name: "g-2"
        category: "Gutter"
        breakpoint: "All"
        description: "Medium gap/gutter spacing (both x and y axes)"
        width: "0.5rem"
      - class_name: "g-3"
        category: "Gutter"
        breakpoint: "All"
        description: "Default gap/gutter spacing (both x and y axes)"
        width: "1rem"
      - class_name: "g-4"
        category: "Gutter"
        breakpoint: "All"
        description: "Large gap/gutter spacing (both x and y axes)"
        width: "1.5rem"
      - class_name: "g-5"
        category: "Gutter"
        breakpoint: "All"
        description: "Extra large gap/gutter spacing (both x and y axes)"
        width: "3rem"

    horizontal:
      - class_name: "gx-0"
        category: "Gutter X"
        breakpoint: "All"
        description: "No horizontal gap/gutter spacing"
        width: "0"
      - class_name: "gx-1"
        category: "Gutter X"
        breakpoint: "All"
        description: "Small horizontal gap/gutter spacing"
        width: "0.25rem"
      - class_name: "gx-2"
        category: "Gutter X"
        breakpoint: "All"
        description: "Medium horizontal gap/gutter spacing"
        width: "0.5rem"
      - class_name: "gx-3"
        category: "Gutter X"
        breakpoint: "All"
        description: "Default horizontal gap/gutter spacing"
        width: "1rem"
      - class_name: "gx-4"
        category: "Gutter X"
        breakpoint: "All"
        description: "Large horizontal gap/gutter spacing"
        width: "1.5rem"
      - class_name: "gx-5"
        category: "Gutter X"
        breakpoint: "All"
        description: "Extra large horizontal gap/gutter spacing"
        width: "3rem"

    vertical:
      - class_name: "gy-0"
        category: "Gutter Y"
        breakpoint: "All"
        description: "No vertical gap/gutter spacing"
        width: "0"
      - class_name: "gy-1"
        category: "Gutter Y"
        breakpoint: "All"
        description: "Small vertical gap/gutter spacing"
        width: "0.25rem"
      - class_name: "gy-2"
        category: "Gutter Y"
        breakpoint: "All"
        description: "Medium vertical gap/gutter spacing"
        width: "0.5rem"
      - class_name: "gy-3"
        category: "Gutter Y"
        breakpoint: "All"
        description: "Default vertical gap/gutter spacing"
        width: "1rem"
      - class_name: "gy-4"
        category: "Gutter Y"
        breakpoint: "All"
        description: "Large vertical gap/gutter spacing"
        width: "1.5rem"
      - class_name: "gy-5"
        category: "Gutter Y"
        breakpoint: "All"
        description: "Extra large vertical gap/gutter spacing"
        width: "3rem"

  breakpoints:
    - name: "XS"
      min_width: "0px"
      prefix: ""
    - name: "Small"
      min_width: "576px"
      prefix: "sm"
    - name: "Medium"
      min_width: "768px"
      prefix: "md"
    - name: "Large"
      min_width: "992px"
      prefix: "lg"
    - name: "Extra Large"
      min_width: "1200px"
      prefix: "xl"
    - name: "Extra Extra Large"
      min_width: "1400px"
      prefix: "xxl"

  # Responsive variants for all categories
  responsive_variants:
    # Medium breakpoint columns
    medium_columns:
      breakpoint: "Medium (≥768px)"
      classes:
        - class_name: "col-md"
          category: "Column"
          description: "Auto-sizing column on medium screens and up"
          width: "Flex: 1 0 0"
        - class_name: "col-md-auto"
          category: "Column"
          description: "Auto-width column on medium screens and up"
          width: "Auto width"
        - class_name: "col-md-1"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "8.33%"
        - class_name: "col-md-2"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "16.67%"
        - class_name: "col-md-3"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "25%"
        - class_name: "col-md-4"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "33.33%"
        - class_name: "col-md-5"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "41.67%"
        - class_name: "col-md-6"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "50%"
        - class_name: "col-md-7"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "58.33%"
        - class_name: "col-md-8"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "66.67%"
        - class_name: "col-md-9"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "75%"
        - class_name: "col-md-10"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "83.33%"
        - class_name: "col-md-11"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "91.67%"
        - class_name: "col-md-12"
          category: "Column"
          description: "Fixed width column on medium screens and up"
          width: "100%"

    # Large breakpoint columns
    large_columns:
      breakpoint: "Large (≥992px)"
      classes:
        - class_name: "col-lg"
          category: "Column"
          description: "Auto-sizing column on large screens and up"
          width: "Flex: 1 0 0"
        - class_name: "col-lg-auto"
          category: "Column"
          description: "Auto-width column on large screens and up"
          width: "Auto width"
        - class_name: "col-lg-1"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "8.33%"
        - class_name: "col-lg-2"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "16.67%"
        - class_name: "col-lg-3"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "25%"
        - class_name: "col-lg-4"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "33.33%"
        - class_name: "col-lg-5"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "41.67%"
        - class_name: "col-lg-6"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "50%"
        - class_name: "col-lg-7"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "58.33%"
        - class_name: "col-lg-8"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "66.67%"
        - class_name: "col-lg-9"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "75%"
        - class_name: "col-lg-10"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "83.33%"
        - class_name: "col-lg-11"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "91.67%"
        - class_name: "col-lg-12"
          category: "Column"
          description: "Fixed width column on large screens and up"
          width: "100%"

    # Extra Large breakpoint columns
    xl_columns:
      breakpoint: "Extra Large (≥1200px)"
      classes:
        - class_name: "col-xl"
          category: "Column"
          description: "Auto-sizing column on extra large screens and up"
          width: "Flex: 1 0 0"
        - class_name: "col-xl-auto"
          category: "Column"
          description: "Auto-width column on extra large screens and up"
          width: "Auto width"
        - class_name: "col-xl-1"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "8.33%"
        - class_name: "col-xl-2"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "16.67%"
        - class_name: "col-xl-3"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "25%"
        - class_name: "col-xl-4"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "33.33%"
        - class_name: "col-xl-5"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "41.67%"
        - class_name: "col-xl-6"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "50%"
        - class_name: "col-xl-7"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "58.33%"
        - class_name: "col-xl-8"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "66.67%"
        - class_name: "col-xl-9"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "75%"
        - class_name: "col-xl-10"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "83.33%"
        - class_name: "col-xl-11"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "91.67%"
        - class_name: "col-xl-12"
          category: "Column"
          description: "Fixed width column on extra large screens and up"
          width: "100%"

    # Extra Extra Large breakpoint columns
    xxl_columns:
      breakpoint: "Extra Extra Large (≥1400px)"
      classes:
        - class_name: "col-xxl"
          category: "Column"
          description: "Auto-sizing column on extra extra large screens and up"
          width: "Flex: 1 0 0"
        - class_name: "col-xxl-auto"
          category: "Column"
          description: "Auto-width column on extra extra large screens and up"
          width: "Auto width"
        - class_name: "col-xxl-1"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "8.33%"
        - class_name: "col-xxl-2"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "16.67%"
        - class_name: "col-xxl-3"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "25%"
        - class_name: "col-xxl-4"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "33.33%"
        - class_name: "col-xxl-5"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "41.67%"
        - class_name: "col-xxl-6"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "50%"
        - class_name: "col-xxl-7"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "58.33%"
        - class_name: "col-xxl-8"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "66.67%"
        - class_name: "col-xxl-9"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "75%"
        - class_name: "col-xxl-10"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "83.33%"
        - class_name: "col-xxl-11"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "91.67%"
        - class_name: "col-xxl-12"
          category: "Column"
          description: "Fixed width column on extra extra large screens and up"
          width: "100%"