mirror of
https://github.com/jgthms/bulma.git
synced 2024-12-12 13:28:30 +00:00
315 lines
9.5 KiB
HTML
315 lines
9.5 KiB
HTML
---
|
|
title: Container
|
|
layout: docs
|
|
theme: library
|
|
fullwidth: true
|
|
hide_categories: true
|
|
doc-tab: layout
|
|
doc-subtab: container
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- layout
|
|
- layout-container
|
|
meta:
|
|
colors: false
|
|
sizes: true
|
|
variables: true
|
|
hide_css_vars: true
|
|
---
|
|
|
|
{% capture container_example %}
|
|
<div class="container">
|
|
<div class="notification is-primary">
|
|
This container is <strong>centered</strong> on desktop and larger viewports.
|
|
</div>
|
|
</div>
|
|
{% endcapture %} {% capture container_fluid_example %}
|
|
<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>
|
|
{% endcapture %} {% capture container_widescreen_example %}
|
|
<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>
|
|
{% endcapture %} {% capture container_fullhd_example %}
|
|
<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>
|
|
{% endcapture %} {% capture container_max_tablet_example %}
|
|
<div class="container is-max-tablet">
|
|
<div class="notification is-primary">
|
|
This container has a <code>max-width</code> of
|
|
<code>$tablet - $container-offset</code>.
|
|
</div>
|
|
</div>
|
|
{% endcapture %} {% capture container_max_desktop_example %}
|
|
<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>
|
|
{% endcapture %} {% capture container_max_widescreen_example %}
|
|
<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>
|
|
{% endcapture %} {% assign bp_tablet = site.data.breakpoints.tablet %} {% assign
|
|
bp_desktop = site.data.breakpoints.desktop %} {% assign bp_widescreen =
|
|
site.data.breakpoints.widescreen %} {% assign bp_fullhd =
|
|
site.data.breakpoints.fullhd %} {% assign container_offset = 64 %} {% capture
|
|
thead %}
|
|
<thead>
|
|
<tr>
|
|
<th class="bd-is-empty"></th>
|
|
{% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint =
|
|
breakpoint_hash[1] %} {% if breakpoint.id == 'tablet' %}
|
|
<th>
|
|
Below
|
|
<br />
|
|
<code>{{ bp_tablet.to }}px</code>
|
|
</th>
|
|
{% elsif breakpoint.id != 'mobile' %}
|
|
<th>
|
|
{{ breakpoint.name }}
|
|
<br />
|
|
{% if breakpoint.id == 'fullhd' %}
|
|
<code>{{ breakpoint.from }}px</code> and above {% else %} Between
|
|
<code>{{ breakpoint.from }}px</code> and
|
|
<code>{{ breakpoint.to }}px</code>
|
|
{% endif %}
|
|
</th>
|
|
{% endif %} {% endfor %}
|
|
</tr>
|
|
</thead>
|
|
{% endcapture %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
The <code>container</code> is a simple utility element that allows you to
|
|
<strong>center</strong> content on larger viewports. It can be used in any
|
|
context, but mostly as a <strong>direct child</strong> of one of the
|
|
following:
|
|
</p>
|
|
<ul>
|
|
<li><code>navbar</code></li>
|
|
<li><code>hero</code></li>
|
|
<li><code>section</code></li>
|
|
<li><code>footer</code></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- -->
|
|
{% include docs/elements/anchor.html name="Overview" %}
|
|
|
|
<div class="table-container">
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
{{ thead }}
|
|
</tr>
|
|
<tr>
|
|
<th>Class</th>
|
|
<th colspan="4" class="has-text-centered"><code>max-width</code></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>.container</code></td>
|
|
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
|
<td>
|
|
<code>{{ bp_desktop.from | minus: container_offset }}px</code>
|
|
</td>
|
|
<td>
|
|
<code>{{ bp_widescreen.from | minus: container_offset }}px</code>
|
|
</td>
|
|
<td>
|
|
<code>{{ bp_fullhd.from | minus: container_offset }}px</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.container.is-widescreen</code></td>
|
|
<td colspan="2" class="has-text-grey-light has-background-white-ter">
|
|
Full width
|
|
</td>
|
|
<td>
|
|
<code>{{ bp_widescreen.from | minus: container_offset }}px</code>
|
|
</td>
|
|
<td>
|
|
<code>{{ bp_fullhd.from | minus: container_offset }}px</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.container.is-fullhd</code></td>
|
|
<td colspan="3" class="has-text-grey-light has-background-white-ter">
|
|
Full width
|
|
</td>
|
|
<td>
|
|
<code>{{ bp_fullhd.from | minus: container_offset }}px</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.container.is-max-desktop</code></td>
|
|
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
|
<td colspan="3">
|
|
<code>{{ bp_desktop.from | minus: container_offset }}px</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>.container.is-max-widescreen</code></td>
|
|
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
|
<td>
|
|
<code>{{ bp_desktop.from | minus: container_offset }}px</code>
|
|
</td>
|
|
<td colspan="2">
|
|
<code>{{ bp_widescreen.from | minus: container_offset }}px</code>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- -->
|
|
{% include docs/elements/anchor.html name="Default behavior" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
By default, the <code>container</code> will only be activated from the
|
|
<code>$desktop</code> breakpoint. It will increase its
|
|
<code>max-width</code> after reaching the <code>$widescreen</code> and
|
|
<code>$fullhd</code> breakpoints.
|
|
</p>
|
|
<p>
|
|
The container's <strong>width</strong> for each
|
|
<strong>breakpoint</strong> is the result of:
|
|
<code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a
|
|
default value of <code> 32px</code> but can be modified.
|
|
</p>
|
|
<p>This is how the container will behave:</p>
|
|
<ul>
|
|
<li>
|
|
on <code>$desktop</code> it will have a maximum width of
|
|
<strong>960px</strong>.
|
|
</li>
|
|
<li>
|
|
on <code>$widescreen</code> it will have a maximum width of
|
|
<strong>1152px</strong>.
|
|
</li>
|
|
<li>
|
|
on <code>$fullhd</code> it will have a maximum width of
|
|
<strong>1344px</strong>.
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
The values <strong>960</strong>, <strong>1152</strong> and
|
|
<strong>1344</strong> have been chosen because they are divisible by both
|
|
<strong>12</strong> and <strong>16</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bd-example is-fullwidth">{{ container_example }}</div>
|
|
|
|
{% highlight html -%} {{- container_example -}} {%- endhighlight %}
|
|
|
|
<!-- -->
|
|
{% include docs/elements/anchor.html name="Widescreen or FullHD only" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
With the two modifiers <code>is-widescreen</code> and
|
|
<code>is-fullhd</code>, you can have a <em>fullwidth</em> container
|
|
<strong>until</strong> those specific breakpoints.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bd-example is-fullwidth">{{ container_widescreen_example }}</div>
|
|
|
|
{% highlight html -%} {{- container_widescreen_example -}} {%- endhighlight %}
|
|
|
|
<div class="bd-example is-fullwidth">{{ container_fullhd_example }}</div>
|
|
|
|
{% highlight html -%} {{- container_fullhd_example -}} {%- endhighlight %}
|
|
|
|
<!-- -->
|
|
{% include docs/elements/anchor.html name="Tablet, Desktop and Widescreen
|
|
maximum widths" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Sometimes, you might want a <strong>narrow</strong> container on larger
|
|
viewports. That's why Bulma provides 3 modifier classes:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<code>.container.is-max-tablet</code> will behave like a tablet container
|
|
</li>
|
|
<li>
|
|
<code>.container.is-max-desktop</code> will behave like a desktop
|
|
container
|
|
</li>
|
|
<li>
|
|
<code>.container.is-max-widescreen</code> will behave like a widescreen
|
|
container
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bd-example is-fullwidth">{{ container_max_tablet_example }}</div>
|
|
|
|
{% highlight html -%} {{- container_max_tablet_example -}} {%- endhighlight %}
|
|
|
|
<div class="bd-example is-fullwidth">{{ container_max_desktop_example }}</div>
|
|
|
|
{% highlight html -%} {{- container_max_desktop_example -}} {%- endhighlight %}
|
|
|
|
<div class="bd-example is-fullwidth">
|
|
{{ container_max_widescreen_example }}
|
|
</div>
|
|
|
|
{% highlight html -%} {{- container_max_widescreen_example -}} {%- endhighlight
|
|
%}
|
|
|
|
<!-- -->
|
|
{% include docs/elements/anchor.html name="Absolute maximum width" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
If you want to change the maximum width of <strong>all</strong> containers,
|
|
you can do so by updating the values of the
|
|
<code>$container-max-width</code> Sass variable.
|
|
</p>
|
|
<p>
|
|
By default, the <code>$fullhd</code> breakpoint value is used to calculate
|
|
the <strong>absolute</strong> maximum width of the <code>container</code>.
|
|
Simply change it to a smaller value like <code>$widescreen</code>,
|
|
<code>$desktop</code>, or any value in <strong>pixels</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- -->
|
|
{% include docs/elements/anchor.html name="Fluid container" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
If you don't want to have a maximum width but want to keep the 32px margin
|
|
on the left and right sides, add the
|
|
<code>is-fluid</code> modifier:
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>
|
|
|
|
{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %}
|