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
/
/
/
Container queries

Container queries

Notable container side effects

CSS classes

Bifrost supplies a set of CSS classes to show/hide elements based on a container element width.

  • .bf-container creates a container (inline-size)
  • .from-[size]-container (on a child element) will only be displayed when the container is wider than [size]
  • .to-[size]-container (on a child element) will only be displayed when the container is narrower than [size]

...where [size] can be one of: xs, small, medium, large, xl, or xxl:

Breakpoint names

Namexssmallmediumlargexlxxl
Container width300px600px960px1280px1600px1920px

Class names in use

Resize the demo preview box to see which elements are rendered at different container widths.

<del> elements are styled red in these demos:

Basic usage

<div class="bf-container">
  <div class="from-xs-container">xs</div>
  <del class="to-xs-container">xs</del>
  <div class="from-small-container">small</div>
  <del class="to-small-container">small</del>
  <div class="from-medium-container">medium</div>
  <del class="to-medium-container">medium</del>
  <div class="from-large-container">large</div>
  <del class="to-large-container">large</del>
  <div class="from-xl-container">xl</div>
  <del class="to-xl-container">xl</del>
  <div class="from-xxl-container">xxl</div>
  <del class="to-xxl-container">xxl</del>
</div>

<div class="bf-container">
  <div class="from-xs-container">xs</div>
  <del class="to-xs-container">xs</del>
  <div class="from-small-container">small</div>
  <del class="to-small-container">small</del>
  <div class="from-medium-container">medium</div>
  <del class="to-medium-container">medium</del>
  <div class="from-large-container">large</div>
  <del class="to-large-container">large</del>
  <div class="from-xl-container">xl</div>
  <del class="to-xl-container">xl</del>
  <div class="from-xxl-container">xxl</div>
  <del class="to-xxl-container">xxl</del>
</div>
xs
xs
small
small
medium
medium
large
large
xl
xl
xxl
xxl

Missing container

If from-[size]-container and to-[size]-container elements are not nested inside .bf-container, the class names won't do anything.

All elements below will always be visible regardless of parent or window width.

Also see /css/breakpoints
Use screen breakpoint classes instead
 
<div class="from-xs-container">xs</div>
<del class="to-xs-container">xs</del>
<div class="from-small-container">small</div>
<del class="to-small-container">small</del>
<div class="from-medium-container">medium</div>
<del class="to-medium-container">medium</del>
<div class="from-large-container">large</div>
<del class="to-large-container">large</del>
<div class="from-xl-container">xl</div>
<del class="to-xl-container">xl</del>
<div class="from-xxl-container">xxl</div>
<del class="to-xxl-container">xxl</del>

<div class="from-xs-container">xs</div>
<del class="to-xs-container">xs</del>
<div class="from-small-container">small</div>
<del class="to-small-container">small</del>
<div class="from-medium-container">medium</div>
<del class="to-medium-container">medium</del>
<div class="from-large-container">large</div>
<del class="to-large-container">large</del>
<div class="from-xl-container">xl</div>
<del class="to-xl-container">xl</del>
<div class="from-xxl-container">xxl</div>
<del class="to-xxl-container">xxl</del>
xs
xs
small
small
medium
medium
large
large
xl
xl
xxl
xxl

Nested containers

When nesting .bf-containers with different widths inside one another, visibility is determined based on its closest container.

<div class="bfl-grid">
  <div class="bfl-grid bf-container" style="--bfl-columns: 3">
    <div class="bf-container bfc-base-3-bg">
      <div class="from-xs-container">xs</div>
      <del class="to-xs-container">xs</del>
      <div class="from-small-container">small</div>
      <del class="to-small-container">small</del>
      <div class="from-medium-container">medium</div>
      <del class="to-medium-container">medium</del>
      <div class="from-large-container">large</div>
      <del class="to-large-container">large</del>
      <div class="from-xl-container">xl</div>
      <del class="to-xl-container">xl</del>
      <div class="from-xxl-container">xxl</div>
      <del class="to-xxl-container">xxl</del>
    </div>
    <div class="bf-container bfc-base-3-bg" style="grid-column: span 2">
      <div class="from-xs-container">xs</div>
      <del class="to-xs-container">xs</del>
      <div class="from-small-container">small</div>
      <del class="to-small-container">small</del>
      <div class="from-medium-container">medium</div>
      <del class="to-medium-container">medium</del>
      <div class="from-large-container">large</div>
      <del class="to-large-container">large</del>
      <div class="from-xl-container">xl</div>
      <del class="to-xl-container">xl</del>
      <div class="from-xxl-container">xxl</div>
      <del class="to-xxl-container">xxl</del>
    </div>
  </div>
  <div class="bf-container bfc-base-3-bg">
    <div class="from-xs-container">xs</div>
    <del class="to-xs-container">xs</del>
    <div class="from-small-container">small</div>
    <del class="to-small-container">small</del>
    <div class="from-medium-container">medium</div>
    <del class="to-medium-container">medium</del>
    <div class="from-large-container">large</div>
    <del class="to-large-container">large</del>
    <div class="from-xl-container">xl</div>
    <del class="to-xl-container">xl</del>
    <div class="from-xxl-container">xxl</div>
    <del class="to-xxl-container">xxl</del>
  </div>
