Feature Boxes

Feature Boxes

Feature boxes present an icon (or number/image) alongside a heading and short description, ideal for service lists, benefit grids, and step outlines. The .feature-box wrapper holds an .fbox-icon and an .fbox-content block, and a set of fbox-* modifiers controls layout, icon shape, and hover effects.

Structure

• .feature-box : the wrapper. Icon sits left of the content by default.
• .fbox-icon : the icon holder. Contains an <a> wrapping an <i> (icon) or plain number.
• .fbox-content : holds the <h3> heading and <p> description. An optional .subtitle <span> can follow the heading.
• .fbox-center : centers the icon above the content.
• .fbox-sm, .fbox-lg, .fbox-xl : icon size modifiers.
• .fbox-plain : icon only, no background or border.
• .fbox-border : outlined icon shape.
• .fbox-outline : thinner outlined variant.
• .fbox-rounded : rounded icon shape.
• .fbox-bg : filled icon background.
• .fbox-dark / .fbox-light : dark or light icon color scheme.
• .fbox-effect : adds a hover animation to the icon.
• .fbox-media : swaps the icon for an image element.

Markup

<div class="feature-box fbox-effect">
    <div class="fbox-icon">
        <a href="#"><i class="bi-display i-alt"></i></a>
    </div>
    <div class="fbox-content">
        <h3>Responsive Layout</h3>
        <p>Powerful layout with responsive functionality that adapts to any screen size.</p>
    </div>
</div>

Variants

Centered with background icon

<div class="feature-box fbox-center fbox-bg fbox-border fbox-effect">
    <div class="fbox-icon">
        <a href="#"><i class="bi-command"></i></a>
    </div>
    <div class="fbox-content">
        <h3>Easy to Customize</h3>
        <p>Clean, well-structured markup that is simple to edit and extend.</p>
    </div>
</div>

Numbered step box

Drop a number inside the icon <i> instead of an icon glyph, and add a .subtitle after the heading.

<div class="feature-box fbox-center fbox-bg fbox-outline fbox-dark fbox-effect">
    <div class="fbox-icon">
        <a href="#"><i class="i-alt">2</i></a>
    </div>
    <div class="fbox-content">
        <h3>Enter Billing Info<span class="subtitle">Step 2</span></h3>
    </div>
</div>

Large plain icon

<div class="feature-box fbox-lg fbox-plain fbox-dark">
    <div class="fbox-icon">
        <a href="#"><i class="bi-gem"></i></a>
    </div>
    <div class="fbox-content">
        <h3>Premium Quality</h3>
        <p>Crafted with attention to every detail.</p>
    </div>
</div>

Tips

• Wrap each feature box in a Bootstrap grid column (for example col-sm-6 col-lg-4) to build responsive rows.
• Combine .fbox-center with .fbox-bg or .fbox-border for the classic centered icon-badge card look.
• .fbox-effect only animates the icon, so it works with any size or color variant.