Section Structure

Common section class

Standard Bootstrap sections use .kf-section from assets/css/core.css for vertical spacing and clipped horizontal overflow.

<section class="kf-section features-01">
  ...
</section>

Section spacing

Bootstrap section spacing comes from CSS variables in assets/css/core.css. Each breakpoint has its own token.

--kf-section-padding-large-desktop: 100px;
--kf-section-padding-desktop: 80px;
--kf-section-padding-tablet: 65px;
--kf-section-padding-mobile: 50px;

Change these tokens to update section spacing across the Bootstrap starter.

Section-specific class

Each Bootstrap section also has its own class, such as features-01, pricing-03, or testimonials-06. Paste the matching section CSS into assets/css/style.css.

Background helpers

Add a background helper class to the section element when you want to change its background quickly.

<section class="kf-section features-01 kf-bg-light-1">
  ...
</section>

<section class="kf-section features-01 kf-bg-dark-1">
  ...
</section>

These helpers use color variables from assets/css/core.css, so token changes update every section that uses them.

Common section class

Tailwind sections use .kf-section from src/assets/css/input.css for responsive vertical spacing and clipped horizontal overflow.

<section class="kf-section">
  ...
</section>

Section spacing

In the Tailwind starter, .kf-section is defined inside @layer utilities with Tailwind utility classes.

.kf-section {
  @apply py-12.5 md:py-16.25 lg:py-20 2xl:py-25 overflow-x-clip;
}

Change these utilities in src/assets/css/input.css to update section spacing across Tailwind sections.

Section-specific classes

Tailwind sections are styled mostly with utility classes in the HTML. Some sections still include a section-specific class for JavaScript or unique targeting.

Background utilities

Tailwind sections use background and text utilities. Add or replace these classes on the section element to change color.

<section class="kf-section bg-kf-bg-light-1 text-kf-body-text">
  ...
</section>

<section class="kf-section bg-kf-bg-dark-1 text-white">
  ...
</section>

These utilities come from @theme tokens in src/assets/css/input.css.