Container

Container Width

The main container width is controlled by this variable:

Increase this value for wider layouts or reduce it for a more compact website.

How Bootstrap Containers Work

KitFront applies the same maximum width to all Bootstrap container classes, then uses calc() to keep consistent spacing from the left and right edges of the screen.

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: var(--kf-container-width);
  width: calc(100% - 140px);
}

Responsive Side Spacing

The container side spacing changes at smaller breakpoints so content remains comfortable to read across all screen sizes.

@media (max-width: 1199.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    width: calc(100% - 80px);
  }
}

@media (max-width: 767.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    width: calc(100% - 16px);
  }
}

Using Your Own Container Settings

You can update --kf-container-width or adjust the responsive width values inside assets/css/core.css to match your project layout.

If your project requires Bootstrap's default container behavior, you can remove or modify the KitFront container override.

Tailwind Container

Tailwind sections use the Tailwind starter setup instead of Bootstrap container classes. The container behavior is handled through Tailwind utility classes and starter styles.

How Tailwind Containers Work

In Tailwind sections, layout width and side spacing are usually handled with utility classes such as max-w-*, mx-auto, and responsive padding classes.

<section class="kf-section">
  <div class="mx-auto max-w-[1600px] px-4 md:px-10">
    ...
  </div>
</section>

Responsive Side Spacing

Tailwind uses responsive utility classes to control side spacing at different screen sizes.

Using Your Own Container Settings

You can adjust Tailwind container width and side spacing directly inside the section markup or in the Tailwind starter styles if you want a project-wide container system.