Layout

Use layout utilities to quickly add layout specific stylings.

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Enable flex behaviors

<div className="example-block">
    <div className="hf-bg-info-light hf-text-dark hf-flex">I am a Flex container.</div>
</div>

Direction

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1">Item 2</div>
        <div className="hf-bg-info mr-1">Item 3</div>
    </div>
</div>

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light hf-flex flex-column">
        <div className="hf-bg-info mb-1">Item 1</div>
        <div className="hf-bg-info mb-1">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
</div>

Gap

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row flex-gap">
        <div className="hf-bg-info">Item 1</div>
        <div className="hf-bg-info">Item 2</div>
    </div>
</div>

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row flex-gap-lg">
        <div className="hf-bg-info">Item 1</div>
        <div className="hf-bg-info">Item 2</div>
    </div>
</div>

Grow

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row">
        <div className="hf-bg-info mr-1 flex-1">Item .flex-1</div>
        <div className="hf-bg-info mr-1 flex-2">Item .flex-2</div>
        <div className="hf-bg-info flex-3">Item .flex-3</div>
    </div>
</div>

Shrink

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row">
        <div className="hf-bg-info mr-1 flex-1-shrink">Item .flex-1-shrink</div>
        <div className="hf-bg-info mr-1 flex-2-shrink">Item .flex-2-shrink</div>
        <div className="hf-bg-info flex-3-shrink">Item .flex-3-shrink</div>
    </div>
</div>

Auto

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light hf-flex">
        <div className="hf-bg-info mr-1 flex-1-auto">Item .flex-1-auto</div>
        <div className="hf-bg-info mr-1 flex-2-auto">Item .flex-2-auto</div>
        <div className="hf-bg-info flex-3-auto">Item .flex-3-auto</div>
    </div>
</div>

Justify Content

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row justify-content-start">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row justify-content-end">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row justify-content-center">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
</div>

Align Items

<div className="example-block align">
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row align-items-start">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row align-items-end">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row align-items-center">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
</div>

Align Self

<div className="example-block align">
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1 align-self-start">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1 align-self-end">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
    <div className="hf-bg-info-light hf-text-light hf-flex flex-row">
        <div className="hf-bg-info mr-1">Item 1</div>
        <div className="hf-bg-info mr-1 align-self-center">Item 2</div>
        <div className="hf-bg-info">Item 3</div>
    </div>
</div>

Float

Toggle floats on any element, across any breakpoint, using the responsive float utilities.

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light p-0 float">
        <div className="hf-bg-info hf-float-left">Item</div>
    </div>
    <div className="hf-bg-info-light hf-text-light p-0 float">
        <div className="hf-bg-info hf-float-right">Item</div>
    </div>
</div>

Width

Set element to full width.

<div className="example-block">
    <div className="hf-bg-info-light hf-text-light p-1">
        <div className="hf-bg-info hf-full-width">Item</div>
    </div>
</div>

Display

Quickly toggle the display value of components.

<div class="hf-hide"></div>
<div class="hf-show"></div>

Hide elements if the Form has only one column (mobile devices).

<div className="example-block">
    <div className="hf-bg-info-light hf-text-dark hf-hide-portrait">Hidden at portrait</div>
</div>