CSS reference - Bifrost

React CSS

Inline

Go to top

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.

HTML

<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

Custom gap

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

HTML

<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

Vertical alignment

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

The default value is set to start:

HTML

<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:

HTML

<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:

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

Stretch

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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

Sandbox

Open Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css">
<link rel="stylesheet" href="styles.css">

<div class="bf-page-padding bfl-grid">
  <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">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">
      .bf-inline-stretch
    </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">.bf-inline-space</div>
  </div>
</div>