Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.0.0
@intility/bifrost-react@6.1.1
@intility/bifrost-react-datepicker@6.0.1
@intility/bifrost-react-select@6.0.0
/
/
/
Inline layout

Inline layout

Also see /react/inline
React Inline component

.bf-inline is a CSS helper which uses display: flex to place items on a row.

By default, child elements of .bf-inline will be displayed top-aligned to the left, with a 12px gap.

Elements will wrap to next line if there's not enough room on one line.

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
Element
Element

Custom gap

Control spacing with the gap property (maybe in an external css file?)

<div class="bf-inline" style="gap: 40px">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

<div class="bf-inline" style="gap: 40px">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
Element
Element

Vertical alignment

Since we're using flexbox, you can vertically align items using align-items.

The default value is set to start:

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">
    Element
    <br />
    with
    <br />
    multiple
    <br />
    lines
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">
    Element
    <br />
    with
    <br />
    multiple
    <br />
    lines
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
Element
with
multiple
lines
Element

With align-items: center:

<div class="bf-inline" style="align-items: center">
  <div class="bfc-base-3-bg bf-padding">
    Element
    <br />
    with
    <br />
    multiple
    <br />
    lines
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

<div class="bf-inline" style="align-items: center">
  <div class="bfc-base-3-bg bf-padding">
    Element
    <br />
    with
    <br />
    multiple
    <br />
    lines
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
Element
with
multiple
lines
Element

With align-items: end:

<div class="bf-inline" style="align-items: end">
  <div class="bfc-base-3-bg bf-padding">
    Element
    <br />
    with
    <br />
    multiple
    <br />
    lines
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

<div class="bf-inline" style="align-items: end">
  <div class="bfc-base-3-bg bf-padding">
    Element
    <br />
    with
    <br />
    multiple
    <br />
    lines
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
Element
with
multiple
lines
Element

Space

Create space on the left-hand side of an inline element with .bf-inline-space

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
</div>
Element
Element
<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
Element
Element
Element
<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
</div>
Element
Element
Element
<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
</div>
Element
Element
Element
<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding bf-inline-space">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
Element
Element

Stretch

The .bf-inline-stretch class will make an element take up available width.

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
Stretched element
Element
<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
</div>
Element
Stretched element 
<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
Element
Stretched element
Element
<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
</div>

<div class="bf-inline">
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
  <div class="bfc-base-3-bg bf-padding bf-inline-stretch">
    Stretched element
  </div>
</div>
Stretched element
Stretched element
Stretched element