Skip to main content
Version: 9.6

Layout

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​

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

Direction​

Result
Loading...
Live Editor
<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>
Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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>
Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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.

Result
Loading...
Live Editor
<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>

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).

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