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 gap

Browse Source
This commit is contained in:
Jeremy Thomas
2017-08-14 19:12:07 +01:00
parent 6fe43b8f94
commit 2aba5a3f84
8 changed files with 162 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
docs/documentation/columns/options.html
View File

@@ -72,6 +72,52 @@ doc-subtab: options
</div>
{% endcapture %}
{% capture columns_mobile_centered %}
<div class="columns is-mobile is-centered">
<div class="column is-half is-narrow">
<p class="bd-notification is-info">
<code class="html">is-half</code><br>
<code class="html">is-narrow</code>
</p>
</div>
</div>
{% endcapture %}
{% capture columns_mobile_multiline_centered %}
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-info">
<code class="html">is-narrow</code><br>
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success">
<code class="html">is-narrow</code><br>
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-danger">
<code class="html">is-narrow</code><br>
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-info">
<code class="html">is-narrow</code><br>
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success">
<code class="html">is-narrow</code><br>
Fifth Column
</p>
</div>
</div>
{% endcapture %}
{% capture columns_narrow %}
<div class="columns">
<div class="column is-narrow">
@@ -197,6 +243,66 @@ doc-subtab: options
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
{% include anchor.html name="Centering columns" %}
<div class="content">
<p>
While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
</p>
</div>
<div class="columns is-mobile is-centered">
<div class="column is-half is-narrow">
<p class="bd-notification is-info">
<code class="html">is-half</code><br>
<code class="html">is-narrow</code>
</p>
</div>
</div>
{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
<div class="content">
<p>
Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
</p>
</div>
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
Fifth Column
</p>
</div>
</div>
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
{% include anchor.html name="Narrow column" %}
<div class="content">