This page documents the classes and content patterns that are intentionally supported by the current HUFLAW WebSite/Combo Theme. It is written for authors creating custom Pages and structured HTML content.

Use the classes on this page as your safe building system. If a Bootstrap class is not listed here, treat it as legacy-compatible only, not guaranteed for future use.

Page Contents

1. Authoring Principles

Use the skin-defined classes first

Prefer classes documented on this page. These are the classes that the HUFLAW skin defines directly.

Use Bootstrap extras carefully

External Bootstrap is still loaded for legacy JetTheme support, but this guide only guarantees the classes explicitly supported by the skin.

2. Breakpoints

Breakpoint Meaning Examples in Theme
Default Mobile-first base styles All base classes apply here first
576px+ Small screens and up .row-cols-sm-2, .col-sm-6, .d-sm-flex
992px+ Desktop and large tablets .col-lg-4, .col-lg-8, .row-cols-lg-3, .d-lg-flex
1200px+ Wider container cap Container max width increases

3. Layout and Grid

Class Behavior Typical Use
.container Centered content wrapper with theme width Page sections, grouped content
.row Flex row with wrap and gutters Columns and card grids
.row-cols-1 Single column layout Mobile stacks
.row-cols-sm-2 Two columns from 576px+ Simple two-card grids
.row-cols-lg-3 Three columns from 992px+ Desktop card grids
.col-sm-6 50% width from 576px+ Two-column article/page layouts
.col-lg-4 33.333% width from 992px+ Sidebar or third-column blocks
.col-lg-8 66.666% width from 992px+ Main content area next to sidebar 
<section class="row align-items-stretch">
  <div class="col-lg-8 mb-4">Main content</div>
  <aside class="col-lg-4 mb-4">Sidebar content</aside>
</section>

4. Display and Positioning

Class Behavior
.d-noneHide element
.d-blockDisplay block
.d-flexDisplay flex
.d-inline-flexDisplay inline-flex
.d-inline-blockDisplay inline-block
.d-sm-flexDisplay flex from 576px+
.d-lg-flexDisplay flex from 992px+
.position-relativeRelative positioning context
.position-fixedFixed positioning
.position-stickySticky positioning
.sticky-topSticky top helper
.top-0, .top-50, .start-0, .end-0Quick offset helpers

5. Spacing

Margin helpers

.m-0, .mt-2, .mb-0, .mb-2, .mb-3, .mb-4, .mb-5

Use these to control vertical rhythm between sections, cards, headings, and media.

Padding helpers

.p-1, .p-2, .p-3, .p-4, .pt-4, .pb-4, .pb-5, .px-3, .px-4, .py-2, .py-3, .py-5

Use inside bordered cards, callout boxes, and content blocks.

6. Typography and Text

Class Behavior Use
.text-centerCenter align textSection intros, hero blocks
.text-nowrapPrevent wrappingShort labels and meta items
.text-breakBreak long strings safelyPage content, URLs, technical text
.text-secondaryMuted text colorMeta, explanatory notes
.text-lightLight textDark backgrounds, footer contexts
.text-resetInherit parent colorNested links and wrappers
.fs-2Large display sizeFeature subheads
.fs-5Medium heading sizeCard headings
.fs-6Base heading sizeCompact headings
.fs-7, .fs-8, .fs-9Smaller text sizesCaptions, notes, meta
.fw-lightLight weightSubtle headings
.fw-boldBold weightEmphasis and labels

7. Images, Ratios, and Media

Class Behavior Best Use
.ratioCreates a fixed media boxImage and video wrappers
.ratio-1x1Square ratioPortraits, logos
.ratio-4x34:3 ratioStandard article and reference images
.ratio-5x45:4 ratioAlternative card media
.ratio-16x9Widescreen ratioVideo embeds, wide hero art
.ratio-21x9Ultra-wide ratioPanoramic banners
.object-coverFill ratio box by croppingCard images, hero images
.overflow-hiddenHide overflowRounded media frames
 
<div class="ratio ratio-4x3 rounded overflow-hidden jt-bg-light">
  <img class="object-cover" src="IMAGE-URL" alt="Description">
</div>

8. Buttons and Forms

Class Behavior Use
.btnBase button stylingGeneral interactive elements
.jt-btn-primaryPrimary theme buttonMain call to action
.jt-btn-lightSoft/light buttonSecondary actions
.jt-btn-outline-primaryOutlined primary buttonAlternative CTA
.form-controlStyled text inputs and fieldsSearch, forms, filters

Button example

Primary Light Outline

Buttons inherit the theme colors and rounded styling.

Form example

9. Theme Content Modules

Selector Purpose Author Guidance
.feature-posts Homepage featured article module Do not reuse for ordinary page layouts unless you want homepage article styling.
#blog-content Latest news/archive card grid Treat as theme-owned.
#toc-post Table of contents module for posts Use only for TOC behavior.
#sidebar Theme sidebar area Not a generic page column.
#footer Footer section styling Theme-owned only.
#socket Bottom socket styling Theme-owned only.
.share-button and related share selectors Share links styled as links, not buttons Use only for share action UI.

10. Recommended Page Patterns

Pattern A: Hero + Two Columns

<section class="mb-5">
  <div class="ratio ratio-4x3 rounded overflow-hidden jt-bg-light mb-4">
    <img class="object-cover" src="IMAGE-URL" alt="Description">
  </div>
  <div class="row align-items-stretch">
    <div class="col-lg-8 mb-4">Main content</div>
    <div class="col-lg-4 mb-4">Sidebar notes</div>
  </div>
</section>

Pattern B: Three Card Grid

<section class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
  <div class="mb-4"><div class="border rounded shadow-sm p-4 h-100">Card 1</div></div>
  <div class="mb-4"><div class="border rounded shadow-sm p-4 h-100">Card 2</div></div>
  <div class="mb-4"><div class="border rounded shadow-sm p-4 h-100">Card 3</div></div>
</section>

Pattern C: Reference Table

<section class="mb-5">
  <h2 class="mb-3">Reference Table</h2>
  <table>
    <thead>
      <tr><th>Topic</th><th>Status</th><th>Note</th></tr>
    </thead>
    <tbody>
      <tr><td>Example</td><td>Ready</td><td>Theme-styled table</td></tr>
    </tbody>
  </table>
</section>

11. Live Examples

Example: Featured Media + Call to Action

HUF LAW Glossary Image

A Theme-Safe Media Block

This block uses a 4:3 ratio, rounded corners, controlled overflow, and a primary button without relying on undocumented framework classes.

Primary action

Card pattern

Column One

Good for practice areas, resources, or glossary links.

Card pattern

Column Two

Uses only supported grid, spacing, and border utilities.

Card pattern

Column Three

Desktop becomes three columns automatically at 992px+.

12. Do and Do Not

Do

  • Use .row and .col-* for page columns.
  • Use .ratio-4x3 for article and reference images.
  • Use .border rounded shadow-sm p-4 for card-like content blocks.
  • Use .text-secondary for notes and metadata.
  • Use .jt-btn-primary for main calls to action.

Do Not

  • Do not build important pages around undocumented Bootstrap utility classes.
  • Do not reuse #footer, #socket, or #sidebar as generic page wrappers.
  • Do not assume every Bootstrap 5 class is permanent just because the CDN file is loaded.
  • Do not rely on ad hoc inline styles when a supported utility class already exists.

Maintenance Note

When the theme changes, update this page only after confirming the class still exists in the skin. This guide should track the theme, not generic framework documentation.