Foundations
Container
Container settings control the maximum content width and side spacing. Choose the tab that matches your starter.
Container token
Bootstrap container width is controlled in assets/css/core.css.
| Item | Token / Class | Value |
|---|---|---|
| Container Width | --kf-container-width | 1600px |
Responsive side spacing
Container side spacing changes by breakpoint so content stays readable across screen sizes.
| Screen | Breakpoint | Container Width |
|---|---|---|
| Large Screens | Default | calc(100% - 140px) |
| Tablet | @media (max-width: 1199.98px) | calc(100% - 80px) |
| Mobile | @media (max-width: 767.98px) | calc(100% - 16px) |
Customize container
Update --kf-container-width or the responsive container width rules in assets/css/core.css.
Container token
Tailwind container width is defined in src/assets/css/input.css inside the @theme block.
| Item | Token / Class | Value |
|---|---|---|
| Container Width | --container-kf-container-width | 1600px |
Responsive side spacing
Container side spacing changes by breakpoint so content stays readable across screen sizes.
| Screen | Utility | Container Width |
|---|---|---|
| Large Screens | xl:w-[calc(100%-140px)] | calc(100% - 140px) |
| Tablet | md:w-[calc(100%-80px)] | calc(100% - 80px) |
| Mobile | w-[calc(100%-16px)] | calc(100% - 16px) |
Customize container
Update the container token or .container utility in src/assets/css/input.css, then run npm run watch to regenerate output.css.