bulma/docs/documentation/columns/options.html

191 lines
5.9 KiB
HTML
Raw Normal View History

2017-08-14 17:25:14 +00:00
---
title: Column options
layout: documentation
doc-tab: columns
doc-subtab: options
---
{% capture columns_multiline %}
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-half">
<code>is-half</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column">
Auto
</div>
</div>
{% endcapture %}
2017-08-14 18:12:07 +00:00
{% 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 %}
2017-08-14 17:25:14 +00:00
{% include subnav-columns.html %}
<section class="section">
<div class="container">
<h1 class="title">Column options</h1>
<h2 class="subtitle">
Design different <strong>types</strong> of column layouts
</h2>
{% include anchor.html name="Multiline" %}
<div class="content">
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
</div>
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<p class="bd-notification is-info"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
</div>
<div class="column is-half">
<p class="bd-notification is-info"><code>is-half</code></p>
</div>
<div class="column is-one-quarter">
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
</div>
<div class="column">
<p class="bd-notification is-info">Auto</p>
</div>
</div>
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
2017-08-14 18:12:07 +00:00
{% 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 %}
2017-08-14 17:25:14 +00:00
</div>
</section>