Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 04:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add docs folder

Browse Source
This commit is contained in:
Jeremy Thomas
2016-09-11 11:55:14 +01:00
parent b9e3dde692
commit f972f32a77
114 changed files with 21748 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/documentation/layout/container.html Normal file
View File

@@ -0,0 +1,70 @@
---
layout: documentation
doc-tab: layout
doc-subtab: container
---
{% 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>.header</code></li>
<li><code>.hero</code></li>
<li><code>.section</code></li>
<li><code>.footer</code></li>
</ul>
<p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
<p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
</div>
</div>
<div class="example">
<div class="container">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
</div>
</div>
{% highlight html %}
<div class="container">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
</div>
{% 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 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
</div>
</div>
<div class="example is-fullwidth">
<div class="container is-fluid">
<div class="notification">
This container is <strong>fluid</strong>: it will have a 20px gap on either side.
</div>
</div>
</div>
{% highlight html %}
<div class="container is-fluid">
<div class="notification">
This container is <strong>fluid</strong>: it will have a 20px gap on either side, on any viewport size.
</div>
</div>
{% endhighlight %}
</section>