mirror of
https://github.com/jgthms/bulma.git
synced 2024-12-12 13:28:30 +00:00
36 lines
1.1 KiB
HTML
36 lines
1.1 KiB
HTML
|
<div class="container">
|
||
|
|
<div class="notification is-primary">
|
||
|
|
This container is <strong>centered</strong> on desktop and larger viewports.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container is-widescreen">
|
||
|
|
<div class="notification is-primary">
|
||
|
|
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<div class="container is-fluid">
|
||
|
|
<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>
|