Container
Conditionally display content based on container width
Container
Go to top
CSS classes
Bifrost supplies a set of CSS classes to show/hide elements based on a container element width.
.bf-containercreates 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
| Name | xs | small | medium | large | xl | xxl |
|---|---|---|---|---|---|---|
| Container width | 300px | 600px | 960px | 1280px | 1600px | 1920px |
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
HTML
<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>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.
HTML
<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>Also see /css/breakpoints
Use screen breakpoint classes instead
Nested containers
When nesting .bf-containers with different widths inside one another,
visibility is determined based on its closest container.
HTML
<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>Padded area is measured
Container queries measure width as available area excluding padding.
HTML
<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>