</div>

<div class="bfl-grid">
  <div class="bfl-grid bf-container" style="--bfl-columns: 3">
    <div class="bf-container bfc-base-3-bg">
      <div class="from-xs-container">xs</div>
      <del class="to-xs-container">xs</del>
      <div class="from-small-container">small</div>
      <del class="to-small-container">small</del>
      <div class="from-medium-container">medium</div>
      <del class="to-medium-container">medium</del>
      <div class="from-large-container">large</div>
      <del class="to-large-container">large</del>
      <div class="from-xl-container">xl</div>
      <del class="to-xl-container">xl</del>
      <div class="from-xxl-container">xxl</div>
      <del class="to-xxl-container">xxl</del>
    </div>
    <div class="bf-container bfc-base-3-bg" style="grid-column: span 2">
      <div class="from-xs-container">xs</div>
      <del class="to-xs-container">xs</del>
      <div class="from-small-container">small</div>
      <del class="to-small-container">small</del>
      <div class="from-medium-container">medium</div>
      <del class="to-medium-container">medium</del>
      <div class="from-large-container">large</div>
      <del class="to-large-container">large</del>
      <div class="from-xl-container">xl</div>
      <del class="to-xl-container">xl</del>
      <div class="from-xxl-container">xxl</div>
      <del class="to-xxl-container">xxl</del>
    </div>
  </div>
  <div class="bf-container bfc-base-3-bg">
    <div class="from-xs-container">xs</div>
    <del class="to-xs-container">xs</del>
    <div class="from-small-container">small</div>
    <del class="to-small-container">small</del>
    <div class="from-medium-container">medium</div>
    <del class="to-medium-container">medium</del>
    <div class="from-large-container">large</div>
    <del class="to-large-container">large</del>
    <div class="from-xl-container">xl</div>
    <del class="to-xl-container">xl</del>
    <div class="from-xxl-container">xxl</div>
    <del class="to-xxl-container">xxl</del>
  </div>
</div>
xs
xs
small
small
medium
medium
large
large
xl
xl
xxl
xxl
xs
xs
small
small
medium
medium
large
large
xl
xl
xxl
xxl
xs
xs
small
small
medium
medium
large
large
xl
xl
xxl
xxl

Padded area is measured

Container queries measure width as available area excluding padding.

<div class="bf-container bfc-base-3-bg">
  <div class="from-xs-container">xs</div>
  <del class="to-xs-container">xs</del>
  <div class="from-small-container">small</div>
  <del class="to-small-container">small</del>
  <div class="from-medium-container">medium</div>
  <del class="to-medium-container">medium</del>
  <div class="from-large-container">large</div>
  <del class="to-large-container">large</del>
  <div class="from-xl-container">xl</div>
  <del class="to-xl-container">xl</del>
  <div class="from-xxl-container">xxl</div>
  <del class="to-xxl-container">xxl</del>
</div>
<div class="bf-container bfc-base-3-bg bf-padding">
  <div class="from-xs-container">xs</div>
  <del class="to-xs-container">xs</del>
  <div class="from-small-container">small</div>
  <del class="to-small-container">small</del>
  <div class="from-medium-container">medium</div>
  <del class="to-medium-container">medium</del>
  <div class="from-large-container">large</div>
  <del class="to-large-container">large</del>
  <div class="from-xl-container">xl</div>
  <del class="to-xl-container">xl</del>
  <div class="from-xxl-container">xxl</div>
  <del class="to-xxl-container">xxl</del>
</div>

<div class="bf-container bfc-base-3-bg">
  <div class="from-xs-container">xs</div>
  <del class="to-xs-container">xs</del>
  <div class="from-small-container">small</div>
  <del class="to-small-container">small</del>
  <div class="from-medium-container">medium</div>
  <del class="to-medium-container">medium</del>
  <div class="from-large-container">large</div>
  <del class="to-large-container">large</del>
  <div class="from-xl-container">xl</div>
  <del class="to-xl-container">xl</del>
  <div class="from-xxl-container">xxl</div>
  <del class="to-xxl-container">xxl</del>
</div>
<div class="bf-container bfc-base-3-bg bf-padding">
  <div class="from-xs-container">xs</div>
  <del class="to-xs-container">xs</del>
  <div class="from-small-container">small</div>
  <del class="to-small-container">small</del>
  <div class="from-medium-container">medium</div>
  <del class="to-medium-container">medium</del>
  <div class="from-large-container">large</div>
  <del class="to-large-container">large</del>
  <div class="from-xl-container">xl</div>
  <del class="to-xl-container">xl</del>
  <div class="from-xxl-container">xxl</div>
  <del class="to-xxl-container">xxl</del>
</div>
xs
xs
small
small
medium
medium
large
large
xl
xl
xxl
xxl
xs
xs
small
small
medium
medium
large
large
xl
xl
xxl
xxl