mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
118 lines
3.8 KiB
HTML
118 lines
3.8 KiB
HTML
---
|
|
layout: documentation
|
|
doc-tab: layout
|
|
doc-subtab: container
|
|
---
|
|
|
|
{% capture container_example %}
|
|
<div class="container">
|
|
<div class="notification">
|
|
This container is <strong>centered</strong> on desktop.
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture container_fluid_example %}
|
|
<div class="container is-fluid">
|
|
<div class="notification">
|
|
This container is <strong>fluid</strong>: it will have a 24px gap on either side, on any viewport size.
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% capture container_widescreen_example %}
|
|
<div class="container is-widescreen">
|
|
<div class="notification">
|
|
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">
|
|
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
|
|
</div>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
{% include subnav-layout.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Container</h1>
|
|
<h2 class="subtitle">
|
|
A simple <strong>container</strong> to center your content horizontally
|
|
</h2>
|
|
|
|
<hr>
|
|
|
|
<div class="content">
|
|
<p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
|
|
<ul>
|
|
<li><code>.nav</code></li>
|
|
<li><code>.hero</code></li>
|
|
<li><code>.section</code></li>
|
|
<li><code>.footer</code></li>
|
|
</ul>
|
|
<p>This is how the container will behave:</p>
|
|
<ul>
|
|
<li>on <strong>mobile</strong> and <strong>tablet</strong> {% include bp/touch.html %}, it will have a margin of <strong>24px</strong> on each side.</li>
|
|
<li>on <strong>desktop</strong> {% include bp/desktop.html %}, it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
|
|
<li>on <strong>widescreen</strong> {% include bp/widescreen.html %}, it will have a maximum width of <strong>1152px</strong>.</li>
|
|
<li>on <strong>fullhd</strong> {% include bp/fullhd.html %}, it will have a maximum width of <strong>1344px</strong>.</li>
|
|
</ul>
|
|
<p>
|
|
The <code>$gap</code> variable has a default value of <code>24px</code> but can be modified.
|
|
</p>
|
|
<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>
|
|
</section>
|
|
|
|
<div class="example is-fullwidth">
|
|
{{container_example}}
|
|
</div>
|
|
|
|
{% highlight html %}{{container_example}}{% endhighlight %}
|
|
|
|
<div class="container">
|
|
<hr>
|
|
<h3 class="title">Fluid container</h3>
|
|
<div class="content">
|
|
<p>If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example is-fullwidth">
|
|
{{container_fluid_example}}
|
|
</div>
|
|
|
|
{% highlight html %}{{container_fluid_example}}{% endhighlight %}
|
|
|
|
<div class="container">
|
|
<hr>
|
|
<h3 class="title">Breakpoint containers</h3>
|
|
<div class="content">
|
|
<p>
|
|
<span class="tag is-success">New!</span>
|
|
<span class="tag is-info">0.4.4</span>
|
|
</p>
|
|
<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>
|
|
|
|
<div class="example is-fullwidth">
|
|
{{container_widescreen_example}}
|
|
</div>
|
|
|
|
{% highlight html %}{{container_widescreen_example}}{% endhighlight %}
|
|
|
|
<div class="example is-fullwidth">
|
|
{{container_fullhd_example}}
|
|
</div>
|
|
|
|
{% highlight html %}{{container_fullhd_example}}{% endhighlight %}
|