The b.Container constructor creates a container element. Its maximum width depends on the applied modifier:
The b.Container constructor creates a container element. Its maximum width depends on the applied modifier:
| Modifier | Up to 1023px | Desktop (1024px-1215px) | Widescreen (1216px-1407px) | FullHD (1408px and above) |
|---|---|---|---|---|
| None | Full width | 960px | 1152px | 1344px |
b.Widescreen | Full width | 1152px | 1344px | |
b.FullHD | Full width | 1344px | ||
b.MaxDesktop | Full width | 960px | ||
b.MaxWidescreen | Full width | 960px | 1152px | |
b.Fluid | 100% with 32px gap on both sides | |||
<div class="container"><div class="notification is-primary">This container is <strong>centered</strong> on desktop and larger viewports.</div></div>
b.Container( b.Notification( b.Primary, "This container is ", e.Strong("centered"), " on desktop and larger viewports.", ), )
$widescreen breakpoint.<div class="container is-widescreen"><div class="is-primary notification">This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.</div></div>
b.Container( b.Widescreen, b.Notification( b.Primary, "This container is ", e.Strong("fullwidth"), " ", e.Em("until"), " the ", e.Code("$widescreen"), " breakpoint.", ), )
$fullhd breakpoint.<div class="container is-fullhd"><div class="notification is-primary">This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.</div></div>
b.Container( b.FullHD, b.Notification( b.Primary, "This container is ", e.Strong("fullwidth"), " ", e.Em("until"), " the ", e.Code("$fullhd"), " breakpoint.", ), )
max-width of $tablet - $container-offset.<div class="container is-max-tablet"><div class="is-primary notification">This container has a <code>max-width</code> of <code>$tablet - $container-offset</code>.</div></div>
b.Container( b.MaxTablet, b.Notification( b.Primary, "This container has a ", e.Code("max-width"), " of ", e.Code("$tablet - $container-offset"), ".", ), )
max-width of $desktop - $container-offset on widescreen and fullhd.<div class="container is-max-desktop"><div class="notification is-primary">This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.</div></div>
b.Container( b.MaxDesktop, b.Notification( b.Primary, "This container has a ", e.Code("max-width"), " of ", e.Code("$desktop - $container-offset"), " on widescreen and fullhd.", ), )
max-width of $widescreen - $container-offset on fullhd.<div class="container is-max-widescreen"><div class="notification is-primary">This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on fullhd.</div></div>
b.Container( b.MaxWidescreen, b.Notification( b.Primary, "This container has a ", e.Code("max-width"), " of ", e.Code("$widescreen - $container-offset"), " on fullhd.", ), )
<div class="is-fluid container"><div class="notification is-primary">This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any viewport size.</div></div>
b.Container( b.Fluid, b.Notification( b.Primary, "This container is ", e.Strong("fluid"), ": it will have a 32px gap on either side, on any viewport size.", ), )